ה-API של עדיפות האחזור מציין את העדיפות היחסית של משאבים לדפדפן. היא יכולה לאפשר טעינה אופטימלית ולשפר את מדדי הליבה לבדיקת חוויית המשתמש באתר.
כשדפדפן מנתח דף אינטרנט ומתחיל לגלות ולהוריד משאבים כמו תמונות, סקריפטים או CSS, הוא מקצה לו אחזור priority בניסיון להוריד משאבים בסדר אופטימלי. סדר העדיפויות הזה תלוי בסוג המשאב ובמיקום שלו במסמך. למשל: לתמונות בתצוגה עשויה להיות עדיפות של High, ואילו העדיפות של CSS שנטען בשלב מוקדם דרך <link> ב<head> יכולה להיות Very High. דפדפנים די טובים בהקצאת עדיפויות שעובדות טוב, אבל יכול להיות שהם לא יהיו אופטימליים בכל המקרים.
במאמר הזה נדון ב-API של עדיפות אחזור ובמאפיין ה-HTML fetchpriority, שמאפשרים לך לרמוז על העדיפות היחסית של משאב (high או low). עדיפות אחזור יכולה לעזור באופטימיזציה של מדדי ליבה לבדיקת חוויית המשתמש באתר.
סיכום
כמה תחומים עיקריים שבהם 'עדיפות אחזור' יכולה לעזור:
- כדי לשפר את העדיפות של תמונת LCP, יש לציין את הערך
fetchpriority="high"ברכיב התמונה, וכך להפעיל את ה-LCP מוקדם יותר. - יש להגדיל את העדיפות של
asyncסקריפטים תוך שימוש בסמנטיקה טובה יותר מהפריצה הנוכחית שבה נעשה שימוש נפוץ (הוספת<link rel="preload">לסקריפטasync). - כדאי להפחית את העדיפות של סקריפטים מאוחרים כדי לשפר את הרצף של התמונות.
בעבר, למפתחים הייתה השפעה מסוימת, אבל מוגבלת, על עדיפות המשאבים באמצעות טעינה מראש וחיבור מראש. התכונה 'עדיפות אחזור' משלימה את הרמזים למשאבים אלה, אבל חשוב להבין היכן הם משתלבים. טעינה מראש מאפשרת לך להודיע לדפדפן לגבי משאבים קריטיים שברצונך לטעון בשלב מוקדם לפני שהם מתגלים באופן טבעי. הדבר שימושי במיוחד למשאבים שלא ניתן לגלות בקלות, כמו גופנים שכלולים בגיליון סגנונות, תמונות רקע או משאבים שנטענים מסקריפט. פעולת החיבור מראש עוזרת בחימום החיבורים לשרתים חוצי-מקורות ויכולה לשפר מדדים כמו Time-to-first-byte. היא שימושית אם אתם יודעים מה המקור, אבל לא בהכרח את כתובת ה-URL המדויקת של המשאב שנדרש.
עדיפות אחזור הוא אות מבוסס-תגי עיצוב (זמין דרך המאפיין fetchpriority) שמפתחים יכולים להשתמש בו כדי לציין את העדיפות היחסית של משאב מסוים. ניתן להשתמש ברמזים האלה גם באמצעות JavaScript ו-Fetch API עם המאפיין priority כדי להשפיע על העדיפות של אחזורי משאבים המבוצעים לנתונים. התכונה 'עדיפות אחזור' יכולה גם להשלים טעינה מראש. מצלמים תמונה מסוג Largest Contentful Paint (LCP) שעוברת טעינה מראש ועדיין מקבלת עדיפות נמוכה. אם היא נדחתת על ידי משאבים אחרים בעדיפות נמוכה בשלב מוקדם, השימוש ב'עדיפות אחזור' יכול לעזור לך לדעת כמה זמן התמונה נטענת.
התכונה 'עדיפות אחזור' זמינה ב-Chrome בגרסה 101 ואילך.
עדיפות המשאב
רצף ההורדות של המשאבים תלוי בעדיפות שהוגדרה על ידי הדפדפן לכל משאב בדף. גורמים שונים עשויים להשפיע על לוגיקת החישוב בעדיפות. לדוגמה,
- ל-CSS, גופנים, סקריפטים, תמונות ומשאבים של צד שלישי מוקצים עדיפויות שונות.
- גם המיקום או הסדר שבהם מפנים למשאבים במסמך משפיעים על עדיפות המשאבים.
- הרמז למשאב
preloadעוזר לדפדפן לגלות משאב מהר יותר ולכן לטעון אותו לפני שהמסמך טוען אותו ומשפיע על העדיפות. - שינויים בחישוב העדיפות של הסקריפטים
asyncאוdefer.
בטבלה הבאה נלקחים בחשבון גורמים כאלה, כדי להראות איך רוב המשאבים כרגע מקבלים עדיפות ומסודרים ב-Chrome.
| טעינה בשלב חסימת הפריסה | טעינה של פריט אחד בכל פעם בשלב חסימת הפריסה | ||||
|---|---|---|---|---|---|
| עדיפות הבהוב |
VeryHigh | גבוהה | אמצעי הגעה לאתר | נמוכה | VeryLow |
| עדיפות כלי פיתוח |
הגבוה ביותר | גבוהה | אמצעי הגעה לאתר | נמוכה | הנמוך ביותר |
| משאב עיקרי | |||||
| CSS (לפני הזמן**) | CSS (באיחור**) | CSS (אי-התאמה במדיה***) | |||
| סקריפט (לפני** או לא מסורק הטעינה מראש) | סקריפט (סוף**) | סקריפט (אסינכרוני) | |||
| גופן | גופן (rel=preload) | ||||
| ייבוא | |||||
| תמונה (באזור התצוגה) | תמונה (5 התמונות הראשונות > 10,000px2) | תמונה | |||
| מדיה | |||||
| מסמך SVG | |||||
| שליפה מראש (prefetch) | |||||
| XSL | |||||
| XHR (סנכרון) | XHR/fetch* (אסינכרוני) | ||||
הדפדפן מוריד משאבים עם אותה עדיפות מחושבת לפי סדר הגילוי שלהם. אתם יכולים לבדוק את העדיפות שהוקצתה למשאבים שונים כשטוענים דף בכרטיסייה רשת בכלי הפיתוח ב-Chrome. (ודאו שכללתם את עמודת העדיפות על ידי לחיצה ימנית על כותרות הטבלה).
type = "font" בדף הפרטים של חדשות BBC
כאשר סדר העדיפויות משתנה, אפשר להשתמש בהגדרה שורות בקשה גדולות כדי לראות גם את העדיפות הראשונית וגם את העדיפות הסופית. אותו הדבר מוצג בהסבר קצר ללא קשר להגדרה שורות בקשה גדולות.
מתי נדרשת עדיפות אחזור?
אם תכירו את לוגיקת התעדוף של הדפדפן, תוכלו לשנות את סדר ההורדות. ההרשאה שלך מאפשרת לך
- מציבים תגי משאבים כמו
<script>ו-<link>בהתאם לסדר שבו רוצים להוריד אותם. בדרך כלל, משאבים עם אותה עדיפות נטענים לפי הסדר שבו מתגלים אותם. - השתמש ברמז למשאב
preloadכדי להוריד את המשאבים הנחוצים מוקדם יותר, במיוחד עבור משאבים שהדפדפן לא יכול לגלות בקלות בשלב מוקדם. - יש להשתמש ב-
asyncאו ב-deferכדי להוריד סקריפטים בלי לחסום משאבים אחרים. - טעינה מדורגת של תוכן בחלק הנגלל כדי שהדפדפן יוכל להשתמש ברוחב הפס הזמין למשאבים קריטיים יותר בחלק העליון והקבוע.
הטכניקות האלה עוזרות לשלוט בחישוב העדיפות של הדפדפן, ובכך לשפר את הביצועים ואת מדדי הליבה לבדיקת חוויית המשתמש באתר. לדוגמה, כשתמונת רקע קריטית נטענת מראש, אפשר לגלות אותה הרבה יותר מוקדם ולשפר את ה-LCP (LCP).
לפעמים הכינויים האלה לא מספיקים כדי לתעדף משאבים באופן אופטימלי באפליקציה שלכם. הנה כמה תרחישים שבהם התכונה 'עדיפות אחזור' יכולה לעזור:
- יש לך כמה תמונות בחלק העליון והקבוע, אך לכולן לא צריכה להיות אותה עדיפות. לדוגמה, בקרוסלת תמונות, רק התמונה הראשונה שגלויה צריכה לקבל עדיפות גבוהה יותר בהשוואה לתמונה אחרת.
- תמונות ראשיות באזור התצוגה מתחילות בדרך כלל בעדיפות 'נמוכה' (לתשומת ליבכם: שינוי ב-Chrome 117 מגדיר את חמש התמונות הגדולות הראשונות לסטטוס 'בינוני', אבל הוא עשוי לכלול את התמונה הראשית (Hero) שלכם, או לא). אחרי שהפריסה הושלמה, Chrome מגלה שהם נמצאים באזור התצוגה ומשפר את העדיפות שלהם. בדרך כלל מצב זה גורם לעיכוב משמעותי בטעינת התמונה. ציון עדיפות האחזור בתגי עיצוב מאפשר לתמונה להתחיל בעדיפות 'גבוהה' ולהתחיל להיטען הרבה יותר מוקדם.
לתשומת ליבך: עדיין נדרשת טעינה מראש כדי לגלות תמונות LCP בשלב מוקדם כרקעים של CSS. אפשר לשלב את התכונה עם 'עדיפות אחזור' על ידי הכללתfetchpriority='high'בטעינה מראש. אחרת, היא עדיין תתחיל עם עדיפות 'נמוכה' או 'בינונית' עבור תמונות. - הצהרה על סקריפטים כ-
asyncאוdeferמורה לדפדפן לטעון אותם באופן אסינכרוני. עם זאת, כפי שניתן לראות בטבלה הקודמת, לסקריפטים האלה מוקצה גם עדיפות 'נמוכה'. מומלץ להעלות את העדיפות שלהם ולוודא הורדה אסינכרונית, בייחוד עבור סקריפטים שקריטיים לחוויית המשתמש. - אתם יכולים להשתמש ב-API של JavaScript
fetch()כדי לאחזר משאבים או נתונים באופן אסינכרוני. האחזור מקבל עדיפות 'גבוהה' על ידי הדפדפן. ייתכנו מצבים שבהם לא תרצו שכל האחזורים יבוצעו עם עדיפות 'גבוהה', ועדיף להשתמש במקום זאת בעדיפות אחזור שונה. זו אפשרות שימושית כשמריצים קריאות ל-API ברקע ומשלבים אותן עם קריאות ל-API שמגיבות לקלט של משתמשים, למשל באמצעות השלמה אוטומטית. ניתן לתייג את הקריאות ל-API ברקע כעדיפות 'נמוכה' ואת הקריאות האינטראקטיביות ל-API שמסומנות בעדיפות 'גבוהה'. - הדפדפן מקצה ל-CSS ולגופנים עדיפות 'גבוהה', אך ייתכן שכל המשאבים האלה לא יהיו חשובים באותה מידה או יידרשו עבור LCP. תוכלו להשתמש ב'עדיפות אחזור' כדי להוריד את העדיפות של חלק מהמשאבים האלה.
המאפיין fetchpriority
אפשר להגדיר עדיפות אחזור באמצעות מאפיין ה-HTML fetchpriority. אפשר להשתמש במאפיין עם התגים link, img ו-script. המאפיין מאפשר לציין את העדיפות של סוגי משאבים, כמו CSS, גופנים, סקריפטים ותמונות כשמורידים אותם באמצעות התגים הנתמכים.
המאפיין fetchpriority יכול לקבל אחד משלושה ערכים:
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" (◉) בכל שורה מציין את עדיפות ברירת המחדל של סוג המשאב הזה (זמין גם כמסמך Google Docs).
| טעינה בשלב חסימת הפריסה | טעינה של פריט אחד בכל פעם בשלב חסימת הפריסה | ||||
|---|---|---|---|---|---|
| עדיפות הבהוב |
VeryHigh | גבוהה | אמצעי הגעה לאתר | נמוכה | VeryLow |
| עדיפות כלי פיתוח |
הגבוה ביותר | גבוהה | אמצעי הגעה לאתר | נמוכה | הנמוך ביותר |
| משאב עיקרי | ◉ | ||||
| CSS (לפני הזמן**) | ⬆◉ | ⬇ | |||
| CSS (באיחור**) | ⬆ | ◉ | ⬇ | ||
| CSS (אי-התאמה במדיה***) | ⬆*** | ◉⬇ | |||
| סקריפט (לפני** או לא מסורק הטעינה מראש) | ⬆◉ | ⬇ | |||
| סקריפט (סוף**) | ⬆ | ◉ | ⬇ | ||
| סקריפט (אסינכרוני/דוחה) | ⬆ | ◉⬇ | |||
| גופן | ◉ | ||||
| גופן (rel=preload) | ⬆◉ | ⬇ | |||
| ייבוא | ◉ | ||||
| תמונה (באזור התצוגה – אחרי הפריסה) | ⬆◉ | ⬇ | |||
| תמונה (5 התמונות הראשונות > 10,000px2) | ⬆ | ◉ | ⬇ | ||
| תמונה | ⬆ | ◉⬇ | |||
| מדיה (וידאו/אודיו) | ⬆ | ◉⬇ | |||
| מסמך SVG | ⬆ | ◉⬇ | |||
| XHR (סנכרון) - הוצא משימוש | ◉ | ||||
| XHR/fetch* (אסינכרוני) | ⬆◉ | ⬇ | |||
| שליפה מראש (prefetch) | ◉ | ||||
| XSL | ◉ | ||||
שים לב ש-fetchpriority מגדיר את העדיפות היחסית - כלומר, הוא מעלה או מוריד את עדיפות ברירת המחדל בסכום מתאים, במקום להגדיר במפורש את העדיפות ל'גבוהה' או 'נמוכה', והדפדפן קובע את העדיפות היחסית. לעיתים קרובות הערך הוא 'גבוה' או 'נמוך', אבל לא תמיד. לדוגמה, קובצי CSS קריטיים עם fetchpriority="high" עדיין ישמרו על העדיפות 'גבוהה מאוד'/'הגבוהה ביותר', ושימוש ב-fetchpriority="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'">
תעדוף סקריפטים
סקריפטים שנדרשים כדי להפוך חלקים מסוימים בדף לאינטראקטיביים הם חיוניים, אבל אסור להם לחסום משאבים אחרים. אפשר לסמן אותם כאסינכרוניים עם עדיפות גבוהה.
<script src="async_but_important.js" async fetchpriority="high"></script>
לא ניתן לסמן סקריפטים כאסינכרוניים אם הם מסתמכים על מצבי 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לא תניב יתרונות משמעותיים. עם זאת, אם הטעינה מראש הייתה אחרי משאבים אחרים, עדיפות אחזור שלhighיכולה לשפר את ה-LCP. אם תמונה קריטית היא תמונת רקע של CSS, צריך לטעון אותה מראש באמצעותfetchpriority = "high".הרווחים הבולטים שנובעים מתעדוף יהיו רלוונטיים יותר בסביבות שבהן רוחב הפס הזמין ברשת גבוה יותר במשאבים. מצב זה נפוץ בחיבורי HTTP/1.x שבהם לא ניתן לבצע הורדות במקביל או בחיבורי HTTP/2 בעלי רוחב פס נמוך. תעדוף יכול לפתור צוואר בקבוק בתנאים האלה.
ל-CDN אין תעדוף של HTTP/2 באופן אחיד. גם אם הדפדפן מעביר את העדיפות המוצעת לשימוש ב'עדיפות אחזור', ייתכן ש-CDN לא תעדף משאבים לפי הסדר הנדרש. מצב זה מקשה על הבדיקה של עדיפות האחזור. העדיפויות חלות גם באופן פנימי בתוך הדפדפן וגם באמצעות פרוטוקולים שתומכים בתעדוף (HTTP/2 ו-HTTP/3). עדיין כדאי להשתמש בתעדוף של הדפדפן הפנימי בלבד, ללא קשר לתמיכה של CDN או מקור, כי בדרך כלל יש שינוי במקרים שבהם הדפדפן מבקש משאבים – לדוגמה, בקשות של משאבים בעדיפות נמוכה כמו תמונות בדרך כלל לא מוצגות בזמן שהדפדפן מעבד את הפריטים הקריטיים של
<head>.ייתכן שלא ניתן יהיה להציג את 'עדיפות אחזור' כשיטה מומלצת בעיצוב הראשוני. זו אופטימיזציה שתוכלו להחיל מאוחר יותר במחזור הפיתוח. אפשר לבדוק את העדיפויות שהוקצו למשאבים שונים בדף. אם הן לא תואמות לציפיות שלכם, תוכלו להוסיף את התכונה 'עדיפות אחזור' כדי לבצע אופטימיזציה נוספת.
שימוש בטעינה מראש אחרי Chrome 95
התכונה 'עדיפות אחזור' הייתה זמינה לתקופת ניסיון בגרסאות 73 עד 76 של Chrome, אך לא פורסמה עקב בעיות בתעדוף של טעינות מראש שתוקנו ב-Chrome 95. לפני Chrome 95, בקשות שהונפקו דרך <link rel=preload> תמיד מתחילות לפני בקשות אחרות שסורק הטעינה מראש רואה, גם אם לבקשות האחרות יש עדיפות גבוהה יותר.
בעקבות התיקון ב-Chrome 95 והשיפור בתכונה 'עדיפות אחזור', אנחנו מקווים שמפתחים יתחילו להשתמש בטעינה מראש למטרה המכוונת שלה – כדי לטעון מראש משאבים שלא זוהו על ידי המנתח (גופנים, ייבוא, תמונות LCP ברקע). מיקום הרמז preload ישפיע על זמן הטעינה מראש של המשאב. כמה נקודות עיקריות לגבי השימוש בטעינה מראש הן:
- הכללת הטעינה מראש בכותרות HTTP תגרום לה לקפוץ לפני כל השאר.
- בדרך כלל, טעינות מראש ייטענו לפי הסדר שבו המנתח מקבל אותן עבור כל דבר שהעדיפות שלו גבוהה מ "בינונית". לכן, חשוב להיזהר אם כוללים טעינות מראש בתחילת ה-HTML.
- טעינות מראש של גופנים יפעלו ככל הנראה לקראת סוף הכותרת או תחילת הגוף.
- ייבוא טעינות מראש (
import()דינמי אוmodulepreload) צריך להתבצע אחרי תג הסקריפט שמחייב את הייבוא (כך שהסקריפט עצמו ייטען או ינותח קודם). בעיקרון, אם תג הסקריפט טוען סקריפט שיגרום לטעינת יחסי התלות, צריך לוודא שה-<link rel=preload>של יחסי התלות מופיע אחרי תג הסקריפט הראשי, אחרת יחסי התלות ייטענו לפני הסקריפט הראשי. בסדר הנכון, ניתן לנתח או להעריך את הסקריפט הראשי בזמן טעינת יחסי התלות. - לטעינות מראש של תמונות יש עדיפות 'נמוכה' או 'בינונית' (ללא עדיפות אחזור) והסדר שלהן צריך להיות יחסי לסקריפטים אסינכרוניים ולתגים אחרים בעדיפות נמוכה או נמוכה.
היסטוריה
התכונה 'עדיפות אחזור' נבדקה לראשונה ב-Chrome כגרסת מקור לניסיון בשנת 2018, ולאחר מכן שוב בשנת 2021 באמצעות המאפיין importance. באותו זמן, הוא היה נקרא רמזים בעדיפות גבוהה. מאז הממשק השתנה ל-fetchpriority עבור HTML ול-priority עבור ממשק ה-API לאחזור של JavaScript כחלק מתהליך הסטנדרטים באינטרנט. כדי להפחית את הבלבול, אנחנו מתייחסים עכשיו ל-API הזה בתור 'עדיפות אחזור'.
סיכום
סביר להניח שמפתחים יתעניינו ב'עדיפות הבאה', עם התיקונים בהתנהגות הטעינה מראש ובהתמקדות האחרונה במדדי הליבה לבדיקת חוויית המשתמש באתר וב-LCP. עכשיו יש להם לחצן זמין נוסף שמאפשר להם להגיע לרצף הטעינה הרצוי.