שתי דרכים לשליפה מראש (prefetch): תגי <link> וכותרות HTTP

דמיאן רנזולי
דמיאן רנזולי
X GitHub תקלה

ב-Codelab הזה תטמיע שליפה מראש (prefetch) בשתי דרכים: באמצעות <link rel="prefetch"> ועם הכותרת Link של HTTP.

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

מדידת ביצועים

קודם קובעים את רמת הביצועים הבסיסית:

  1. לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
  2. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  3. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.

  4. לוחצים על הכרטיסייה רשתות.

  5. ברשימה הנפתחת Throttling, בוחרים באפשרות Fast 3G כדי לדמות סוג של חיבור איטי.

  6. כדי לטעון את דף המוצר, לוחצים על לקנייה באפליקציה לדוגמה.

טעינת הדף של product-details.html נמשכת כ-600 אלפיות השנייה:

חלונית רשת שמציגה את זמני הטעינה של product-details.html

שליפה מראש (prefetch) של דף המוצר באמצעות <link rel="prefetch">

כדי לשפר את הניווט, כדאי להוסיף תג prefetch לדף הנחיתה כדי לבצע שליפה מראש (prefetch) של הדף product-details.html:

  • מוסיפים את האלמנט <link> הבא לראש הקובץ views/index.html:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

המאפיין as הוא אופציונלי, אבל מומלץ. הוא עוזר לדפדפן להגדיר את הכותרות הנכונות ולקבוע אם המשאב כבר קיים במטמון. ערכים לדוגמה של המאפיין הזה כוללים: document, script, style, font, image ואחרים.

כדי לוודא ששליפה מראש (prefetch) פועלת:

  1. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  2. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.

  3. לוחצים על הכרטיסייה רשתות.

  4. ברשימה הנפתחת Throttling, בוחרים באפשרות Fast 3G כדי לדמות סוג של חיבור איטי.

  5. מנקים את תיבת הסימון השבתת מטמון.

  6. טוענים מחדש את האפליקציה.

עכשיו, כשדף הנחיתה ייטען, הדף product-details.html ייטען גם הוא, אבל בעדיפות הנמוכה ביותר:

חלונית רשת שמציגה שליפה מראש (prefetch) של product-details.html.

הדף יישמר במטמון HTTP למשך חמש דקות, ולאחר מכן יחולו הכללים הרגילים של Cache-Control על המסמך. במקרה הזה, ל-product-details.html יש כותרת cache-control עם הערך public, max-age=0, כלומר הדף נשמר למשך חמש דקות סה"כ.

הערכה מחדש של הביצועים

  1. טוענים מחדש את האפליקציה.
  2. כדי לטעון את דף המוצר, לוחצים על לקנייה באפליקציה לדוגמה.

מעיינים בחלונית רשת. יש שני הבדלים בהשוואה למעקב הרשת הראשוני:

  • בעמודה גודל מוצג 'מטמון שליפה מראש (prefetch)', כלומר המשאב אוחזר מהמטמון של הדפדפן ולא מהרשת.
  • בעמודה זמן מצוין שזמן הטעינה של המסמך הוא כ-10 אלפיות השנייה.

זוהי ירידה של כ-98% בהשוואה לגרסה הקודמת, שארכה כ-600 אלפיות השנייה.

חלונית רשת שמציגה את product-details.html שאוחזר מהמטמון לשליפה מראש (prefetch).

קרדיט נוסף: השתמש ב-prefetch כשיפור הדרגתי

האפשרות הטובה ביותר לשליפה מראש (prefetch) מיושמת כשיפור הדרגתי עבור משתמשים שגולשים בחיבורים מהירים. ניתן להשתמש ב-Network Information API כדי לבדוק את תנאי הרשת, ועל סמך זה להחדיר באופן דינמי תגי שליפה מראש (prefetch). כך אפשר לצמצם את צריכת הנתונים ולחסוך בעלויות למשתמשים בתוכניות נתונים איטיות או יקרות.

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

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

