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

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

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

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

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

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

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

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

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

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

אחזור מראש של JavaScript

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

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

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

דוגמה לטעינה מראש

אחזור מראש חזוי באמצעות Guess.js

Guess.js היא ספריית JavaScript שמספקת פונקציונליות של אחזור מראש חזוי. 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 ולהוריד נתונים מהשירות המועדף עליכם.

שילוב עם מסגרות

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

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

איך פועלת Guess.js?

כך פועלת ההטמעה של Guess.js להטמעת נתונים מראש באופן חזוי:

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

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

מידע נוסף

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