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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

בדף הזה מוסבר בפירוט איך מטמיעים טעינת פריטים בזמן אמת בדפדפן.

למה כדאי להשתמש טעינה איטית ברמת הדפדפן?

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

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

• שימוש ב-Intersection Observer 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" באופן אוטומטי כשאין ערך מפורש, או אם ה-linter מתריע אם הערך לא מוגדר באופן מפורש.

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

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

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

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

ערכי סף של מרחק מהתצוגה

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

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

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

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

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

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

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

בחיבורים מהירים (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">

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

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

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

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

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

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

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

יש להשתמש ב-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 ביצע באופן אוטומטי טעינה איטית של תמונות שמתאימות לדחייה אם מצב טעינה מהירה הופעל ב-Chrome ל-Android, והמאפיין loading לא סופק או שהוגדר ל-loading="auto". עם זאת, מצב Lite ו-loading="auto" הוצאו משימוש ואין תוכניות לספק טעינת פריטים בזמן אמת (lazy-load) של תמונות ב-Chrome.

האם אפשר לשנות את המרחק של התמונה מחלון התצוגה לפני שהיא נטענת?

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

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

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

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

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

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

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

מאחר שיש תמיכה מלאה בטעינה איטית (lazy load) בדפדפנים מודרניים, סביר להניח שאין צורך בספרייה או בתסריט של צד שלישי כדי לטעון תמונות באיטיות.

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

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

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

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

אפשר להשתמש בנכס loading כדי לזהות אם דפדפן תומך בפיצ'ר:

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

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

• כדי למנוע טעינה מיידית בדפדפנים שלא תומכים בכך, מחליפים את <img src> ב-<img data-src>. אם המאפיין loading נתמך, צריך להחליף את הערך data-src ב-src.
• אם loading לא נתמך, אפשר לטעון חלופה מ-lazysizes ולהפעיל אותה, ולהשתמש בכיתה 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>

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

האם טעינת פריטים בזמן אמת (lazy loading) של iframes נתמכת גם בדפדפנים?

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

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

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

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

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

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

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

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

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

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