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

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

הדף הזה כולל הסבר מפורט על הטמעת טעינה מדורגת בדפדפן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

לדוגמה, lazysize היא שפה פופולרית ספריית טעינה מדורגת של 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 מחוץ למסך!

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

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

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

כל התמונות ורכיבי ה-iframe נטענים מיד כשהדף מודפס. צפייה בעיה מס' 875403 לקבלת פרטים.

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

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

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

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

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