ב-Codelab הזה תטמיע שליפה מראש (prefetch) בשתי דרכים: באמצעות <link rel="prefetch">
ועם הכותרת Link
של HTTP.
האפליקציה לדוגמה היא אתר שיש לו דף נחיתה של קידום מכירות עם הנחה מיוחדת על החולצה הנמכרת ביותר בחנות. מאחר שדף הנחיתה מקשר למוצר יחיד, אפשר להניח שאחוז גבוה מהמשתמשים יעברו לדף פרטי המוצר. לכן, דף המוצר מתאים לשליפה מראש (prefetch) בדף הנחיתה.
מדידת ביצועים
קודם קובעים את רמת הביצועים הבסיסית:
- לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
לוחצים על הכרטיסייה רשתות.
ברשימה הנפתחת Throttling, בוחרים באפשרות Fast 3G כדי לדמות סוג של חיבור איטי.
כדי לטעון את דף המוצר, לוחצים על לקנייה באפליקציה לדוגמה.
טעינת הדף של product-details.html
נמשכת כ-600 אלפיות השנייה:
שליפה מראש (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) פועלת:
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
לוחצים על הכרטיסייה רשתות.
ברשימה הנפתחת Throttling, בוחרים באפשרות Fast 3G כדי לדמות סוג של חיבור איטי.
מנקים את תיבת הסימון השבתת מטמון.
טוענים מחדש את האפליקציה.
עכשיו, כשדף הנחיתה ייטען, הדף product-details.html
ייטען גם הוא, אבל בעדיפות הנמוכה ביותר:
הדף יישמר במטמון HTTP למשך חמש דקות, ולאחר מכן יחולו הכללים הרגילים של Cache-Control
על המסמך. במקרה הזה, ל-product-details.html
יש כותרת cache-control
עם הערך public, max-age=0
, כלומר הדף נשמר למשך חמש דקות סה"כ.
הערכה מחדש של הביצועים
- טוענים מחדש את האפליקציה.
- כדי לטעון את דף המוצר, לוחצים על לקנייה באפליקציה לדוגמה.
מעיינים בחלונית רשת. יש שני הבדלים בהשוואה למעקב הרשת הראשוני:
- בעמודה גודל מוצג 'מטמון שליפה מראש (prefetch)', כלומר המשאב אוחזר מהמטמון של הדפדפן ולא מהרשת.
- בעמודה זמן מצוין שזמן הטעינה של המסמך הוא כ-10 אלפיות השנייה.
זוהי ירידה של כ-98% בהשוואה לגרסה הקודמת, שארכה כ-600 אלפיות השנייה.
קרדיט נוסף: השתמש ב-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
ומציינת שהמשאב הוא HTMLdocument
במאפיין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
רק בחיבורים מהירים. כך מוודאים:
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
- ברשימה הנפתחת Throttling, בוחרים באפשרות Online (אונליין).
- טוענים מחדש את האפליקציה.
בחלונית 'רשת' אמורה להופיע product-details.html
:
כדי לוודא שלא מתבצעת שליפה מראש (prefetch) של דף המוצר בחיבורים איטיים:
- ברשימה הנפתחת Throttling, בוחרים Slow 3G.
- טוענים מחדש את האפליקציה.
החלונית רשת צריכה לכלול רק את המשאבים לדף הנחיתה בלי product-details.html
:
אחזר מראש את גיליון הסגנונות של דף המוצר עם הכותרת Link
HTTP
ניתן להשתמש בכותרת ה-HTTP Link
כדי לבצע שליפה מראש (prefetch) של משאבים מאותו סוג כמו התג link
. ההחלטה מתי להשתמש באחד מהם תלויה בעיקר בהעדפה שלך, מכיוון שההבדל בביצועים אינו משמעותי. במקרה כזה, תוכלו להשתמש בה כדי לאחזר מראש את שירות ה-CSS הראשי של דף המוצר, כדי לשפר עוד יותר את הרינדור.
מוסיפים כותרת HTTP Link
עבור style-product.css
בתגובת השרת של דף הנחיתה:
- פותחים את הקובץ
server.js
ומחפשים את ה-handler שלget()
לכתובת ה-URL הבסיסית:/
. - מוסיפים את השורה הבאה בתחילת ה-handler:
app.get('/', function(request, response) {
response.set('Link', '</style-product.css>; rel=prefetch');
response.sendFile(__dirname + '/views/index.html');
});
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשתות.
- טוענים מחדש את האפליקציה.
style-product.css
מוגדרת עכשיו לשליפה מראש (prefetch) ברמה הנמוכה ביותר אחרי שדף הנחיתה נטען:
כדי לעבור לדף המוצר, לוחצים על לקנייה. מעיינים בחלונית רשת:
הקובץ style-product.css
אוחזר מ'מטמון השליפה מראש' (prefetch) וטעינתו נמשכה 12 אלפיות שנייה בלבד.