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

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

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

תמיכה בדפדפן

  • Chrome: 102.
  • קצה: 102.
  • Firefox: לא נתמך.
  • Safari: 17.2.

מקור

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

הדף הזה עוסק ב-אחזור Priority API ובמאפיין HTML fetchpriority, שמאפשר לרמוז על העדיפות היחסית של משאב (high או low). עדיפות האחזור עוזרת לבצע אופטימיזציה של מדדי הליבה לבדיקת חוויית המשתמש באתר.

סיכום

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

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

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

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

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

הטבלה הבאה מציגה איך Chrome מתעדף ומסדר את רוב המשאבים:

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

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

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

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

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

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

כדי למנוע ממשאבים שנטענים מראש להתחרות במשאבים קריטיים אחרים, אפשר להפחית את העדיפות שלהם. אפשר להשתמש בשיטה הזו עם תמונות, סקריפטים ו-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 עבור Fetch API של JavaScript כחלק מתהליך תקני האינטרנט. כדי להפחית את הבלבול, אנחנו קוראים עכשיו ל'עדיפות האחזור של ה-API'.

סיכום

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