במודולים האחרונים, גיליתם מושגים כמו דחיית הטעינה של JavaScript וטעינה מדורגת של תמונות ורכיבי <iframe>.
דחיית הטעינה של המשאבים מפחיתה את השימוש ברשת ובמעבד (CPU) במהלך טעינת הדף הראשונית, כי היא מורידה את המשאבים כשצריך אותם, במקום לטעון אותם מראש, כי הם עלולים לא להשתמש בהם.
הפעולה הזו יכולה לקצר את זמני הטעינה הראשוניים של הדף, אבל יכול להיות שהאינטראקציות הבאות יהיו עיכוב אם המשאבים הנחוצים להפעלתן לא נטענים כבר בזמן שהן מתרחשות.
לדוגמה, אם דף מסוים מכיל חלונית לבחירת תאריך בהתאמה אישית, אפשר לדחות את המשאבים של החלונית לבחירת תאריך עד שהמשתמש יבצע אינטראקציה עם הרכיב. עם זאת, טעינת המשאבים של החלונית לבחירת תאריך על פי דרישה עלולה לגרום לעיכוב (למשל, קל, אבל לא בהתאם לחיבור הרשת של המשתמש, ליכולות המכשיר או לשניהם), עד שהמשאבים יורדו, ינותחו ויהיו זמינים להפעלה.
זה איזון קצת מסובך – לא כדאי לבזבז את רוחב הפס וטוענים משאבים שעלולים להיות לא מנוצלים, אבל גם השהיה של האינטראקציות וטעינות הדפים הבאה אחריה לא אידיאלית. למרבה המזל, יש כמה כלים שבהם תוכלו להשתמש כדי לאזן טוב יותר בין שתי הפעולות הקיצוניות האלה – והמודול הזה עוסק בכמה שיטות שבעזרתן תוכלו, כמו שליפה מראש (prefetch) של משאבים, עיבוד מראש של דפים שלמים ואחסון מראש של משאבים באמצעות קובץ שירות (service worker).
שליפה מראש (prefetch) של משאבים הדרושים בעתיד הקרוב ובעדיפות נמוכה
ניתן לאחזר מראש משאבים – כולל תמונות, גיליונות סגנונות
ומשאבי JavaScript – באמצעות ההינט למשאב <link rel="prefetch">. ההינט
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 כשהוא לא פעיל. אפשר גם לבצע שליפה מראש (prefetch) של משאבים באופן דינמי, בזמן שהמשתמש יוצר אינטראקציה עם הדף ב-JavaScript.
prefetch נתמך בכל הדפדפנים המודרניים, למעט Safari – שם הוא זמין מאחורי סימון. אם אתם צריכים לטעון מראש משאבים לאתר שלכם באופן שפועל בכל הדפדפנים, וגם אם אתם משתמשים ב-Service Worker – קראו את הסעיף הבא במודול בנושא הכנה מראש של משאבים באמצעות קובץ שירות (service worker).
אחזר דפים מראש כדי לזרז ניווטים עתידיים
אפשר גם לשלוף מראש דף ואת כל משאבי המשנה שלו על ידי ציון המאפיין
as="document" כשמפנות למסמך HTML:
<link rel="prefetch" href="/page" as="document">
כשהדפדפן לא פעיל, יכול להיות שתתבצע בקשה בעדיפות נמוכה עבור /page.
בדפדפנים המבוססים על Chromium אפשר לבצע שליפה מראש (prefetch) של מסמכים באמצעות Speculation Rules API. כללי הספקולציות מוגדרים כאובייקט JSON שכלול ב-HTML של הדף או שמוסיפים אותם באופן דינמי באמצעות JavaScript:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
אובייקט JSON מתאר פעולה אחת או יותר, שכרגע תומכת רק ב-prefetch וב-prerender, ורשימה של כתובות URL שמשויכות לפעולה הזו. בקטע קוד ה-HTML הקודם, הדפדפן מורה לשליפה מראש (prefetch) של /page-a ו-/page-b. בדומה ל-<link rel="prefetch">, כללי הספקולציות הם רמז לכך שהדפדפן עשוי להתעלם ממנו בנסיבות מסוימות.
ספריות כמו Quicklink משפרות את הניווטים בדפים על ידי שליפה מראש (prefetch) באופן דינמי או עיבוד מראש של קישורים לדפים, ברגע שהם מופיעים באזור התצוגה של המשתמש. כך גוברת הסבירות שהמשתמש ינווט בסופו של דבר לדף הזה, בהשוואה לשליפה מראש (prefetch) של כל הקישורים שבדף.
עיבוד מראש של דפים
בנוסף לשליפה מראש (prefetch) של משאבים, אפשר גם לרמוז לדפדפן לעבד דף מראש לפני שהמשתמש עובר אליו. כך אפשר לטעון את הדף כמעט באופן מיידי, בזמן שהדף והמשאבים שלו מאוחזרים ומעובדים ברקע. לאחר שהמשתמש עובר לדף, הדף ממוקם בחזית.
העיבוד מראש נתמך דרך Speculation Rules API:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
הדגמות של שליפה מראש ועיבוד מראש
טעינה מראש של קובץ השירות (service worker)
אפשר גם לבצע שליפה מראש (prefetch) של משאבים באמצעות Service Worker.
שמירה מראש במטמון של קובץ השירות (service worker) יכולה לאחזר ולחסוך משאבים באמצעות ה-API של Cache, וכך מאפשרת לדפדפן להגיש את הבקשה באמצעות ה-API של Cache בלי לעבור לרשת. מראש במטמון של Service Worker יש אסטרטגיה יעילה מאוד לשמירה במטמון של Service Worker, שנקראת אסטרטגיית מטמון בלבד. הדפוס הזה יעיל מאוד, כי אחרי שמעבירים משאבים במטמון של Service Worker, הם מאוחזרים באופן כמעט מיידי לפי בקשה.
כדי לשמור מראש משאבים באמצעות Service Worker, אפשר להשתמש ב-Workbox. עם זאת, אם אתם מעדיפים, תוכלו לכתוב קוד משלכם כדי לשמור במטמון קבוצת קבצים שהוגדרה מראש. בכל פעם שמחליטים להשתמש ב-Service Worker כדי לשמור משאבים במטמון, חשוב לדעת ששמירה מראש מתבצעת כשמתקינים את Service 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 נשמרים מראש במטמון. ה-method precacheAndRoute שזמינה ב-workbox-precaching רושמת באופן אוטומטי את רכיבי ה-handler הנדרשים כדי להבטיח שהמשאבים שנשמרו מראש יאוחזרו מ-Service Worker API כשצריך.
מכיוון שיש תמיכה נרחבת ב-Service Workers, תוכלו להשתמש בהכנה מראש של קובצי שירות (service worker) בכל דפדפן מודרני שבו המצב דורש זאת.
בוחנים את הידע
מהי רמת העדיפות של הרמז prefetch?
מה ההבדל בין אחזור מראש לבין עיבוד מראש של דף?
המטמון של Service Worker זהה למטמון ה-HTTP.
השלב הבא: סקירה כללית על עובדי אינטרנט
עכשיו, כשאתם יודעים איך שליפה מראש (prefetch), עיבוד מראש וטעינה מראש של קובץ שירות (service worker) יכולים להועיל כשמדובר בזירוז הניווט לדפים בעתיד, אתם מוכנים לקבל החלטות מושכלות לגבי האופן שבו הם יכולים להועיל לאתר שלכם ולמשתמשים.
בשלב הבא מוצגת סקירה כללית של עובדי אינטרנט, והסבר איך הם יכולים לקטוע עבודה יקרה מה-thread הראשי ולתת ל-thread הראשי מרחב נשימה גדול יותר לאינטראקציות של המשתמשים. אם תהית פעם מה אפשר לעשות כדי לתת ל-thread הראשי יותר מרחב נשימה, אז שני המודולים הבאים שווים את הזמן!