מידע נוסף על שליפה מראש חזויה ועל האופן שבו Guess.js מיישם אותה.
בסשן של ניווט מהיר יותר באינטרנט עם שליפה מראש של חיזוי ב-Google I/O 2019, התחלתי לדבר על אופטימיזציה של אפליקציות אינטרנט באמצעות פיצול קוד והשלכות אפשריות על הביצועים לאחר הניווט בדפים. בחלק השני של השיחה הסברתי איך לשפר את מהירות הניווט בעזרת Guess.js כדי להגדיר שליפה מראש (prefetch) חזויה:
פיצול קוד לאפליקציות אינטרנט מהירות יותר
אפליקציות האינטרנט איטיות, ו-JavaScript הוא אחד המשאבים היקרים ביותר שאתם מספקים. ההמתנה עד לטעינה איטית של אפליקציית אינטרנט יכולה לתסכל את המשתמשים שלך ולהקטין את מספר ההמרות.
טעינה עצלה היא שיטה יעילה להפחתת הבייטים של JavaScript שמועברים באמצעות כבל. יש כמה שיטות לטעינה מדורגת של JavaScript, כולל:
- פיצול קוד ברמת הרכיב
- פיצול קוד ברמת המסלול
באמצעות פיצול קוד ברמת הרכיב, תוכלו להעביר רכיבים נפרדים למקטעי JavaScript נפרדים. באירועים מסוימים, ניתן לטעון את הסקריפטים הרלוונטיים ולעבד את הרכיבים.
עם זאת, באמצעות פיצול קוד ברמת המסלול, אתם מעבירים מסלולים שלמות למקטעים עצמאיים. כשמשתמשים עוברים מנתיב אחד לאחר, הם צריכים להוריד את ה-JavaScript המשויך ולאתחל את הדף המבוקש. הפעולות האלה עלולות לגרום לעיכובים משמעותיים, במיוחד ברשתות איטיות.
שליפה מראש של JavaScript
שליפה מראש (prefetch) מאפשרת לדפדפן להוריד ולשמור במטמון משאבים שהמשתמש עשוי להזדקק להם בקרוב. השיטה הרגילה היא להשתמש ב-<link rel="prefetch">, אבל יש שתי שגיאות נפוצות:
- שליפה מראש (prefetch) של משאבים רבים מדי (אחזור יתר) מצריכה נתונים רבים.
- ייתכן שלעולם לא תתבצע שליפה מראש (prefetch) של חלק מהמשאבים שהמשתמש צריך.
שליפה מראש חזויה פותרת את הבעיות האלה באמצעות שימוש בדוח על דפוסי הניווט של המשתמשים, כדי לקבוע אילו נכסים כדאי לאחזר מראש.
שליפה מראש חזויה באמצעות 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 עם ה-framework המועדף עליכם, אפשר לעיין במקורות המידע הבאים:
בסרטון הבא אפשר למצוא הדרכה מפורטת על השילוב עם Angular:
איך Guess.js עובד?
כך מטמיעה Guess.js שליפה מראש חזויה:
- בשלב הראשון, המערכת שולפת נתונים על דפוסי הניווט של המשתמשים מהספק המועדף עליכם לניתוח נתונים.
- לאחר מכן הוא ממפה את כתובות ה-URL מהדוח למקטעי JavaScript שהופקו על ידי Webpack.
- על סמך הנתונים שחולצו, היא יוצרת מודל חיזוי פשוט של הדפים שסביר שהמשתמש ינווט אליהם מכל דף נתון.
- המערכת מפעילה את המודל לכל מקטע JavaScript, וחוזה את המקטעים האחרים שסביר להניח שנצטרך בהמשך.
- היא מוסיפה לכל מקטע הוראות לשליפה מראש (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 יבצע שליפה מראש (prefetch) של הנתונים רק b.js, מפני שיש סבירות גבוהה שהוא נחוץ.
מידע נוסף
למידע נוסף על Guess.js, עיין במקורות המידע הבאים: