ดูข้อมูลเกี่ยวกับการดึงข้อมูลล่วงหน้าตามการคาดการณ์และวิธีที่ Guess.js นำไปใช้งาน
ในเซสชันการไปยังส่วนต่างๆ ของเว็บที่เร็วขึ้นด้วยการดึงข้อมูลล่วงหน้าตามการคาดการณ์ที่ Google I/O 2019 ฉันเริ่มด้วยการพูดถึงการเพิ่มประสิทธิภาพเว็บแอปด้วยการแยกโค้ด และผลกระทบด้านประสิทธิภาพที่อาจเกิดขึ้นสำหรับการนำทางหน้าเว็บที่ตามมา ในส่วนที่ 2 ของการพูดคุย เราได้พูดถึงวิธีปรับปรุงความเร็วในการไปยังส่วนต่างๆ โดยใช้ 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 แท็กในส่วนหัวของหน้าเว็บ 1 แท็กต่อ 1 กลุ่ม หากผู้ใช้อยู่ในเครือข่ายความเร็วสูง Guess.js จะดึงข้อมูลทั้ง 2 กลุ่มล่วงหน้า หากผู้ใช้มีการเชื่อมต่อเครือข่ายที่สัญญาณไม่ดี Guess.js จะดึงข้อมูลเฉพาะกลุ่ม b.js ล่วงหน้าเท่านั้น เนื่องจากมีโอกาสสูงที่จำเป็นต้องใช้
ดูข้อมูลเพิ่มเติม
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Guess.js โปรดดูแหล่งข้อมูลต่อไปนี้