ניווט מהיר יותר באינטרנט עם שליפה מראש חזויה

מידע נוסף על שליפה מראש (prefetch) ועל האופן שבו חברת Guess.js מטמיעה אותה.

Minko Gechev

בפעילות ניווט מהיר יותר באינטרנט עם Predictive Prefetching ב-Google I/O 2019, בהתחלה דיברתי על אופטימיזציה של אפליקציות אינטרנט באמצעות פיצול קוד, ועל ההשלכות האפשריות על הביצועים לניווט הבא בדפים. בחלק השני של השיחה הסברתי איך אפשר לשפר את מהירות הניווט באמצעות Guess.js כדי להגדיר שליפה מראש של חיזוי:

פיצול קוד לאפליקציות אינטרנט מהירות יותר

אפליקציות אינטרנט הן איטיות, ו-JavaScript הוא אחד מהמשאבים היקרים ביותר שאתם שולחים. המתנה לטעינה איטית של אפליקציית אינטרנט עלולה לתסכל את המשתמשים ולהפחית את מספר ההמרות.

אפליקציות אינטרנט איטיות הן מרגשות.

טעינה מדורגת היא שיטה יעילה להפחתת הבייטים של JavaScript שאתם מעבירים ברשת. ניתן להשתמש בכמה שיטות לטעינה מדורגת של JavaScript, כולל:

  • פיצול קוד ברמת הרכיב
  • פיצול קוד ברמת המסלול

באמצעות פיצול קוד ברמת הרכיב, אפשר להעביר רכיבים בודדים למקטעי JavaScript נפרדים. באירועים מסוימים, ניתן לטעון את הסקריפטים הרלוונטיים ולעבד את הרכיבים.

עם זאת, באמצעות פיצול קוד ברמת המסלול אתם מעבירים נתיבים שלמים למקטעי קוד בלתי תלויים. כשמשתמשים עוברים מנתיב אחד לנתיב אחר, הם צריכים להוריד את ה-JavaScript המשויך ולבצע אתחול של הדף המבוקש. הפעולות האלה עלולות לגרום לעיכובים משמעותיים, במיוחד ברשתות איטיות.

שליפה מראש של JavaScript

השליפה מראש (prefetch) מאפשרת לדפדפן להוריד ולשמור במטמון משאבים שסביר להניח שהמשתמש יזדקק להם בקרוב. השיטה הרגילה היא להשתמש ב-<link rel="prefetch">, אבל יש שתי מלכודות נפוצות:

  • שליפה מראש של משאבים רבים מדי (אחזור יתר) צורכת כמות גדולה של נתונים.
  • יכול להיות שלעולם לא תתבצע שליפה מראש (prefetch) של חלק מהמשאבים שהמשתמש צריך.

שליפה מראש חזויה פותרת את הבעיות האלה באמצעות דוח של דפוסי הניווט של המשתמשים כדי לקבוע אילו נכסים לשליפה מראש.

דוגמה לאחזור מראש

שליפה מראש (prefetch) חזויה באמצעות Guess.js

Guess.js היא ספריית JavaScript שמספקת פונקציונליות של שליפה מראש (prefetch). Guess.js משתמש בדוח מ-Google Analytics או מספק אחר של ניתוח נתונים כדי לבנות מודל חיזוי שיכול לשמש לשליפה מראש (prefetch) חכמה של רק את מה שסביר להניח שהמשתמש יצטרך.

ב-Guess.js יש שילובים עם Angular, Next.js, Nuxt.js ו-Gatsby. כדי להשתמש בו באפליקציה, מוסיפים את השורות הבאות להגדרות של חבילת ה-webpack כדי לציין מזהה תצוגה מפורטת ב-Google Analytics:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

אם אתם לא משתמשים ב-Google Analytics, תוכלו לציין reportProvider ולהוריד נתונים מהשירות המועדף עליכם.

שילוב עם frameworks

למידע נוסף על השילוב של Guess.js עם ה-framework המועדף עליכם, כדאי לעיין במקורות המידע הבאים:

להדרכה מפורטת מהירה על השילוב עם Angular, צפו בסרטון הבא:

איך פועל Guess.js?

כך הכלי Guess.js מיישם שליפה מראש של חיזוי:

  1. קודם כול, המערכת שולפת נתונים לגבי דפוסי הניווט של המשתמשים מספק ניתוח הנתונים המועדף עליכם.
  2. לאחר מכן הוא ממפה את כתובות ה-URL מהדוח למקטעי JavaScript שהופקו על ידי Webpack.
  3. על סמך הנתונים שחולצו, המערכת יוצרת מודל חיזוי פשוט של הדפים שאליהם המשתמש צפוי לעבור מכל דף נתון.
  4. היא מפעילה את המודל עבור כל מקטע JavaScript, וחוזה את המקטעים האחרים שככל הנראה יידרשו בהמשך.
  5. היא מוסיפה הוראות לשליפה מראש (prefetch) לכל מקטע.

כשפעולת Guess.js תסתיים, כל מקטע יכיל הוראות שליפה מראש (prefetch), בדומה ל:

__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"> בכותרת הדף, אחד לכל מקטע. אם המשתמש נמצא ברשת במהירות גבוהה, Guess.js יאחזר מראש את שני המקטעים. אם למשתמש יש חיבור באיכות ירודה, המערכת של Guess.js תאחזר מראש רק את המקטע b.js כי יש סבירות גבוהה שיהיה צורך בו.

מידע נוסף

למידע נוסף על Guess.js, אפשר לעיין במקורות המידע הבאים: