שליפה מראש (prefetch), עיבוד מראש והגדרה מראש של קובץ שירות (service worker)

בשני המודולים האחרונים גיליתם מושגים כגון דחיית טעינת JavaScript וטעינה מדורגת של תמונות ורכיבי <iframe>. דחייה של טעינת המשאבים מפחיתה את השימוש ברשת ובמעבד (CPU) במהלך הבדיקה של טעינת דף על ידי הורדת משאבים בנקודה שבה הם נחוצים, במקום לטעון אותם מראש, שם הם עלולים לא להיות בשימוש. הפעולה הזו יכולה לקצר את זמני הטעינה הראשונית של הדף, אבל אינטראקציות נוספות עלולות לגרום עיכוב אם המשאבים הדרושים להפעלתם לא נטענים כבר באותו זמן שהן מתרחשות.

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

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

שליפה מראש של משאבים שנחוצים בעתיד הקרוב בעדיפות נמוכה

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

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

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

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

קטע ה-HTML הקודם מודיע לדפדפן שהוא יכול לאחזר מראש date-picker.js וגם date-picker.css ברגע שהמכשיר לא פעיל. אפשר גם אחזור מראש של משאבים באופן דינמי בזמן שהמשתמש יוצר אינטראקציה עם הדף JavaScript.

prefetch נתמך בכל הדפדפנים המתקדמים מלבד Safari, שם הוא נתמך זמין מאחורי דגל. אם יש לכם צורך בטעינה מראש משאבים לאתר שלכם באופן שפועל בכל הדפדפנים — ואתם משתמשים קובץ שירות (service worker) – וכאן אפשר לקרוא את הקטע מאוחר יותר במודול הזה לגבי שמירה מראש במטמון באמצעות Service Worker.

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

ניתן גם לאחזר מראש דף ואת כל משאבי המשנה שלו על ידי ציון המאפיין as="document" כשמצביעים על מסמך HTML:

<link rel="prefetch" href="/page" as="document">

כשהדפדפן לא פעיל, יכול להיות שהוא ישלח בקשה בעדיפות נמוכה עבור /page.

בדפדפנים המבוססים על Chromium, ניתן לאחזר מראש מסמכים באמצעות Speculation Rules API: כללי הספקולציות מוגדרים כאובייקט JSON נכללות ב-HTML של הדף, או נוספו באופן דינמי באמצעות JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

אובייקט ה-JSON מתאר פעולה אחת או יותר – כרגע תומך רק prefetch ו-prerender – ורשימה של כתובות URL שמשויכות לפעולה הזו. לחשבון קטע ה-HTML הקודם מכיל הוראה לדפדפן לבצע שליפה מראש של /page-a ו-/page-b. בדומה ל-<link rel="prefetch">, כללי הטעינות הם לרמוז שהדפדפן עשוי להתעלם בנסיבות מסוימות.

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

עיבוד מראש של דפים

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

העיבוד מראש נתמך באמצעות Speculation Rules API:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>

הדגמות של שליפה מראש ועיבוד מראש

שמירה במטמון של Service Worker

יש גם אפשרות לבצע אחזור מראש של משאבים באופן ספקולטיבי באמצעות service worker. שמירה מראש במטמון של Service Worker יכולה לאחזר ולשמור משאבים באמצעות ה-API של Cache, לאפשר לדפדפן למלא את הבקשה באמצעות ה-API של Cache בלי לעבור הרשת. הפעלה מראש של קובץ שירות (service worker) משתמשת ב-service worker יעיל מאוד אסטרטגיית שמירה במטמון, שנקראת אסטרטגיית שמירה במטמון בלבד. הדפוס הזה מאוד יעילה כי ברגע שהמשאבים נמצאים במטמון של Service Worker, מאוחזרים באופן כמעט מיידי לפי בקשה.

מציג את זרימת השמירה במטמון של Service Worker מהדף, ל-Service Worker ולמטמון.
אסטרטגיית התכונה 'מטמון בלבד' מאחזרת תמיד רק משאבים כשירים במהלך ההתקנה של Service Worker. לאחר ההתקנה, המטמון משאבים מאוחזרים רק מהמטמון של Service Worker.

כדי לשמור משאבים מראש במטמון באמצעות Service Worker, אפשר להשתמש ב-Workbox. אם עם זאת, אתם יכולים לכתוב קוד משלכם כדי לשמור במטמון קבוצה שנקבעה מראש של . בכל מקרה אתם מחליטים להשתמש ב-Service Worker כדי לשמור מראש למשאבים, חשוב לדעת שההפעלה מראש מתבצעת כאשר השירות worker מותקן. לאחר ההתקנה, המשאבים השמורים מראש זמין לאחזור בכל דף ששולטים ב-Service Worker באתר שלכם.

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

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

הקוד הקודם הוא מניפסט לדוגמה שכולל שני קבצים: script.ffaa4455.js וגם /index.html אם משאב מכיל גרסה מידע בקובץ עצמו (שנקרא גיבוב של קובץ), ואז revision אפשר להשאיר את השדה 'null', כי לקובץ כבר יש גרסאות (לדוגמה, ffaa4455 עבור המשאב script.ffaa4455.js בקוד הקודם). עבור למשאבים שאין להם גרסאות, ניתן ליצור עבורם גרסה בזמן ה-build.

לאחר ההגדרה, אפשר להשתמש ב-Service Worker כדי לשמור מראש דפים סטטיים או את כדי לזרז את הניווטים הבאים בדפים.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

לדוגמה, בדף של כרטיס מוצר למסחר אלקטרוני, אפשר להשתמש ב-service worker. כדי לשמור מראש את ה-CSS ואת ה-JavaScript שנדרשים לעיבוד דף פרטי המוצר, כך שהניווט אל דף פרטי המוצר יהיה מהיר הרבה יותר. ב הדוגמה הקודמת, product-page.ac29.css ו-product-page.39a1.js הם שנשמרה מראש. השיטה precacheAndRoute שזמינה בworkbox-precaching רושם באופן אוטומטי את ה-handlers שנדרשים כדי לוודא שהמשאבים שנשמרו מראש במטמון מאוחזרים מ-Service Worker API כשיש צורך.

בקובצי שירות יש תמיכה רחבה, אפשר להשתמש ב-Service Worker מראש בכל דפדפן מודרני שהמצב דורש זאת.

בוחנים את הידע

באיזו עדיפות מופיע הרמז לprefetch?

גבוה.
אפשר לנסות שוב.
בינוני.
אפשר לנסות שוב.
נמוכה.
תשובה נכונה!

מה ההבדל בין שליפה מראש (prefetch) לבין לעבד דף מראש?

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

המטמון של Service Worker ומטמון ה-HTTP זהים.

נכון
אפשר לנסות שוב.
לא נכון
תשובה נכונה!

השלב הבא: סקירה כללית של עובדי אינטרנט

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

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