אופטימיזציה של עדיפות התמונה

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

שימוש ב-fetchpriority ברכיב <img> מאפשר לכם לאותת לדפדפן באופן מפורש על החשיבות של תמונה, וכך להבטיח שתמונות קריטיות ייטענו מהר יותר, בעוד שתמונות לא חיוניות לא יתחרו על רוחב הפס.

המאפיין loading=lazy מונע הורדה של תמונות כשהן מחוץ למסך, מה שיכול לעזור לתעדף תמונות.

איך מטמיעים

1. זיהוי התמונה של ה-LCP: מזהים איזו תמונה היא המועמדת הסבירה ביותר להיות רכיב התוכן הכי גדול (בדרך כלל התמונה הראשית בחלק העליון של הדף).
2. העלאת העדיפות של ה-LCP: מוסיפים את fetchpriority="high" לרכיב <img> של המועמד ל-LCP.
3. הורדת העדיפות של תמונות לא קריטיות: לתמונות שהן חלק מממשק משתמש משני או שמוצגות רק אחרי אינטראקציה של המשתמש (כמו תפריטים גדולים, מודלים או שקפים בקרוסלה מחוץ למסך), מוסיפים את המאפיין fetchpriority="low".
4. אופטימיזציה של טעינה מדורגת: אף פעם אל תשתמשו ב-loading="lazy" בתמונת ה-LCP. לתמונות רגילות מתחת לקו הקיפול, מספיק להשתמש ב-loading="lazy" כדי לדחות את הבקשה עד שהמשתמש גולל קרוב אליהן. אל תוסיפו את המאפיין fetchpriority="low" לתמונות האלה, כי אתם רוצים שהן ייטענו בעדיפות רגילה כשהמשתמש גולל אליהן. שמרו את הערך fetchpriority="low" לתמונות שנמצאות מבחינה טכנית "בחלק העליון" אבל לא גלויות בהתחלה (למשל, שקפים מוסתרים בקרוסלה או תפריטים גדולים). בתמונות המוסתרות האלה, אפשר גם להשתמש ב-loading="lazy". הדפדפן יטפל בתזמון הבקשה תוך התחשבות בעדיפות הנמוכה.
5. העדיפו את עדיפויות ברירת המחדל: אם לתמונה צריכה להיות עדיפות טעינה רגילה, השמיטו את המאפיין fetchpriority לחלוטין במקום להגדיר אותו כ-auto. זוהי מוסכמה סגנונית שנועדה לשמור על קוד HTML נקי יותר, תוך הסתמכות על ההיוריסטיקה המקורית של הדפדפן.

קוד לדוגמה

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

שיטות מומלצות

• חובה: תמיד צריך להחיל את fetchpriority="high" על תמונת ה-LCP.
• חובה: כדי למנוע עומס ברשת ודילול של העדיפות, צריך להשתמש ב-fetchpriority="high" רק בתמונה אחת או שתיים קריטיות.
• חובה: השתמשו ב-fetchpriority="low" לתמונות שנמצאות מבחינה טכנית "בחלק העליון" אבל מוסתרות בהתחלה (למשל, שקפים מוסתרים בקרוסלה, תמונות בתפריט מגה).
• חובה: אל תשתמשו ב-fetchpriority="low" בתמונות רגילות בחלק הנגלל שכבר משתמשות ב-loading="lazy". התמונות האלה צריכות להיטען בעדיפות רגילה כשהן נכנסות לאזור התצוגה.
• מומלץ: להימנע משימוש ב-fetchpriority="auto". אם אתם רוצים להשתמש בעדיפות ברירת המחדל, אל תכללו את המאפיין בכלל כדי לשמור על קוד HTML נקי.
• אל תשלבו את fetchpriority="high" עם loading="lazy".
• אל תשתמשו במאפיין importance שהוצא משימוש. הוא הוחלף על ידי fetchpriority ואין דפדפן שתומך בו.
• אל תשתמשו בערך loading="auto" שהוצא משימוש. בהתחלה הייתה תמיכה ב-Chrome, אבל היא הוסרה ואין תמיכה באף דפדפן.

אסטרטגיית גיבוי

המאפיין fetchpriority הוא שיפור הדרגתי (progressive enhancement) של הרכיב <img>. אם הדפדפן לא תומך במאפיין, הוא מתעלם ממנו ומשתמש בהיוריסטיקות של עדיפות ברירת המחדל שלו.