אופטימיזציה של טעינת המשאבים עם Fetch Priority API

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

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

תמיכה בדפדפנים

  • Chrome: 102.
  • Edge:‏ 102.
  • Firefox: 132.
  • Safari: 17.2.

מקור

כשדפדפן מנתח דף אינטרנט ומתחיל לגלות ולהוריד משאבים כמו תמונות, סקריפטים או CSS, הוא מקצה להם אחזור priority כדי שיוכל להוריד אותם בסדר אופטימלי. בדרך כלל, רמת העדיפות של המשאב תלויה בסוג שלו ובמיקום שלו במסמך. לדוגמה, לתמונות בחלון התצוגה עשויה להיות עדיפות High, והעדיפות של CSS טעון מראש שגורם לחסימת רינדור באמצעות <link> ב-<head> עשויה להיות Very High. הדפדפנים מצליחים להקצות עדיפות בצורה טובה, אבל יכול להיות שהיא לא תהיה אופטימלית בכל המקרים.

בדף הזה מוסבר על Fetch Priority API ועל מאפיין ה-HTML‏ fetchpriority, שמאפשרים להצביע על העדיפות היחסית של משאב (high או low). Fetch Priority יכול לעזור לבצע אופטימיזציה של מדדי Core Web Vitals.

סיכום

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

  • הגדלת העדיפות של תמונת ה-LCP על ידי ציון fetchpriority="high" ברכיב התמונה, וכתוצאה מכך ה-LCP מתרחש מוקדם יותר.
  • העלאת העדיפות של async סקריפטים, באמצעות סמנטיקה טובה יותר מהפריצות הנפוצות ביותר (הוספת <link rel="preload"> לסקריפט async).
  • הפחתת העדיפות של סקריפטים מאוחרים יותר, כדי לשפר את הרצף של התמונות.
תצוגה ברצועת תמונות שמשווה בין שתי בדיקות בדף הבית של &#39;Google חיפוש טיסות&#39;. בתחתית המסך, עדיפות האחזור משמשת לשיפור העדיפות של התמונה הראשית, וכתוצאה מכך מתרחשת ירידה של 0.7 שניות ב-LCP.
אחזור בעדיפות הגבוהה ביותר של מדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP) מ-2.6 ל-1.9 שניות בבדיקה של 'Google חיפוש טיסות'.

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

העדיפות לאחזור היא תוספת לרמזים לגבי משאבים האלה. זהו אות שמבוסס על תגי עיצוב שזמין דרך המאפיין fetchpriority, והמפתחים יכולים להשתמש בו כדי לציין את העדיפות היחסית של משאב מסוים. אפשר גם להשתמש בטיפים האלה דרך JavaScript ו-Fetch API עם המאפיין priority כדי להשפיע על העדיפות של אחזור המשאבים שנוצר לנתונים. עדיפות האחזור יכולה גם להשלים את הטעינה מראש. כדאי להשתמש בתמונה מסוג Largest Contentful Paint, שעדיין תקבל עדיפות נמוכה גם אם היא תיטען מראש. אם היא נדחתה על ידי משאבים אחרים בעלי עדיפות נמוכה בשלב מוקדם, שימוש בעדיפות אחזור יכול לעזור תוך זמן קצר יותר שבו התמונה נטענת.

עדיפות המשאבים

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

  • סוג המשאב, למשל CSS, גופנים, סקריפטים, תמונות ומשאבים של צד שלישי.
  • המיקום או הסדר שבהם המסמך מפנה למשאבים.
  • אם נעשה שימוש במאפיינים async או defer בסקריפטים.

בטבלה הבאה מוסבר איך Chrome קובע את סדר העדיפויות של רוב המשאבים ומסדר אותם:

  טעינה בשלב חסימת הפריסה טעינת רכיב אחד בכל פעם בשלב החסימה של הפריסה
עדיפות
 של Blink		 VeryHigh גבוהה בינונית נמוכה VeryLow
עדיפות
ב-DevTools		 הגבוהה ביותר גבוהה בינונית נמוכה Lowest
מקור המידע הראשי
CSS (מוקדם**) CSS (בסוף**) CSS (חוסר התאמה במדיה***)
סקריפט (לפני הזמן** או לא מסורק הטעינה מראש) סקריפט (סיום**) סקריפט (אסינכרוני)
גופן גופן (rel=preload)
ייבוא
תמונה (באזור התצוגה) תמונה (5 התמונות הראשונות > 10,000 פיקסלים2) תמונה
מדיה (וידאו/אודיו)
שליפה מראש (prefetch)
XSL
XHR (סנכרון) XHR/fetch* (אסינכרוני)

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

בכרטיסייה &#39;רשת&#39; בכלי הפיתוח של Chrome מפורטים מספר משאבי גופן. כולם נמצאים בעדיפות הגבוהה ביותר.
עדיפות למשאב type = "font" בדף הפרטים של חדשות BBC
הכרטיסייה &#39;רשת&#39; בכלי הפיתוח ל-Chrome שכוללת רשימה של כמה מקורות מידע בנושא גופנים. הן כוללות משימות בעדיפות נמוכה ובעדיפות גבוהה.
עדיפות למשאב type = "script" בדף הפרטים של חדשות BBC.

כשהעדיפויות משתנות, אפשר לראות את העדיפות הראשונית ואת העדיפות הסופית בהגדרה שורות בקשות גדולות או בתיאור קצר.

