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

טעינה עצלה מובנית סוף סוף הגיעה!

יש עכשיו תמיכה ברמת הדפדפן בטעינה מדורגת של תמונות באינטרנט! בסרטון הזה מוצגת הדגמה של התכונה:

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

תאימות דפדפן

דפדפנים שלא תומכים במאפיין loading פשוט מתעלמים ממנו בלי תופעות לוואי.

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

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

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

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

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

המאפיין loading

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

התמונות צריכות לכלול מאפייני מידות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איך המאפיין loading פועל עם תמונות שנמצאות באזור התצוגה אבל לא גלויות באופן מיידי (לדוגמה: מאחורי קרוסלה או מוסתרות על ידי שירות ה-CSS בגדלים מסוימים של מסכים)?

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

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

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

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

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

ניתן ליצור 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, יש לטעון חלופה (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>

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

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

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

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

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

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

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

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

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

סיכום

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

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