เรียนรู้เกี่ยวกับการดึงข้อมูลล่วงหน้าแบบคาดการณ์และวิธีที่ Guess.js นำข้อมูลดังกล่าวไปใช้
ในเซสชันการนำทางเว็บที่เร็วขึ้นด้วยการดึงข้อมูลล่วงหน้าแบบคาดการณ์ที่งาน Google I/O 2019 ฉันเริ่มด้วยการพูดถึงการเพิ่มประสิทธิภาพเว็บแอปด้วยการแยกโค้ดและผลด้านประสิทธิภาพที่เป็นไปได้สำหรับการนำทางหน้าเว็บในครั้งต่อๆ ไป ในส่วนที่สองของการพูดคุยนี้ เราได้กล่าวถึงวิธีปรับปรุงความเร็วในการไปยังส่วนต่างๆ โดยใช้ Guess.js เพื่อตั้งค่าการดึงข้อมูลล่วงหน้าแบบคาดการณ์
การแยกโค้ดสำหรับเว็บแอปที่เร็วขึ้น
เว็บแอปทำงานช้า และ JavaScript เป็นหนึ่งในทรัพยากรที่มีราคาแพงที่สุดที่คุณจัดส่ง การรอให้เว็บแอปที่โหลดช้าอาจทำให้ผู้ใช้หงุดหงิดและลดจำนวน Conversion ได้
การโหลดแบบ Lazy Loading เป็นเทคนิคที่มีประสิทธิภาพในการลดจำนวนไบต์ของ JavaScript ที่คุณโอนผ่านสาย คุณใช้เทคนิคต่างๆ ในการโหลด JavaScript แบบ Lazy Loading ได้ เช่น
- การแยกโค้ดระดับคอมโพเนนต์
- การแยกโค้ดระดับเส้นทาง
การแยกโค้ดระดับคอมโพเนนต์ช่วยให้คุณย้ายคอมโพเนนต์แต่ละรายการเป็นกลุ่ม JavaScript ที่แยกกันได้ ในบางเหตุการณ์ คุณสามารถโหลดสคริปต์ที่เกี่ยวข้องและแสดงผลคอมโพเนนต์ได้
แต่การแยกโค้ดระดับเส้นทางเป็นการย้ายเส้นทางทั้งหมดออกเป็นส่วนๆ ที่เป็นอิสระจากกัน เมื่อผู้ใช้เปลี่ยนจากเส้นทางหนึ่งไปยังอีกเส้นทางหนึ่ง ผู้ใช้จะต้องดาวน์โหลด JavaScript ที่เกี่ยวข้องและเปิดใช้หน้าเว็บที่ขอ การดำเนินการเหล่านี้อาจทำให้เกิดความล่าช้าอย่างมาก โดยเฉพาะอย่างยิ่งในเครือข่ายที่ช้า
การดึงข้อมูล JavaScript ล่วงหน้า
การดึงข้อมูลล่วงหน้าจะช่วยให้เบราว์เซอร์ดาวน์โหลดและแคชทรัพยากรที่ผู้ใช้น่าจะต้องการใช้ในเร็วๆ นี้ วิธีการตามปกติคือการใช้ <link rel="prefetch"> แต่มีข้อเสียทั่วไป 2 ประการดังนี้
- การดึงข้อมูลทรัพยากรล่วงหน้ามากเกินไป (การดึงข้อมูลมากเกินไป) ต้องใช้ข้อมูลจำนวนมาก
- ทรัพยากรบางอย่างที่ผู้ใช้ต้องการอาจไม่มีการดึงข้อมูลล่วงหน้า
การดึงข้อมูลล่วงหน้าแบบคาดการณ์จะช่วยแก้ปัญหาเหล่านี้ได้โดยใช้รายงานรูปแบบการนำทางของผู้ใช้เพื่อพิจารณาว่าจะดึงข้อมูลเนื้อหาใดล่วงหน้า
การดึงข้อมูลล่วงหน้าที่มีการคาดการณ์ด้วย Guess.js
Guess.js เป็นไลบรารี JavaScript ที่มีฟังก์ชันการดึงข้อมูลแบบคาดการณ์ล่วงหน้า Guess.js ใช้รายงานจาก Google Analytics หรือผู้ให้บริการวิเคราะห์รายอื่นเพื่อสร้างโมเดลการคาดการณ์ที่สามารถใช้เพื่อดึงข้อมูลล่วงหน้าอย่างชาญฉลาดในสิ่งที่ผู้ใช้น่าจะต้องการ
Guess.js มีการผสานรวมกับ Angular, Next.js, Nuxt.js และ Gatsby หากต้องการนำไปใช้ในแอปพลิเคชัน ให้เพิ่มบรรทัดต่อไปนี้ลงในการกำหนดค่า Webpack เพื่อระบุรหัสข้อมูลพร็อพเพอร์ตี้ Google Analytics
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
หากไม่ได้ใช้ Google Analytics คุณระบุ reportProvider และดาวน์โหลดข้อมูลจากบริการโปรดได้
การผสานรวมกับเฟรมเวิร์ก
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีผสานรวม Guess.js กับเฟรมเวิร์กที่คุณชื่นชอบ โปรดดูแหล่งข้อมูลต่อไปนี้
ดูคำแนะนำแบบคร่าวๆ เกี่ยวกับการผสานรวมกับ Angular ได้ในวิดีโอนี้
วิธีการทำงานของ Guess.js
ต่อไปนี้คือวิธีที่ Guess.js ใช้การดึงข้อมูลล่วงหน้าแบบคาดการณ์
- โดยจะดึงข้อมูลสำหรับรูปแบบการนำทางของผู้ใช้จากผู้ให้บริการวิเคราะห์ที่คุณชื่นชอบก่อน
- จากนั้นจะแมป URL จากรายงานกับช่อง JavaScript ที่สร้างโดย Webpack
- จากข้อมูลที่ดึงมา โมเดลจะสร้างโมเดลการคาดการณ์แบบง่ายๆ ว่าผู้ใช้จะไปยังหน้าใดจากหน้าหนึ่งๆ
- โดยจะเรียกใช้โมเดลสำหรับกลุ่ม JavaScript แต่ละกลุ่ม โดยคาดการณ์ส่วนอื่นๆ ที่น่าจะต้องใช้ในลำดับถัดไป
- เพิ่มวิธีการดึงข้อมูลล่วงหน้าให้กับแต่ละส่วน
เมื่อ Guess.js สร้างเสร็จแล้ว แต่ละส่วนจะมีวิธีการดึงข้อมูลล่วงหน้าที่คล้ายกับ
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
โค้ด Guess.js ที่สร้างขึ้นนี้กำลังบอกให้เบราว์เซอร์พิจารณาการดึงข้อมูลส่วน a.js ล่วงหน้าที่มีความน่าจะเป็น 0.2 และกลุ่ม b.js ที่มีความน่าจะเป็น 0.8
เมื่อเบราว์เซอร์เรียกใช้โค้ดแล้ว Guess.js จะตรวจสอบความเร็วในการเชื่อมต่อของผู้ใช้ หากเพียงพอ Guess.js จะแทรกแท็ก <link rel="prefetch"> 2 แท็กในส่วนหัวของหน้าเว็บ โดยแต่ละแท็กสำหรับแต่ละกลุ่ม หากผู้ใช้ใช้เครือข่ายความเร็วสูง Guess.js จะดึงข้อมูลทั้งสองส่วนล่วงหน้า หากผู้ใช้มีการเชื่อมต่อเครือข่ายที่สัญญาณไม่ดี Guess.js จะดึงข้อมูลส่วน b.js ล่วงหน้าเท่านั้น เนื่องจากมีความเป็นไปได้สูงที่จะจำเป็นต้องใช้
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Guess.js ได้จากแหล่งข้อมูลต่อไปนี้