ב-Codelab הזה, הביצועים של דף האינטרנט הבא ישופרו על ידי טעינה מראש ושליפה מראש של כמה משאבים:
מדידה
מומלץ למדוד קודם את ביצועי האתר לפני שמוסיפים אופטימיזציות.
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
מפעילים את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה (מידע נוסף זמין גם במאמר איך לגלות הזדמנויות לשיפור הביצועים באמצעות Lighthouse).
ב-Lighthouse מוצגת הבדיקה הבאה שנכשלה למשאב שמאוחזר מאוחר:
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
הקובץ main.css
לא אוחזר על ידי רכיב קישור (<link>
) שמוצב במסמך ה-HTML, אבל קובץ JavaScript נפרד, fetch-css.js
, מצרף את הרכיב Link ל-DOM אחרי האירוע window.onLoad
. המשמעות היא שהקובץ מאוחזר רק אחרי שהדפדפן מסיימים לנתח ולהפעיל את קובץ ה-JS. באופן דומה, גופן אינטרנט (K2D.woff2
) שצוין בתוך main.css
מאוחזר רק אחרי שההורדה של קובץ ה-CSS תסתיים.
שרשרת הבקשות הקריטית מייצגת את סדר המשאבים שהדפדפן מקבל עדיפות ומאחזר אותם. עבור דף האינטרנט הזה, הוא נראה כרגע כך:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
מכיוון שקובץ ה-CSS נמצא ברמה השלישית של שרשרת הבקשות, מערכת Lighthouse זיהתה אותו כמשאב שהתגלה לאחרונה.
טעינה מראש של משאבים קריטיים
הקובץ main.css
הוא נכס קריטי שנדרש מיד עם טעינת הדף. בקבצים חשובים כמו המשאב הזה שמאוחזרים מאוחר באפליקציה, כדאי להשתמש בתג קישור לטעינה מראש כדי לגרום לדפדפן להוריד אותו מוקדם יותר על ידי הוספת אלמנט קישור לראש המסמך.
הוסף תג טעינה מראש לאפליקציה זו:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
המאפיין as
משמש לזיהוי סוג המשאב שמאוחזר, ו-as="style"
משמש לטעינה מראש של קובצי גיליון סגנונות.
טוענים מחדש את האפליקציה ובודקים את החלונית Network בכלי הפיתוח.
שימו לב איך הדפדפן מאחזר את קובץ ה-CSS עוד לפני שהניתוח של ה-JavaScript שאחראי לאחזור הסתיים. בעזרת טעינה מראש, הדפדפן יודע לבצע אחזור מונעת של המשאב, בהנחה שהוא קריטי לדף האינטרנט.
אם לא משתמשים בה בצורה נכונה, טעינה מראש עלולה לפגוע בביצועים על ידי שליחת בקשות מיותרות למשאבים שלא נעשה בהם שימוש. באפליקציה הזו, details.css
הוא קובץ CSS נוסף שנמצא ברמה הבסיסית (root) של הפרויקט, אבל משמש ל-/details route
נפרד. כדי לראות דוגמה לאופן שבו אפשר להשתמש בטעינה מראש באופן שגוי, כדאי להוסיף גם רמז לטעינה מראש למשאב הזה.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
טוענים מחדש את האפליקציה ובודקים את החלונית רשת.
מוצגת בקשה לאחזר את details.css
על אף שדף האינטרנט לא משתמש בו.
כאשר הדף לא משתמש במשאב שנטען מראש, מוצגת אזהרה בחלונית המסוף תוך כמה שניות אחרי שהוא נטען.
האזהרה הזו יכולה לעזור לכם לזהות אם יש משאבים שנטענים מראש שלא נמצאים בשימוש מיידי בדף האינטרנט. עכשיו אפשר להסיר את הקישור המיותר לטעינה מראש של הדף.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
במאמר על MDN לגבי טעינה מראש תוכלו למצוא רשימה של כל סוגי המשאבים שאפשר לאחזר ואת הערכים הנכונים שבהם צריך להשתמש במאפיין as
.
שליפה מראש (prefetch) של משאבים עתידיים
שליפה מראש (prefetch) היא רמז נוסף לדפדפן, שיכול לשמש לשליחת בקשה לנכס שמשמש למסלול ניווט אחר, אבל בעדיפות נמוכה יותר מהנכסים החשובים האחרים שנדרשים לדף הנוכחי.
באתר הזה, לחיצה על התמונה מעבירה אתכם למסלול details/
נפרד.
קובץ CSS נפרד, details.css
, מכיל את כל הסגנונות הנדרשים לדף הפשוט הזה. כדי לאחזר מראש את המשאב הזה, צריך להוסיף רכיב קישור ל-index.html
.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
כדי להבין איך הפעולה הזו גורמת לשליחת בקשה לקובץ, פותחים את החלונית רשת בכלי הפיתוח ומבטלים את הסימון של האפשרות השבתה של המטמון.
טוענים מחדש את האפליקציה ושימו לב איך נשלחת בקשה בעדיפות נמוכה מאוד עבור details.css
, אחרי האחזור של כל הקבצים האחרים.
כשכלי הפיתוח פתוחים, לוחצים על התמונה באתר כדי לעבור לדף details
.
מכיוון שנעשה שימוש באלמנט קישור ב-details.html
לאחזור details.css
, נשלחת בקשה למשאב כמצופה.
יש ללחוץ על בקשת הרשת details.css
בכלי הפיתוח כדי להציג את הפרטים שלה. תוכלו לראות שהקובץ מאוחזר ממטמון הדיסק של הדפדפן.
השליפה מראש (prefetch) מאפשרת לנצל את הזמן ללא פעילות בדפדפן, כדי לבקש גישה למשאב שנדרש לדף אחר. כך הדפדפן יוכל לזרז את בקשות הניווט הבאות, כי הוא יאפשר לדפדפן לשמור את הנכס במטמון מוקדם יותר ולהציג אותו מהמטמון לפי הצורך.
טעינה מראש ושליפה מראש (prefetch) עם Webpack
במאמר הפחתת מטענים ייעודיים (payloads) של JavaScript באמצעות פיצול קוד מוסבר איך להשתמש בייבוא דינמי כדי לפצל חבילה למספר מקטעים. אפשר לראות את הדוגמה הזו באמצעות אפליקציה פשוטה שמייבאת מודול מ-Lodash באופן דינמי כששולחים טופס.
אפשר לגשת לתקלה באפליקציה הזו.
קטע הקוד הבא, שנמצא ב-src/index.js,
, אחראי לייבוא הדינמי של השיטה כשלוחצים על הלחצן.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
פיצול חבילה מקצר את זמני הטעינה של הדף על ידי הקטנת הגודל הראשוני שלה. גרסה 4.6.0 של Webpack כוללת תמיכה בטעינה מראש או בשליפה מראש של מקטעים שיובאו באופן דינמי. כדוגמה, אפשר לבצע שליפה מראש (prefetch) של השיטה lodash
כשדפדפן לא פעיל. כשמשתמש לוחץ על הלחצן, אין השהיה באחזור המשאב.
אפשר להשתמש בפרמטר התגובה הספציפי webpackPrefetch
בתוך ייבוא דינמי כדי לאחזר מראש מקטע מסוים.
כך זה ייראה עם האפליקציה הספציפית הזו.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
אחרי שהאפליקציה נטענת מחדש, Webpack מחדיר תג שליפה מראש (prefetch) של המשאב לראש המסמך. ניתן לראות זאת בחלונית Elements בכלי הפיתוח.
בהתאם לבקשות בחלונית Network, עולה גם שהמקטע הזה מאוחזר בעדיפות נמוכה, אחרי ששולחים את כל שאר המשאבים.
שליפה מראש (prefetch) יותר הגיונית במקרה הזה, אבל Webpack מספק תמיכה גם בטעינה מראש של מקטעים שמיובאים באופן דינמי.
import(/* webpackPreload: true */ 'module')
סיכום
בשיעור הזה תבינו איך טעינה מראש או שליפה מראש (prefetch) של נכסים מסוימים יכולות לשפר את חוויית המשתמש באתר. חשוב לציין שאין להשתמש בטכניקות האלה לכל משאב, ושימוש שגוי בהן עלול לפגוע בביצועים. ניתן להבחין בתוצאות הטובות ביותר על ידי טעינה מראש או שליפה מראש (prefetch) רק באופן סלקטיבי.
לסיכום:
- כדאי להשתמש בטעינה מראש למשאבים שמגלים מאוחר אבל הם חיוניים לדף הנוכחי.
- כדאי להשתמש בשליפה מראש (prefetch) של משאבים שדרושים למסלול ניווט עתידי או לפעולה עתידית.
לא כל הדפדפנים תומכים כרגע גם בטעינה מראש וגם בשליפה מראש. המשמעות היא שלא כל המשתמשים באפליקציה יבחינו בשיפור בביצועים.
במאמרים הבאים תוכלו למצוא מידע נוסף על היבטים ספציפיים של ההשפעה של טעינה מראש ושליפה מראש על דף האינטרנט: