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

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

בדף הזה מתוארים הפרטים של הטמעת טעינה מדורגת בדפדפן.

למה טעינה עצלה ברמת הדפדפן?

על פי ארכיון HTTP, תמונות הן סוג הנכס המבוקש ביותר ברוב האתרים, והן בדרך כלל תופסות יותר רוחב פס מכל משאב אחר. באחוזון ה-90, אתרים שולחים יותר מ-5MB של תמונות במחשבים ובניידים.

בעבר, היו שתי דרכים לעכב את הטעינה של תמונות שלא מופיעות במסך:

• שימוש ב-Intersection Overer API
• שימוש בגורמים שמטפלים באירועים של scroll, resize או orientationchange

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

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

המאפיין loading

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

אפשר להשתמש במאפיין loading כדי לדחות לחלוטין את הטעינה של תמונות שלא מופיעות במסך:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

אפשר לבחור מבין הערכים הנתמכים הבאים של המאפיין loading:

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

הקשר בין המאפיין loading לעדיפות האחזור

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

אם רוצים להגדיל את עדיפות האחזור של תמונה חשובה (למשל, תמונת ה-LCP), כדאי להשתמש בעדיפות אחזור עם fetchpriority="high".

תמונה עם loading="lazy" ו-fetchpriority="high" עדיין מתעכבת כשהיא לא מוצגת במסך, ואז מאוחזרת בעדיפות גבוהה כשהיא נמצאת כמעט בתוך אזור התצוגה. השילוב הזה לא ממש נחוץ כי הדפדפן ככל הנראה יטען את התמונה בעדיפות גבוהה בכל מקרה.

ספים ממרחק מהתצוגה

כל התמונות הניתנות לצפייה מיידית ללא גלילה נטענות כרגיל. תמונות שנמצאות ממש מתחת לאזור התצוגה של המכשיר מאוחזרות רק כשהמשתמש גולל לידן.

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

סף המרחק משתנה בהתאם לגורמים הבאים:

• סוג משאב התמונה שמאוחזר
• סוג החיבור האפקטיבי

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

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

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

בחיבורים מהירים (4G), הפחתנו את ערכי הסף של Chrome מנקודת מבט של 3000px ל-1250px, ובחיבורים איטיים יותר (3G ומטה), שינינו את הסף מ-4000px ל-2500px. השינוי הזה מאפשר להשיג שני דברים:

• ההתנהגות של <img loading=lazy> דומה לזו שמוצעת על ידי ספריות טעינה מדורגת של JavaScript.
• המשמעות של ערכי הסף החדשים לגבי מרחק מתצוגה עדיין היא שהתמונות ייטענו עד שהמשתמש יגלול אליהן.

בהמשך מופיעה השוואה בין ערכי הסף הישנים למרחקים מהתצוגה לבין אלה של אחת מההדגמות שלנו לחיבור מהיר (4G):

ערכי סף ישנים לעומת ערכי סף חדשים:

וערכי הסף החדשים לעומת LazySizes (ספרייה פופולרית לטעינה מדורגת של JavaScript):

הוספת מאפייני המידות של התמונות

בזמן שהדפדפן טוען תמונה, הוא לא יודע מיד את המידות של התמונה, אלא אם הם מצוינים במפורש. כדי לאפשר לדפדפן לשריין מספיק מקום בדף לתמונות, וכדי למנוע שיבושים בשינויים בפריסה, מומלץ להוסיף את המאפיינים width ו-height לכל התגים <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

לחלופין, אפשר לציין את הערכים שלהם ישירות בסגנון בתוך השורה:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

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

טעינה עצלה ב-Chromium מוטמעת באופן שמגדיל את הסיכוי שהתמונות ייטענו ברגע שהן גלויות, אבל עדיין יש סיכוי שהן לא ייטענו בזמן הנכון. במקרה כזה, אם לא מציינים את הערכים width ו-height בתמונות, ההשפעה שלהם על Cumulative Layout Shift מוגברת. אם אי אפשר לציין את המידות של התמונות, טעינה מדורגת שלהן יכולה לחסוך במשאבי רשת את הסיכון לשינויים מוגברים בפריסה.

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

כדי לראות דוגמה לאופן שבו loading עובד עם מספר גדול של תמונות, אפשר לעיין בהדגמה הזו.

אתם יכולים גם לבצע טעינה מדורגת של תמונות שהגדרתם באמצעות הרכיב <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

