ה-API של עדיפות האחזור מציין את העדיפות היחסית של משאבים לדפדפן. היא יכולה לאפשר טעינה אופטימלית ולשפר את מדדי הליבה לבדיקת חוויית המשתמש באתר.
כשדפדפן מנתח דף אינטרנט ומתחיל לגלות ולהוריד משאבים כמו תמונות, סקריפטים או CSS, הוא מקצה לו אחזור priority
כדי שיוכל להוריד אותם בסדר אופטימלי. בדרך כלל, סדר העדיפות של משאב תלוי במה שהוא ובמיקום שלו במסמך. למשל, לתמונות בתצוגה עשויה להיות עדיפות של High
, והעדיפות ל-CSS שנטען בשלב מוקדם וחוסם רינדור באמצעות <link>
ב-<head>
עשויה להיות Very High
. דפדפנים די טובים בהקצאת עדיפויות שעובדות טוב, אבל יכול להיות שהם לא יהיו אופטימליים בכל המקרים.
בדף הזה מתוארות ה-API של 'עדיפות באחזור' ומאפיין ה-HTML fetchpriority
, שמאפשר לכם לרמוז על העדיפות היחסית של משאב (high
או low
). התכונה 'עדיפות' יכולה לעזור באופטימיזציה של מדדי ליבה לבדיקת חוויית המשתמש באתר.
סיכום
כמה תחומים עיקריים שבהם 'עדיפות אחזור' יכולה לעזור:
- הגברת העדיפות של תמונת LCP על ידי ציון הערך
fetchpriority="high"
ברכיב התמונה, וכתוצאה מכך ה-LCP יתבצע מוקדם יותר. - העלאת העדיפות של
async
סקריפטים, תוך שימוש בסמנטיקה טובה יותר מהפריצה הנוכחית הנפוצה ביותר (הוספת<link rel="preload">
לסקריפט שלasync
). - הפחתת העדיפות של סקריפטים מאוחרים כדי לאפשר סידור טוב יותר עם תמונות.
![תצוגה של רצועת תמונות שמשווה בין שתי בדיקות בדף הבית של 'Google חיפוש טיסות'. בחלק התחתון של המסך, התכונה 'עדיפות אחזור' משמשת להגברת העדיפות של התמונה הראשית, וכתוצאה מכך יש ירידה של 0.7 שניות ב-LCP.](https://web.dev/static/articles/fetch-priority/image/a-filmstrip-view-comparin-298b8fe7eedbb.png?authuser=5&hl=he)
בעבר, למפתחים הייתה השפעה מוגבלת על עדיפות המשאבים באמצעות טעינה מראש וחיבור מראש. טעינה מראש מאפשרת לך ליידע את הדפדפן לגבי משאבים קריטיים שברצונך לטעון בשלב מוקדם לפני שהדפדפן יגלה אותם באופן טבעי. התכונה הזו שימושית במיוחד למשאבים שקשה יותר לאתר, כמו גופנים שכלולים בגיליון סגנונות, תמונות רקע או משאבים שנטענים מסקריפט. 'חיבור מראש' עוזר בחימום החיבורים לשרתים בין מקורות ויכול לשפר מדדים כמו הזמן עד לבייט הראשון. המאפיין הזה שימושי כאשר יודעים מה המקור, אבל לא בהכרח את כתובת ה-URL המדויקת של המשאב שנדרש.
התכונה 'עדיפות גבוהה' משלימה את הינטים למשאבים אלה. זהו אות מבוסס-סימון שזמין דרך המאפיין fetchpriority
, והמפתחים יכולים להשתמש בו כדי לציין את העדיפות היחסית של משאב מסוים. אפשר להשתמש ברמזים האלה גם באמצעות JavaScript ו-Fetch API עם המאפיין priority
כדי להשפיע על העדיפות של אחזורי משאבים שנוצרים עבור נתונים. התכונה 'עדיפות אחזור' יכולה גם להשלים טעינה מראש. מצלמים תמונה מסוג Largest Contentful Paint (LCP) שעוברת טעינה מראש ועדיין מקבלת עדיפות נמוכה. אם היא נדחתת על ידי משאבים אחרים בעדיפות נמוכה בשלב מוקדם, השימוש ב'עדיפות אחזור' יכול לעזור לך לדעת כמה זמן התמונה נטענת.
עדיפות המשאב
רצף ההורדה של המשאבים תלוי בעדיפות של הדפדפן לכל משאב בדף. אלה הגורמים שיכולים להשפיע על לוגיקת החישוב בעדיפות גבוהה:
- סוג המשאב, כגון CSS, גופנים, סקריפטים, תמונות ומשאבים של צד שלישי.
- המיקום או הסדר שבהם יש התייחסות למשאבים.
- האם נעשה שימוש במאפיינים
async
אוdefer
בסקריפטים.
הטבלה הבאה מראה איך Chrome קובע את סדר העדיפויות והרצף של רוב המשאבים:
טעינה בשלב חסימת הפריסה | טעינה של פריט אחד בכל פעם בשלב חסימת הפריסה | ||||
---|---|---|---|---|---|
עדיפות הבהוב |
VeryHigh | גבוהה | בינונית | נמוכה | VeryLow |
עדיפות כלי פיתוח |
הגבוה ביותר | גבוהה | בינונית | נמוכה | הנמוך ביותר |
משאב עיקרי | |||||
CSS (לפני הזמן**) | CSS (באיחור**) | CSS (אי-התאמה במדיה***) | |||
סקריפט (לפני** או לא מסורק הטעינה מראש) | סקריפט (סוף**) | סקריפט (אסינכרוני) | |||
גופן | גופן (rel=preload) | ||||
ייבוא | |||||
תמונה (באזור התצוגה) | תמונה (5 התמונות הראשונות > 10,000px2) | תמונה | |||
מדיה (וידאו/אודיו) | |||||
שליפה מראש (prefetch) | |||||
XSL | |||||
XHR (סנכרון) | XHR/fetch* (אסינכרוני) |
הדפדפן מוריד משאבים עם אותה עדיפות מחושבת לפי סדר הגילוי שלהם. אתם יכולים לבדוק את העדיפות שהוקצתה למשאבים שונים כשטוענים דף בכרטיסייה רשת בכלי הפיתוח ב-Chrome. (חשוב לכלול את העמודה עדיפות על ידי לחיצה ימנית על כותרות הטבלה וסימון האפשרות הזו).
![הכרטיסייה 'רשת' בכלי הפיתוח של Chrome שבה מופיעים כמה מקורות מידע לגבי גופנים. כולם נמצאים בעדיפות העליונה.](https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd.png?authuser=5&hl=he)
type = "font"
בדף הפרטים של חדשות BBC![הכרטיסייה 'רשת' בכלי הפיתוח של Chrome שבה מופיעים כמה מקורות מידע לגבי גופנים. העדיפות שלהן היא שילוב של עדיפות 'נמוכה' ו'גבוהה'.](https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4.png?authuser=5&hl=he)
type = "script"
בדף הפרטים של חדשות BBC.כשסדר העדיפויות משתנה, אפשר לראות גם את העדיפות הראשונית וגם את העדיפות הסופית בהגדרה שורות בקשה של נפח גדול או בהסבר קצר.
![הכרטיסייה 'רשת' בכלי הפיתוח של Chrome. ההגדרה 'שורות בקשה גדולות' מסומנת, ובעמודה 'עדיפות' מוצגת התמונה הראשונה עם עדיפות 'גבוהה' ומתחתיה עדיפות ראשונית אחרת 'בינונית'. אותו דבר מוצג בהסבר הקצר.](https://web.dev/static/articles/fetch-priority/image/initial-final-priority.png?authuser=5&hl=he)
מתי כדאי להשתמש ב'עדיפות אחזור'?
עכשיו, אחרי שהבנתם את לוגיקת התעדוף של הדפדפן, אפשר לשנות את סדר ההורדות של הדף כדי לשפר את הביצועים שלו ואת מדדי הליבה לבדיקת חוויית המשתמש באתר. הנה כמה דוגמאות לדברים שאפשר לשנות כדי להשפיע על העדיפות של הורדות משאבים:
- יש למקם תגי משאבים כמו
<script>
ו-<link>
לפי הסדר שבו ברצונך שהדפדפן יוריד אותם. בדרך כלל, משאבים עם אותה עדיפות נטענים לפי הסדר שבו מתגלים אותם. - השתמש ברמז למשאב
preload
כדי להוריד את המשאבים הנחוצים מוקדם יותר, במיוחד עבור משאבים שהדפדפן לא יכול לגלות בקלות בשלב מוקדם. - יש להשתמש ב-
async
או ב-defer
כדי להוריד סקריפטים בלי לחסום משאבים אחרים. - טעינה מדורגת של תוכן בחלק הנגלל כדי שהדפדפן יוכל להשתמש ברוחב הפס הזמין למשאבים קריטיים יותר בחלק העליון והקבוע.
הטכניקות האלה עוזרות לשלוט בחישוב העדיפות של הדפדפן, ובכך לשפר את הביצועים ואת מדדי הליבה לבדיקת חוויית המשתמש באתר. לדוגמה, כשתמונת רקע קריטית נטענת מראש, אפשר לגלות אותה הרבה יותר מוקדם ולשפר את ה-LCP (LCP).
לפעמים הכינויים האלה לא מספיקים כדי לתעדף משאבים באופן אופטימלי באפליקציה שלכם. הנה כמה תרחישים שבהם התכונה 'עדיפות אחזור' יכולה לעזור:
- יש לך כמה תמונות בחלק העליון והקבוע, אבל לא לכולן צריכה להיות עדיפות זהה. לדוגמה, בקרוסלת תמונות, רק התמונה הראשונה גלויה צריכה לקבל עדיפות גבוהה יותר, ואת האחרות, בדרך כלל מחוץ למסך ניתן להגדיר בעדיפות נמוכה יותר.
- תמונות בתוך אזור התצוגה מתחילות בדרך כלל בעדיפות של
Low
. אחרי שהפריסה הושלמה, Chrome מגלה שהם נמצאים באזור התצוגה ומשפר את העדיפות שלהם. בדרך כלל הפעולה הזו גורמת לעיכוב משמעותי בטעינת התמונות הקריטיות, כמו תמונות של גיבורים. ציון עדיפות האחזור בתגי העיצוב מאפשר לתמונה להתחיל בעדיפותHigh
ולהתחיל להיטען הרבה יותר מוקדם. בניסיון להפוך את זה לאוטומטי במידה מסוימת, חמש התמונות הראשונות הגדולות יותר הוגדרו בעדיפותMedium
על ידי Chrome, וזה יעזור, אבלfetchpriority="high"
מפורש שלfetchpriority="high"
יהיה עוד יותר טוב.
נדרשת טעינה מראש כדי לבצע גילוי מוקדם של תמונות LCP שכלולות כרקעים ב-CSS. כדי לשפר את העדיפות של תמונות הרקע, כדאי לכלולfetchpriority='high'
בטעינה מראש. - הצהרה על סקריפטים כ-
async
אוdefer
מורה לדפדפן לטעון אותם באופן אסינכרוני. עם זאת, כפי שמוצג בטבלת העדיפות, גם לסקריפטים האלה מוקצית עדיפות 'נמוכה'. מומלץ להגדיל את העדיפות שלהם תוך הקפדה על הורדה אסינכרונית, במיוחד עבור סקריפטים שחיוניים לחוויית המשתמש. - אם אתם משתמשים ב-API של JavaScript
fetch()
כדי לאחזר משאבים או נתונים באופן אסינכרוני, הדפדפן יקצה להם עדיפותHigh
. כדאי שחלק מהאחזורים ירוצו בעדיפות נמוכה יותר, במיוחד אם אתם משלבים קריאות ל-API ברקע עם קריאות ל-API שמגיבות לקלט של משתמשים. יש לסמן את הקריאות ל-API ברקע כעדיפותLow
ואת הקריאות האינטראקטיביות ל-API בעדיפותHigh
. - הדפדפן מקצה ל-CSS ולגופנים עדיפות של
High
, אבל יכול להיות שחלק מהמשאבים האלה חשובים יותר מאחרים. ניתן להשתמש ב'עדיפות אחזור' כדי להנמיך את העדיפות של משאבים לא קריטיים (שימו לב ש-CSS מוקדם הוא חסימת עיבוד ולכן צריכה להיות בדרך כלל עדיפותHigh
).
המאפיין 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"
(◉) בכל שורה מציין את עדיפות ברירת המחדל של סוג המשאב הזה. (זמין גם כמסמך Google Docs).
טעינה בשלב חסימת הפריסה | טעינה של כל פריט בנפרד בשלב חסימת הפריסה | ||||
---|---|---|---|---|---|
עדיפות הבהוב |
VeryHigh | גבוהה | בינונית | נמוכה | VeryLow |
עדיפות כלי פיתוח |
הגבוה ביותר | גבוהה | בינונית | נמוכה | הנמוך ביותר |
משאב עיקרי | ◉ | ||||
CSS (לפני הזמן**) | ⬆◉ | ⬇ | |||
CSS (באיחור**) | ⬆ | ◉ | ⬇ | ||
CSS (אי-התאמה במדיה***) | ⬆*** | ◉⬇ | |||
סקריפט (לפני** או לא מסורק הטעינה מראש) | ⬆◉ | ⬇ | |||
סקריפט (סוף**) | ⬆ | ◉ | ⬇ | ||
סקריפט (אסינכרוני/דוחה) | ⬆ | ◉⬇ | |||
גופן | ◉ | ||||
גופן (rel=preload) | ⬆◉ | ⬇ | |||
ייבוא | ◉ | ||||
תמונה (באזור התצוגה – אחרי הפריסה) | ⬆◉ | ⬇ | |||
תמונה (5 התמונות הראשונות > 10,000px2) | ⬆ | ◉ | ⬇ | ||
תמונה | ⬆ | ◉⬇ | |||
מדיה (וידאו/אודיו) | ◉ | ||||
XHR (סנכרון) - הוצא משימוש | ◉ | ||||
XHR/fetch* (אסינכרוני) | ⬆◉ | ⬇ | |||
שליפה מראש (prefetch) | ◉ | ||||
XSL | ◉ |
fetchpriority
מגדיר עדיפות יחסית, כלומר הוא מעלה או מוריד את עדיפות ברירת המחדל בכמות מתאימה, במקום להגדיר את העדיפות באופן מפורש ל-High
או ל-Low
. לרוב, המצב הזה מקבל עדיפות של High
או Low
, אבל לא תמיד. לדוגמה, CSS קריטי עם fetchpriority="high"
שומר על העדיפות 'גבוהה מאוד'/'הגבוהה ביותר', ושימוש ב-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>
תמונות 2 עד 4 יהיו מחוץ לאזור התצוגה, אבל הן עשויות להיחשב 'קרובות מספיק' כדי להעלות אותן ל-high
וגם להיטען גם אם מוסיפים מאפיין load=lazy
. לכן, fetchpriority="low"
הוא הפתרון הנכון לבעיה.
בניסוי קודם עם אפליקציית Oodle, השתמשנו בתכונה הזו כדי להוריד את העדיפות של תמונות שלא מופיעות בזמן הטעינה. התכונה הפחיתה את זמן הטעינה של דף ב-2 שניות.
![השוואה לצד עדיפות אחזור כשנעשה בה שימוש בקרוסלת התמונות של אפליקציית Oodle. בצד ימין, הדפדפן מגדיר עדיפויות ברירת מחדל לתמונות קרוסלה, אך מוריד וצבע את התמונות האלה בשתי שניות לאט יותר מהדוגמה שבצד שמאל, מה שמגדיר עדיפות גבוהה יותר רק לתמונת הקרוסלה הראשונה.](https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2.png?authuser=5&hl=he)
הורדת העדיפות של משאבים שנטענו מראש
כדי למנוע מצב שבו משאבים שנטענו מראש יתחרו במשאבים קריטיים אחרים, אפשר להפחית את העדיפות שלהם. אפשר להשתמש בשיטה הזו עם תמונות, סקריפטים ו-CSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">
<!-- Preload CSS without blocking render, or 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>
הפעולה הזו עדיין תחסום את המנתח כשהוא יגיע לסקריפט הזה, אבל תאפשר עדיפות לתוכן לפני כן.
לחלופין, אם יש צורך ב-DOM המלא, אפשר להשתמש במאפיין defer
(שפועל לפי הסדר אחרי DOMContentLoaded), או אפילו async
בחלק התחתון של הדף.
הורדת העדיפות של אחזורים של נתונים לא קריטיים
הדפדפן יריץ את 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 או HTTP/3 בעלי רוחב פס נמוך. במקרים כאלה, תעדוף יכול לעזור בפתרון צווארי בקבוק.
רשתות CDN לא מטמיעות תעדוף של HTTP/2 באופן אחיד, ובאופן דומה עבור HTTP/3. גם אם הדפדפן מעביר את העדיפות מ'עדיפות אחזור', ייתכן ש-CDN לא יתעדף משאבים בסדר שצוין. לכן קשה יותר לבדוק את עדיפות האחזור. העדיפויות חלות גם באופן פנימי בתוך הדפדפן וגם באמצעות פרוטוקולים שתומכים בתעדוף (HTTP/2 ו-HTTP/3). עדיין כדאי להשתמש ב'עדיפות אחזור' רק לצורך תעדוף הדפדפן הפנימי ללא קשר לתמיכה של CDN או מקור, כי העדיפות משתנה לעיתים קרובות כשהדפדפן מבקש משאבים. לדוגמה, לעיתים קרובות אין בקשה למשאבים בעדיפות נמוכה, כמו תמונות, בזמן שהדפדפן מעבד פריטים קריטיים של
<head>
.ייתכן שלא תוכל להציג את 'עדיפות אחזור' כשיטה מומלצת בעיצוב הראשוני. בהמשך מחזור הפיתוח, תוכל להקצות את סדר העדיפויות למשאבים שונים בדף. אם הם לא תואמים לציפיות שלך, תוכל להציג את התכונה 'עדיפות אחזור' כדי לבצע אופטימיזציה נוספת.
על המפתחים להשתמש בטעינה מראש למטרה המכוונת שלה - כדי לטעון מראש משאבים שהמנתח לא זיהה (גופנים, ייבוא, תמונות LCP ברקע). מיקום הרמז preload
ישפיע על זמן הטעינה מראש של המשאב.
עדיפות האחזור מתייחסת לאופן שבו יש לאחזר את המשאב במהלך האחזור.
טיפים לשימוש בטעינות מראש
יש כמה דברים שחשוב לזכור כשמשתמשים בטעינות מראש:
- הכללת טעינה מראש בכותרות HTTP מציבה אותה לפני כל השאר בסדר הטעינה.
- באופן כללי, טעינות מראש נטענים לפי הסדר שבו המנתח מגיע אליהן עבור כל דבר בעדיפות של
Medium
ומעלה. יש להיזהר אם כוללים טעינות מראש בתחילת ה-HTML. - טעינות מראש של גופנים פועלות בצורה הטובה ביותר לקראת סוף הכותרת או תחילת הגוף.
- טעינות מראש של ייבוא (
import()
דינמי אוmodulepreload
) צריכות לרוץ אחרי תג הסקריפט שצריך לייבא, לכן חשוב לוודא שהסקריפט נטען או מנותח תחילה כדי שניתן יהיה להעריך אותו בזמן טעינת יחסי התלות שלו. - כברירת מחדל, לטעינות מראש של תמונות יש עדיפות של
Low
אוMedium
. סידור שלהם ביחס לסקריפטים אסינכרוניים ולתגים אחרים בעדיפות נמוכה או נמוכה.
היסטוריה
התכונה 'עדיפות אחזור' נבדקה לראשונה ב-Chrome כגרסת מקור לניסיון בשנת 2018, ולאחר מכן שוב בשנת 2021 באמצעות המאפיין importance
. באותו זמן, התכונה הזו נקראה רמזים בעדיפות גבוהה. מאז הממשק השתנה ל-fetchpriority
עבור HTML ול-priority
עבור ממשק ה-API לאחזור של JavaScript כחלק מתהליך הסטנדרטים באינטרנט. כדי להפחית את הבלבול, אנחנו מכנים עכשיו את האפשרות 'עדיפות אחזור של API'.
סיכום
סביר להניח שמפתחים יתעניינו ב'עדיפות הבאה', עם התיקונים בהתנהגות הטעינה מראש ובהתמקדות האחרונה במדדי הליבה לבדיקת חוויית המשתמש באתר וב-LCP. עכשיו יש להם לחצן זמין נוסף שמאפשר להם להשיג את רצף הטעינה המועדף עליהם.