הכרטיסייה &#39;רשת&#39; בכלי הפיתוח ב-Chrome. ההגדרה &#39;שורות בקשה גדולות&#39; מסומנת, ובעמודה &#39;עדיפות&#39; מוצגת התמונה הראשונה עם עדיפות &#39;גבוהה&#39;, ועדיפות ראשונית שונה של &#39;בינונית&#39; בהמשך. אותו הדבר מוצג גם בהסבר הקצר.
שינויים בעדיפות בכלי הפיתוח.

מתי כדאי להשתמש ב'עדיפות אחזור'?

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

  • מניחים תגי משאבים כמו <script> ו-<link> בסדר שבו רוצים שהדפדפן יוריד אותם. בדרך כלל, משאבים שיש להם עדיפות זהה נטענים לפי הסדר שבו מוצאים אותם.
  • השתמשו ברמז למשאב preload כדי להוריד משאבים נחוצים בשלב מוקדם יותר, במיוחד למשאבים שלא ניתן לגלות בקלות בשלב מוקדם באמצעות הדפדפן.
  • יש להשתמש ב-async או ב-defer כדי להוריד סקריפטים בלי לחסום משאבים אחרים.
  • לבצע טעינה מדורגת של תוכן בחלק הנגלל, כדי שהדפדפן יוכל להשתמש ברוחב הפס הזמין למשאבים קריטיים יותר בחלק העליון והקבוע.

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

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

המאפיין 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
עדיפות
ב-DevTools		 הגבוהה ביותר גבוהה בינונית נמוכה Lowest
מקור המידע הראשי ◉
CSS (לפני הזמן**) ⬆◉ ⬇
CSS (מאוחר**) ⬆ ◉ ⬇
CSS (חוסר התאמה של מדיה***) ⬆*** ◉⬇
סקריפט (לפני הזמן** או לא מסורק הטעינה מראש) ⬆◉ ⬇
סקריפט (מאוחר**) ⬆ ◉ ⬇
סקריפט (אסינכרוני/דחייה) ⬆ ◉⬇
גופן ◉
גופן (rel=preload) ⬆◉ ⬇
ייבוא ◉
תמונה (באזור התצוגה – אחרי הפריסה) ⬆◉ ⬇
תמונה (5 התמונות הראשונות צריכות להיות בגודל של יותר מ-10,000 פיקסלים רבועים) ⬆ ◉ ⬇
תמונה ⬆ ◉⬇
מדיה (וידאו/אודיו) ◉
XHR (sync) – הוצא משימוש ◉
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 שניות.

ניסוי שנערך באמצעות עובדים של Cloudflare כדי לכתוב מחדש את הדף 'טיסות Google' באמצעות תעדוף אחזור.

אפשר להשתמש ב-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. בצד ימין, הדפדפן מגדיר עדיפות ברירת מחדל לתמונות בקרוסלה, אבל ההורדה וההצגה של התמונות האלה איטיות בכ-2 שניות בהשוואה לדוגמה בצד ימין, שבה הוגדר עדיפות גבוהה יותר רק לתמונה הראשונה בקרוסלה.
שימוש בעדיפות גבוהה רק בתמונה הראשונה בקרוסלה מאפשר לטעינת הדף להתבצע מהר יותר.

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

כדי למנוע ממשאבים שהוטענו מראש להתחרות במשאבים קריטיים אחרים, אפשר להפחית את העדיפות שלהם. אפשר להשתמש בשיטה הזו עם תמונות, סקריפטים ו-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). עדיין כדאי להשתמש ב-Fetch Priority רק כדי לקבוע את סדר העדיפויות הפנימי של הדפדפן, ללא קשר לתמיכה ב-CDN או במקור, כי סדר העדיפויות משתנה לעיתים קרובות כשהדפדפן מבקש משאבים. לדוגמה, לעיתים קרובות לא ניתן לשלוח בקשות למשאבים בעדיפות נמוכה כמו תמונות בזמן שהדפדפן מעבד פריטים קריטיים של <head>.

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

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

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

טיפים לשימוש בטעינות מראש

כשמשתמשים בטעינות מראש, חשוב לזכור:

  • אם כוללים טעינה מראש בכותרות HTTP, היא ממקמת אותו לפני כל דבר אחר בסדר הטעינה.
  • באופן כללי, טעינות מראש נטענים לפי הסדר שבו המנתח מגיע לכל פריט עם עדיפות Medium ומעלה. חשוב להיזהר אם אתם כוללים פריטים טעונים מראש בתחילת ה-HTML.
  • בדרך כלל, טעינות מראש של גופנים מתאימות לסוף הראש או לתחילת הגוף.
  • העלאות מראש של ייבוא (import() או modulepreload דינמיות) צריכות לרוץ אחרי תג הסקריפט שצריך לייבא אותו, לכן חשוב קודם לוודא שהסקריפט נטען או מנותח כדי שניתן יהיה להעריך אותו בזמן שיחסי התלות שלו בטעינה.
  • ברירת המחדל של העדיפות של טעינה מראש של תמונות היא Low או Medium. צריך לסדר אותם ביחס לסקריפטים אסינכרוניים ולתגים אחרים בעדיפות נמוכה או נמוכה.

היסטוריה

הניסוי הראשון בעדיפות אחזור ב-Chrome נערך כגרסת מקור לניסיון בשנת 2018, ולאחר מכן שוב בשנת 2021 באמצעות המאפיין importance. באותו זמן, התכונה נקראה רמזים לגבי תעדוף. הממשק השתנה מאז ל-fetchpriority עבור HTML ול-priority עבור Fetch API של JavaScript, כחלק מתהליך תקני האינטרנט. כדי למנוע בלבול, אנחנו קוראים לזה עכשיו 'עדיפות אחזור API'.

סיכום

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