אחרי זה צריך להוסיף את הקוד הבא ל-public/script.js כדי להצהיר על פונקציה שמחדירה באופן דינמי את התג prefetch כשהמשתמש נמצא בחיבור מהיר:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

הפונקציה פועלת באופן הבא:

  • היא בודקת את המאפיין effectiveType של Network Information API כדי לקבוע אם המשתמש מחובר לרשת 4G (או מהירה יותר).
  • אם התנאי מתקיים, המערכת יוצרת תג <link> עם סוג הרמז prefetch, מעבירה את כתובת ה-URL שתבוצע שליפה מראש (prefetch) במאפיין href ומציינת שהמשאב הוא HTML document במאפיין as.
  • לבסוף, הוא מוסיף את הסקריפט באופן דינמי ל-head של הדף.

בשלב הבא, מוסיפים את script.js אל views/index.html, ממש לפני תג </body> הסוגר:

<body>
      ...
      <script src="/script.js"></script>
</body>

שליחת בקשה ל-script.js בסוף הדף מבטיחה שהוא ייטען ויבוצע לאחר ניתוח וטעינה של הדף.

כדי לוודא שהשליפה מראש (prefetch) לא מפריעה למשאבים קריטיים של הדף הנוכחי, צריך להוסיף את קטע הקוד הבא כדי להפעיל את injectLinkPrefetchIn4g() באירוע window.load:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

דף הנחיתה מבצע שליפה מראש (prefetch) של product-details.html רק בחיבורים מהירים. כך מוודאים:

  1. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  2. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  3. לוחצים על הכרטיסייה רשתות.
  4. ברשימה הנפתחת Throttling, בוחרים באפשרות Online (אונליין).
  5. טוענים מחדש את האפליקציה.

בחלונית 'רשת' אמורה להופיע product-details.html:

חלונית רשת שמציגה שליפה מראש (prefetch) של product-details.html.

כדי לוודא שלא מתבצעת שליפה מראש (prefetch) של דף המוצר בחיבורים איטיים:

  1. ברשימה הנפתחת Throttling, בוחרים Slow 3G.
  2. טוענים מחדש את האפליקציה.

החלונית רשת צריכה לכלול רק את המשאבים לדף הנחיתה בלי product-details.html:

חלונית רשת שבה המוצר product-details.html לא עובר שליפה מראש (prefetch).

אחזר מראש את גיליון הסגנונות של דף המוצר עם הכותרת Link HTTP

ניתן להשתמש בכותרת ה-HTTP Link כדי לבצע שליפה מראש (prefetch) של משאבים מאותו סוג כמו התג link. ההחלטה מתי להשתמש באחד מהם תלויה בעיקר בהעדפה שלך, מכיוון שההבדל בביצועים אינו משמעותי. במקרה כזה, תוכלו להשתמש בה כדי לאחזר מראש את שירות ה-CSS הראשי של דף המוצר, כדי לשפר עוד יותר את הרינדור.

מוסיפים כותרת HTTP Link עבור style-product.css בתגובת השרת של דף הנחיתה:

  1. פותחים את הקובץ server.js ומחפשים את ה-handler של get() לכתובת ה-URL הבסיסית: /.
  2. מוסיפים את השורה הבאה בתחילת ה-handler:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  2. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  3. לוחצים על הכרטיסייה רשתות.
  4. טוענים מחדש את האפליקציה.

style-product.css מוגדרת עכשיו לשליפה מראש (prefetch) ברמה הנמוכה ביותר אחרי שדף הנחיתה נטען:

חלונית רשת שמציגה שליפה מראש (prefetch) של style-product.css.

כדי לעבור לדף המוצר, לוחצים על לקנייה. מעיינים בחלונית רשת:

חלונית רשת שמציגה את style-product.css שאוחזר מהמטמון של שליפה מראש (prefetch).

הקובץ style-product.css אוחזר מ'מטמון השליפה מראש' (prefetch) וטעינתו נמשכה 12 אלפיות שנייה בלבד.