למרות שהדפדפן מחליט איזו תמונה לטעון מכל אחד מרכיבי <source>, צריך רק להוסיף את loading לרכיב <img> החלופי.

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

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

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

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

ירידה חיננית

דפדפנים שלא תומכים במאפיין loading מתעלמים ממנו. הם לא נהנים מהיתרונות של טעינה עצלה, אבל אין השפעה שלילית על הטעינה הזו.

שאלות נפוצות

האם אפשר לבצע טעינה מדורגת של תמונות ב-Chrome באופן אוטומטי?

בעבר, Chromium טען באופן אוטומטי באופן מדורג תמונות שבאמת היו כושלות לדחות אותן אם מצב Lite הופעל ב-Chrome ל-Android והמאפיין loading לא סופק או הוגדר ל-loading="auto". עם זאת, מצב Lite ו-loading="auto" הוצאו משימוש, ואנחנו לא מתכננים לספק טעינה מדורגת של תמונות ב-Chrome באופן אוטומטי.

האם אפשר לשנות את מידת הקרבה של תמונה לאזור התצוגה לפני טעינתה?

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

האם תמונות רקע של CSS יכולות להשתמש במאפיין loading?

לא, אפשר להשתמש בו רק עם תגי <img>.

האם loading יכול לפעול עם תמונות באזור התצוגה שאינן גלויות באופן מיידי?

השימוש ב-loading="lazy" יכול למנוע טעינה של תמונות כשהן לא גלויות אבל נמצאות בטווח המרחק המחושב. יכול להיות שהתמונות האלה נמצאות מאחורי קרוסלה או מוסתרות על ידי שירות ה-CSS בגדלים מסוימים. לדוגמה, Chrome, Safari ו-Firefox לא טוענים תמונות באמצעות עיצוב display: none;, באלמנט התמונה או ברכיב הורה. עם זאת, שיטות אחרות להסתרת תמונות, כמו שימוש בעיצוב opacity:0, עדיין גורמות לדפדפן לטעון את התמונה. תמיד חשוב לבדוק את ההטמעה בקפידה כדי לוודא שהיא פועלת כראוי.

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

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

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

אחת הסיבות להמשיך להשתמש בספרייה של צד שלישי לצד loading="lazy" היא לספק polyfill עבור דפדפנים שלא תומכים במאפיין, או כדי שתהיה לכם יותר שליטה על ההפעלה של טעינה מושהית.

איך מטפלים בדפדפנים שלא תומכים בטעינה מושהית? {browsers-dont-support}

ניתן ליצור Polyfill או להשתמש בספרייה של צד שלישי כדי לבצע טעינה מדורגת של תמונות באתר. אפשר להשתמש במאפיין loading כדי לזהות אם הדפדפן תומך בתכונה הזו:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

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

• מחליפים את <img src> ב-<img data-src> כדי למנוע טעינה חזקה בדפדפנים שלא נתמכים. אם המאפיין loading נתמך, צריך להחליף את data-src בערך src.
• אם אין תמיכה ב-loading, טוענים חלופה לגדלים עצלניים ומפעילים אותה באמצעות המחלקה lazyload, כדי לציין אילו תמונות לטעינה מדורגת:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

הנה הדגמה של הדפוס הזה. כדאי לנסות אותה בדפדפן ישן יותר כדי לראות את החלופה בפעולה.

האם טעינה מושהית של iframes נתמכת גם בדפדפנים?

גם <iframe loading=lazy> עברה סטנדרטיזציה. כך תוכלו לבצע טעינה מדורגת של מסגרות iframe באמצעות המאפיין loading. למידע נוסף, ניתן לעיין במאמר הגיע הזמן לטעון באופן הדרגתי iframes מחוץ למסך!

איך טעינה עצלה ברמת הדפדפן משפיעה על מודעות בדף אינטרנט?

כל המודעות שמוצגות למשתמש כתמונות או כ-iframes נטענות באופן הדרגתי כמו כל תמונה אחרת או iframe אחר.

איך מטפלים בתמונות כשמדפיסים דף אינטרנט?

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

האם מערכת Lighthouse מזהה טעינה עצלה ברמת הדפדפן?

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

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

תמיכה בדפדפן לתמונות בטעינה מדורגת יכולה לשפר משמעותית את ביצועי הדפים.

האם הבחנת בהתנהגות חריגה כשהתכונה הזו מופעלת ב-Chrome? דיווח על באג!