כשדפדפן מנתח דף אינטרנט ומתחיל לגלות ולהוריד משאבים כמו תמונות, סקריפטים או CSS, המערכת מקצה להם אחזור priority כדי לאפשר הורדה שלהם בסדר אופטימלי. העדיפות של המשאב בדרך כלל תלויה במה שהוא ובמיקום שלו במסמך. לדוגמה, לתמונות בתצוגה עשויה להיות עדיפות High, והעדיפות ל-CSS שנטען בשלב מוקדם וחוסם רינדור באמצעות <link> ב-<head> עשויה להיות Very High. הקצאה אוטומטית של עדיפות בדרך כלל פועלת היטב, אבל יש תרחישים לדוגמה שבהם הסדר שהוקצו לא אופטימלי.
בדף הזה מתוארות ה-API של 'עדיפות באחזור' ו'מאפיין ה-HTML' fetchpriority, שבעזרתו אפשר לבצע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר ומאפשרים לכם לרמוז על העדיפות היחסית של משאב (high או low).
סיכום
כמה תחומים עיקריים שבהם 'עדיפות אחזור' יכולה לעזור:
- שיפור העדיפות של תמונת LCP על ידי ציון
fetchpriority="high"ברכיב התמונה, וכתוצאה מכך ה-LCP יתבצע מוקדם יותר. - הגדלת העדיפות של סקריפטים
async, תוך שימוש בסמנטיקה טובה יותר מהפריצה הנוכחית הנפוצה ביותר (הוספת<link rel="preload">לסקריפטasync). - הפחתת העדיפות של סקריפטים מאוחרים כדי ליצור רצף תמונות טוב יותר.
בעבר, למפתחים הייתה השפעה מוגבלת על עדיפות המשאבים באמצעות שימוש בטעינה מראש ובחיבור מראש. טעינה מראש מאפשרת לעדכן את הדפדפן לגבי משאבים קריטיים שאתם רוצים לטעון מוקדם יותר, לפני שהדפדפן יגלה אותם באופן טבעי. היא שימושית במיוחד למשאבים שקשה יותר לאתר, כמו גופנים שכלולים בגיליונות סגנונות, תמונות רקע או משאבים שנטענים מסקריפט. 'חיבור מראש' עוזר בחימום החיבורים לשרתים חוצי-מקורות, ויכול לשפר מדדים כמו זמן עד לבייט הראשון. כדאי לציין מקור, אבל לא בהכרח את כתובת ה-URL המדויקת של המשאב שנדרש.
התכונה 'עדיפות גבוהה' משלימה את הינטים למשאבים אלה.
זהו אות מבוסס-סימון שזמין דרך המאפיין fetchpriority, והמפתחים יכולים להשתמש בו כדי לציין את העדיפות היחסית של משאב מסוים.
אפשר גם להשתמש ברמזים האלה באמצעות JavaScript ו-Fetch API עם המאפיין priority כדי להשפיע על העדיפות של אחזורי המשאבים המבוצעים לנתונים. גם עדיפות האחזור יכולה להשלים טעינה מראש. מצלמים את התמונה מסוג Largest Contentful Paint (LCP) שגם כשטוענים אותה מראש, תקבל עדיפות נמוכה. אם הוא נדחה על ידי משאבים מוקדמים אחרים בעדיפות נמוכה, השימוש בתכונה 'עדיפות גבוהה' יכול לעזור לכם לדעת כמה זמן התמונה נטענת.
עדיפות המשאב
רצף ההורדה של המשאבים תלוי בעדיפות של הדפדפן לכל משאב בדף. אלה הגורמים שיכולים להשפיע על לוגיקת החישוב בעדיפות גבוהה:
- סוג המשאב, כמו CSS, גופנים, סקריפטים, תמונות ומשאבי צד שלישי.
- המיקום או הסדר שבהם יש התייחסות למשאבים.
- רמז למשאב
preload, שעוזר לדפדפן לגלות משאב מהר יותר ולטעון אותו מוקדם יותר. - שינויים בחישוב העדיפות של סקריפטים
asyncאוdefer.
הטבלה הבאה מראה איך Chrome קובע את סדר העדיפויות והרצף של רוב המשאבים:
| טעינה בשלב חסימת הפריסה | טעינה של פריט אחד בכל פעם בשלב חסימת הפריסה | ||||
|---|---|---|---|---|---|
| עדיפות הבהוב |
VeryHigh | גבוהה | בינונית | נמוכה | VeryLow |
| עדיפות כלי פיתוח |
הגבוה ביותר | גבוהה | בינונית | נמוכה | הנמוך ביותר |
| משאב עיקרי | |||||
| CSS (לפני הזמן**) | CSS (באיחור**) | CSS (אי-התאמה במדיה***) | |||
| סקריפט (לפני** או לא מסורק הטעינה מראש) | סקריפט (סוף**) | סקריפט (אסינכרוני) | |||
| גופן | גופן (rel=preload) | ||||
| ייבוא | |||||
| תמונה (באזור התצוגה) | תמונה (5 התמונות הראשונות > 10,000px2) | תמונה | |||
| מדיה (וידאו/אודיו) | |||||
| שליפה מראש (prefetch) | |||||
| XSL | |||||
| XHR (סנכרון) | XHR/fetch* (אסינכרוני) | ||||
הדפדפן מוריד משאבים עם אותה עדיפות מחושבת לפי סדר הגילוי שלהם. אפשר לבדוק את העדיפות שהוקצתה למשאבים שונים כשטוענים דף בכרטיסייה רשת בכלי הפיתוח ב-Chrome. (ודאו שכללתם את עמודת העדיפות על ידי לחיצה ימנית על כותרות הטבלה).
type = "font" בדף הפרטים של חדשות BBC
כשסדר העדיפויות משתנה, אפשר לראות גם את העדיפות הראשונית וגם את העדיפות הסופית בהגדרה Big request row (שורות של בקשה גדולה) או בהסבר קצר.
מתי כדאי להשתמש ב'עדיפות אחזור'?
עכשיו, אחרי שהבנתם את לוגיקת התעדוף של הדפדפן, תוכלו לשנות את סדר ההורדות של הדף כדי לבצע אופטימיזציה של הביצועים שלו ואת מדדי הליבה לבדיקת חוויית המשתמש באתר. הנה כמה דוגמאות לדברים שאפשר לשנות בלי להשתמש בעדיפות אחזור:
- מציבים תגי משאבים כמו
<script>ו-<link>לפי הסדר שבו רוצים שהדפדפן יוריד אותם. - השתמשו ברמז למשאב
preloadכדי להוריד את המשאבים הנחוצים בשלב מוקדם יותר, במיוחד משאבים שקשה לדפדפן לגלות. - משתמשים ב-
asyncאו ב-deferכדי להוריד סקריפטים בלי לחסום משאבים אחרים. - טעינה מדורגת של תוכן בחלק הנגלל כדי שהדפדפן יוכל להשתמש ברוחב הפס הזמין למשאבים קריטיים יותר בחלק העליון והקבוע.
ריכזנו כאן כמה מקרים מורכבים יותר שבהם התכונה 'עדיפות אחזור' יכולה לעזור לכם לקבל את סדר העדיפות הדרוש של המשאבים:
- יש לכם כמה תמונות בחלק העליון והקבוע, אבל לא לכולן צריכה להיות עדיפות זהה. לדוגמה, בקרוסלת תמונות, רק התמונה הראשונה שגלויה צריכה לקבל עדיפות גבוהה יותר.
- תמונות ראשיות באזור התצוגה מתחילות בדרך כלל בעדיפות
LowאוMedium. אחרי שהפריסה הושלמה, Chrome מגלה שהם נמצאים באזור התצוגה ומשפר את העדיפות שלהם. בדרך כלל יש עיכוב משמעותי בטעינת התמונות. ציון עדיפות האחזור בתגי העיצוב מאפשר לתמונה להתחיל בעדיפות 'גבוהה' ולהתחיל להיטען הרבה יותר מוקדם.
נדרשת טעינה מראש כדי לבצע גילוי מוקדם של תמונות LCP שכלולות כרקעים של CSS. כדי לשפר את העדיפות של תמונות הרקע, כדאי להוסיףfetchpriority='high'לטעינה מראש. - הצהרה על סקריפטים כ-
asyncאוdeferמורה לדפדפן לטעון אותם באופן אסינכרוני. עם זאת, כפי שמוצג בטבלת העדיפות, גם לסקריפטים האלה מוקצית עדיפות 'נמוכה'. כדאי להגדיל את העדיפות שלהן תוך הקפדה על הורדה אסינכרונית, במיוחד לסקריפטים שחיוניים לחוויית המשתמש. - אם אתם משתמשים ב-API של JavaScript
fetch()כדי לאחזר משאבים או נתונים באופן אסינכרוני, הדפדפן יקצה להם עדיפותHigh. כדאי שחלק מהאחזורים ירוצו בעדיפות נמוכה יותר, במיוחד אם אתם משלבים קריאות ל-API ברקע עם קריאות ל-API שמגיבות לקלט של משתמשים. מסמנים את הקריאות ל-API ברקע כעדיפותLowואת הקריאות האינטראקטיביות ל-API כעדיפותHigh. - הדפדפן מקצה ל-CSS וגופן
High" priority, אבל יכול להיות שחלק מהמשאבים האלה חשובים יותר מאחרים. אפשר להשתמש ב'עדיפות אחזור' כדי להפחית את העדיפות של משאבים לא קריטיים.
המאפיין fetchpriority
מאפיין ה-HTML fetchpriority מאפשר לציין את עדיפות ההורדה של סוגי משאבים, כמו CSS, גופנים, סקריפטים ותמונות כשמורידים אותם באמצעות התגים link, img או script. ניתן להזין בו את הערכים הבאים:
high: למשאב יש עדיפות גבוהה, וכדאי שהדפדפן יתעדף אותו כל עוד ההיוריסטיקה של הדפדפן לא מונעת את זה.low: המשאב הוא בעדיפות נמוכה, ואתם רוצים שהדפדפן יתעדף אותו אם ההיוריסטיקה שלו מאפשרת לו.auto: ערך ברירת המחדל, שמאפשר לדפדפן לבחור את העדיפות המתאימה.
הנה כמה דוגמאות לשימוש במאפיין fetchpriority בתגי עיצוב, וכן במאפיין priority ששווה לסקריפט.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
ההשפעות של עדיפות הדפדפן ושל fetchpriority
אפשר להחיל את המאפיין fetchpriority על משאבים שונים כפי שמוצג בטבלה הבאה, כדי להגדיל או להקטין את העדיפות המחושבת שלהם.
fetchpriority="auto" (◉) בכל שורה מציין את עדיפות ברירת המחדל של סוג המשאב הזה.
| טעינה בשלב חסימת הפריסה | טעינה של כל פריט בנפרד בשלב חסימת הפריסה | ||||
|---|---|---|---|---|---|
| עדיפות הבהוב |
VeryHigh | גבוהה | בינונית | נמוכה | VeryLow |
| עדיפות כלי פיתוח |
הגבוה ביותר | גבוהה | בינונית | נמוכה | הנמוך ביותר |
| משאב עיקרי | ◉ | ||||
| CSS (לפני הזמן**) | ⬆◉ | ⬇ | |||
| CSS (באיחור**) | ⬆ | ◉ | ⬇ | ||
| CSS (אי-התאמה במדיה***) | ⬆*** | ◉⬇ | |||
| סקריפט (לפני** או לא מסורק הטעינה מראש) | ⬆◉ | ⬇ | |||
| סקריפט (סוף**) | ⬆ | ◉ | ⬇ | ||
| סקריפט (אסינכרוני/דוחה) | ⬆ | ◉⬇ | |||
| גופן | ◉ | ||||
| גופן (rel=preload) | ⬆◉ | ⬇ | |||
| ייבוא | ◉ | ||||
| תמונה (באזור התצוגה – אחרי הפריסה) | ⬆◉ | ⬇ | |||
| תמונה (5 התמונות הראשונות > 10,000px2) | ⬆ | ◉ | ⬇ | ||
| תמונה | ⬆ | ◉⬇ | |||
| מדיה (וידאו/אודיו) | ◉ | ||||
| XHR (סנכרון) - הוצא משימוש | ◉ | ||||
| XHR/fetch* (אסינכרוני) | ⬆◉ | ⬇ | |||
| שליפה מראש (prefetch) | ◉ | ||||
| XSL | ◉ | ||||
fetchpriority מגדירה עדיפות יחסית, כלומר היא מעלה או מורידה את עדיפות ברירת המחדל בכמות מתאימה, במקום להגדיר במפורש את העדיפות ל-High או Low. לעיתים קרובות המצב הזה מקבל עדיפות High או Low, אבל לא תמיד. לדוגמה, CSS קריטי עם fetchpriority="high" שומר
על העדיפות VeryHigh/ "הגבוהה ביותר", ושימוש ב-fetchpriority="low" ברכיבים האלה שומר על העדיפות 'גבוהה'. אף אחד מהמקרים האלה לא כרוך בהגדרה מפורשת של העדיפות ל-High או ל-Low.
תרחישים לדוגמה
כדאי להשתמש במאפיין fetchpriority כשרוצים לתת לדפדפן רמז נוסף לגבי העדיפות שבה צריך לאחזר משאב.
הגדלת העדיפות של תמונת LCP
אפשר לציין fetchpriority="high" כדי לשפר את העדיפות של ה-LCP או של תמונות קריטיות אחרות.
<img src="lcp-image.jpg" fetchpriority="high">
ההשוואה הבאה מציגה את הדף 'Google חיפוש טיסות' עם תמונת רקע LCP שנטענה עם או בלי עדיפות אחזור. כשהעדיפות הוגדרה לגבוהה, ערך ה-LCP השתפר מ-2.6 שניות ל-1.9 שניות.
הורדת העדיפות של תמונות בחלק העליון והקבוע
אפשר להשתמש ב-fetchpriority="low" כדי להנמיך את העדיפות של תמונות בחלק העליון והקבוע שאינן חשובות באופן מיידי, למשל בקרוסלת תמונות.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
בניסוי קודם עם אפליקציית Oodle, השתמשנו בתכונה הזו כדי להוריד את העדיפות של תמונות שלא מופיעות בטעינה. היא הפחיתה את זמן הטעינה של דף ב-2 שניות.
הורדת העדיפות של משאבים שנטענו מראש
כדי למנוע ממשאבים שנטענו מראש להתחרות במשאבים קריטיים אחרים, אפשר להפחית את העדיפות שלהם. אפשר להשתמש בשיטה הזו עם תמונות, סקריפטים ו-CSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
תעדוף סקריפטים
סקריפטים הדף צריך להיות אינטראקטיבי כדי להיטען במהירות, אבל לא אמור
לחסום משאבים אחרים. אפשר לסמן את הפריטים האלה בתור async בעדיפות גבוהה.
<script src="async_but_important.js" async fetchpriority="high"></script>
לא ניתן לסמן סקריפט כ-async אם הוא מסתמך על מצבי DOM ספציפיים. עם זאת, אם הן יפעלו מאוחר יותר בדף, תוכלו לטעון אותן בעדיפות נמוכה יותר:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
הורדת העדיפות של אחזורים של נתונים לא קריטיים
הדפדפן יריץ את fetch עם עדיפות גבוהה. אם יש מספר אחזורים שעשויים לפעול בו-זמנית, אפשר להשתמש בעדיפות ברירת המחדל הגבוהה יותר לאחזור נתונים חשובים יותר, ולהקטין את העדיפות של נתונים פחות קריטיים.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
הערות לגבי הטמעה של אחזור עדיפות
הנה כמה דברים שכדאי לדעת בזמן השימוש ב'עדיפות אחזור':
- המאפיין
fetchpriorityהוא רמז, לא הוראה. הדפדפן מנסה לכבד את ההעדפות של המפתח, אבל יכול גם להחיל את ההעדפות שלו לגבי עדיפות המשאבים על מנת לפתור התנגשויות. אין לבלבל בין עדיפות אחזור לבין טעינה מראש:
- טעינה מראש היא אחזור חובה, לא רמז.
- הטעינה מראש מאפשרת לדפדפן לגלות משאב בשלב מוקדם, אבל הוא עדיין מאחזר את המשאב עם עדיפות ברירת המחדל. בינתיים, עדיפות האחזור לא עוזרת ברמת הגילוי, אבל מאפשרת להגדיל או להפחית את עדיפות האחזור.
- קל יותר לבחון ולמדוד את ההשפעות של טעינה מראש מאשר את ההשפעות של שינוי בעדיפות.
התכונה 'עדיפות אחזור' יכולה להשלים טעינות מראש על ידי הגדלת רמת הפירוט של העדיפות. אם כבר ציינתם טעינה מראש כאחד מהפריטים הראשונים ב-
<head>של תמונת LCP, ייתכן שעדיפות האחזור שלhighלא תשפר את ה-LCP באופן משמעותי. עם זאת, אם הטעינה מראש מתרחשת אחרי טעינה של משאבים אחרים, עדיפות אחזור שלhighיכולה לשפר את ה-LCP. אם תמונה קריטית היא תמונת רקע של CSS, צריך לטעון אותה מראש באמצעותfetchpriority = "high".שיפורים בזמן הטעינה כתוצאה מתעדוף הם רלוונטיים יותר בסביבות שבהן יותר משאבים מתחרים על רוחב הפס הזמין ברשת. המצב הזה נפוץ בחיבורי HTTP/1.x שבהם לא ניתן לבצע הורדות מקבילות, או בחיבורי HTTP/2 עם רוחב פס נמוך. במקרים כאלה, תעדוף יכול לעזור לפתור צווארי בקבוק.
רשתות CDN לא מטמיעות תעדוף של HTTP/2 באופן אחיד. גם אם הדפדפן מעביר את העדיפות מ'עדיפות אחזור', ייתכן ש-CDN לא תעדף משאבים בסדר שצוין. לכן קשה לבדוק את עדיפות האחזור. העדיפויות חלות גם באופן פנימי בתוך הדפדפן, וגם באמצעות פרוטוקולים שתומכים בתעדוף (HTTP/2 ו-HTTP/3). עדיין כדאי להשתמש ב'עדיפות אחזור' רק עבור תעדוף הדפדפן הפנימי ללא קשר לתמיכה ב-CDN או מקור, כי בדרך כלל סדר העדיפויות משתנה כשהדפדפן מבקש משאבים. לדוגמה, לעיתים קרובות המערכת מונעת בקשות למשאבים בעדיפות נמוכה, כמו תמונות, בזמן שהדפדפן מעבד פריטים קריטיים של
<head>.ייתכן שלא תוכלו להציג את 'עדיפות אחזור' כשיטה מומלצת בעיצוב הראשוני. בהמשך מחזור הפיתוח, ניתן לך להקצות את סדר העדיפויות למשאבים שונים בדף. אם הם לא תואמים לציפיות שלך, ניתן לך להוסיף את עדיפות האחזור כדי לבצע אופטימיזציה נוספת.
טיפים לשימוש בטעינות מראש
יש כמה דברים שחשוב לזכור כשמשתמשים בטעינות מראש:
- הכללת טעינה מראש בכותרות HTTP מציבה אותה לפני כל השאר בסדר הטעינה.
- באופן כללי, טעינות מראש נטענים לפי הסדר שבו המנתח מגיע אליהן עבור כל דבר שנמצא מעל העדיפות 'בינונית'. שימו לב אם כוללים טעינות מראש בתחילת ה-HTML.
- טעינות מראש של גופנים פועלות בצורה הטובה ביותר לקראת סוף הכותרת או תחילת הגוף.
- טעינות מראש של ייבוא (
import()דינמי אוmodulepreload) צריכות לרוץ אחרי תג הסקריפט שצריך לייבא, לכן חשוב לוודא קודם שהסקריפט נטען או מנתח, כדי שאפשר יהיה להעריך אותו בזמן טעינת יחסי התלות שלו. - לטעינות מראש של תמונות יש עדיפות 'נמוכה' או 'בינונית' כברירת מחדל. כדאי לסדר אותם ביחס לסקריפטים אסינכרוניים ולתגים אחרים בעדיפות נמוכה או נמוכה.
היסטוריה
התכונה 'עדיפות גבוהה' נבדקה לראשונה ב-Chrome כגרסת מקור לניסיון בשנת 2018, ולאחר מכן שוב בשנת 2021 באמצעות המאפיין importance. באותו זמן, הוא נקרא טיפים בעדיפות גבוהה. מאז הממשק השתנה ל-fetchpriority עבור HTML ול-priority עבור ממשק ה-API של JavaScript, כחלק מתהליך הסטנדרטים באינטרנט. כדי להפחית את הבלבול, אנחנו קוראים עכשיו
'עדיפות אחזור של API'.