การโหลดหน้าเว็บล่วงหน้ามีประโยชน์อย่างไร โหลดหน้าเว็บล่วงหน้า โหลดล่วงหน้า instant.page technology

ความเร็วในการโหลดหน้าเว็บจะส่งผลต่อ .ของคุณผู้จัดจำหน่ายไฟฟ้าเว็บไซต์ในเครื่องมือค้นหาSEO (Search Engine Optimization)อันดับ.

การโหลดหน้าเว็บล่วงหน้าคืออะไร

มีเทคนิคที่เรียกว่า prefetch ซึ่งจริงๆ แล้วเป็นเทคนิคการโหลดล่วงหน้า

• เมื่อผู้ใช้ตั้งใจเข้าชมหน้าใดหน้าหนึ่ง เบราว์เซอร์จะโหลดหน้านั้นล่วงหน้า
• เมื่อผู้ใช้คลิกลิงก์จริง ผู้ใช้จะอ่านเนื้อหาของหน้าโดยตรงจากแคชที่โหลดไว้ล่วงหน้า และลดเวลาในการโหลดหน้าเว็บ
• Amazon และบริษัทอื่นๆ พบว่าเวลาแฝง 100 มิลลิวินาทีคิดเป็น 1% ของยอดขาย แต่เวลาแฝงบนเว็บนั้นยากที่จะเอาชนะ

โหลดหน้าเว็บล่วงหน้าการโหลดล่วงหน้ามีประโยชน์อย่างไร?

instant.page ใช้การโหลดล่วงหน้าทันที - มันโหลดหน้าล่วงหน้าก่อนที่ผู้ใช้จะคลิก ▼

• ก่อนที่ผู้ใช้จะคลิกลิงก์ ผู้ใช้จะวางเมาส์เหนือลิงก์นั้น
• เมื่อผู้ใช้วางเมาส์เหนือ 65 มิลลิวินาที พวกเขาจะมีโอกาสคลิกที่ลิงก์ ดังนั้น instant.page จะเริ่มโหลดล่วงหน้า ณ จุดนี้ โดยเฉลี่ยแล้วกว่า 300 มิลลิวินาทีสำหรับหน้าที่จะโหลดล่วงหน้า
• บนอุปกรณ์เคลื่อนที่ ผู้ใช้จะเริ่มสัมผัสหน้าจอก่อนปล่อย โดยใช้เวลาประมาณ 90 มิลลิวินาทีในการโหลดหน้าเว็บล่วงหน้า

การดึงข้อมูลล่วงหน้าทำให้หน้าเว็บโหลดเร็วขึ้น

• สมองของมนุษย์ใช้เวลาน้อยกว่า 100 มิลลิวินาทีในการรับรู้การกระทำทันที
• ดังนั้นเทคโนโลยีการโหลดล่วงหน้าของ instant.page สามารถทำให้เว็บไซต์ของคุณรู้สึกได้ทันทีแม้ใช้ 3G (สมมติว่าความเร็วในการแสดงหน้าเว็บของคุณนั้นเร็ว)

วิธีแก้ปัญหาการโหลดหน้าเว็บช้า?

หน้าจะถูกโหลดล่วงหน้าก็ต่อเมื่อมีความเป็นไปได้สูงที่ผู้ใช้จะเข้าชม และจะโหลดเฉพาะ HTML สำหรับหน้านั้นเท่านั้น โดยคำนึงถึงแบนด์วิดท์และ CPU ของผู้ใช้และเซิร์ฟเวอร์

• ใช้ตัวฟังเหตุการณ์แบบพาสซีฟเพื่อให้หน้าเว็บของคุณราบรื่น
• ไม่มีการโหลดล่วงหน้าเมื่อผู้ใช้เปิดใช้งานการปกป้องข้อมูล (ในเวอร์ชัน 1.2.2)
• มันคือ 1 kB และโหลดหลังจากนั้นทุกอย่างเป็นโอเพ่นซอร์สฟรี (ใบอนุญาต MIT)

ผลของ Prefetch หน้าเว็บที่โหลดล่วงหน้า instant.page คืออะไร?

หลังจากทดสอบการเพิ่มโค้ด instant.page แล้ว การปรับปรุงความเร็วในการเข้าถึงเว็บไซต์ยังคงมีอยู่ค่อนข้างมาก

• โดยค่าเริ่มต้น ระบบจะกรองเพื่อโหลดล่วงหน้าเฉพาะลิงก์ของไซต์นี้ และจะไม่โหลดลิงก์จากไซต์อื่น
• เมื่อเมาส์คลิกลิงก์บทความทางด้านซ้ายนานกว่า 65ms เครือข่ายจะโหลดหน้าบทความไว้ล่วงหน้า
• เมื่อวางเมาส์ไว้น้อยกว่า 65ms จะไม่ทำการโหลดล่วงหน้า (ส่วนสีแดง)▼

การใช้ instant.page จะเพิ่ม PV และปริมาณคำขอของไซต์คุณอย่างมาก:

• เพื่อนคนหนึ่งกล่าวว่าจำนวนการเยี่ยมชมเฉลี่ยของเขาต่อการเยี่ยมชมคือ 13.84
• หลังการใช้งาน จำนวนการเข้าชมต่อหัวเพิ่มขึ้นเป็น 17.43 ครั้ง ซึ่งเท่ากับการเปิดหน้าเพิ่มอีก 4 หน้าต่อคน

ข้อควรระวัง:

• ควรสังเกตว่าบล็อกเกอร์ที่ใช้ CDN แบบชำระเงินและ CDN แบบเปิดแบบเต็มควรดำเนินการด้วยความระมัดระวัง
• แต่อย่ากังวล การโหลดล่วงหน้าจะโหลดเฉพาะหน้า html รูปภาพและไฟล์อื่นๆ จะไม่โหลด ดังนั้นจะไม่มีการสูญเสียการรับส่งข้อมูลมากนัก

จะใช้เทคโนโลยีการโหลดหน้าเว็บล่วงหน้าได้อย่างไร?

อันที่จริง มีแอตทริบิวต์ rel ในแท็กลิงก์ของ html5 ซึ่งหนึ่งในนั้นเป็นการดึงข้อมูลล่วงหน้า แต่จำนวนผู้บริโภคมีน้อย

instant.page ที่แนะนำในบทความนี้เป็นสคริปต์ที่ใช้เทคนิคนี้

• สคริปต์นี้จะตัดสินตามระยะเวลาที่ผู้ใช้วางเมาส์เหนือลิงก์
• เมื่อถึง 65ms ผู้ใช้มีโอกาสครึ่งหนึ่งในการเปิดลิงก์และ Instant.page จะโหลดหน้านี้ล่วงหน้า

โค้ดสคริปต์ JS โหลดหน้าเว็บล่วงหน้า

1) จัดเตรียมสคริปต์ JS อย่างเป็นทางการด้วยการเร่งความเร็วของ Cloudflare▼

การใช้ instant.page นั้นง่ายมาก เพียงเพิ่มโค้ดต่อไปนี้ในเว็บไซต์ของคุณก่อนถึงป้าย.

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2) อิสระในตัวเองเฉิน เว่ยเหลียงข้อเสนอ▼

• สคริปต์นี้อยู่ในเซิร์ฟเวอร์ Instantclick-1.2.2.js ดังนั้นคุณจึงไม่ต้องกังวลว่าจะทำให้ช้าลง 

กรุณาเพิ่มรหัสต่อไปนี้ในเว็บไซต์ของคุณก่อนติดฉลาก:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>