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

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

Addy Osmani
Addy Osmani
Leena Sohoni
Leena Sohoni
Patrick Meenan
Patrick Meenan

תמיכה בדפדפן

  • 102
  • 102
  • x
  • 17.2

מקור

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

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

סיכום

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

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

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

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

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

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

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

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

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

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

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

סיכום

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