תמיכה בדפדפן
- 77
- 79
- 75
- 15.4
אפשר להשתמש במאפיין 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):
ערכי סף ישנים לעומת ערכי סף חדשים:
![ערכי הסף החדשים והמשופרים לטעינה מדורגת של תמונות, מצמצמים את ערכי הסף של מרחק מהתצוגה לחיבורים מהירים מ-3,000 פיקסלים ל-1,250 פיקסלים.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-and-improved-thresho-a20c669983f73.png?authuser=5&hl=he)
וערכי הסף החדשים לעומת LazySizes (ספרייה פופולרית לטעינה מדורגת של JavaScript):
![ערכי הסף החדשים של מרחק מתצוגה ב-Chrome נטענים בגודל 90KB של תמונות בהשוואה לערכי הטעינה של LazySizes ב-70KB באותם תנאי רשת.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-distance-viewport-b99ee22471f28.png?authuser=5&hl=he)
צריך לתת לתמונות מאפיינים
בזמן שהדפדפן טוען תמונה, הוא לא מזהה מיד את מיקום התמונה
אלא אם הם צוינו במפורש. כדי לאפשר לדפדפן להזמין
מספיק מקום בדף לתמונות, ולמנוע תנודות פריסה מפריעות,
אנחנו ממליצים להוסיף את המאפיינים 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 נתמכת גם בדפדפנים?
תמיכה בדפדפן
- 77
- 79
- 121
- 16.4
בנוסף, בוצע סטנדרטיזציה של <iframe loading=lazy>
. כך ניתן לבצע טעינה מדורגת של מסגרות iframe באמצעות loading
. למידע נוסף, ראו הגיע הזמן לטעון בהדרגה iframes מחוץ למסך!
איך טעינה מדורגת ברמת הדפדפן משפיעה על מודעות בדף אינטרנט?
כל המודעות שמוצגות למשתמש כתמונות או כמסגרות iframe נטענות באופן מדורג כמו כל מודעה אחרת תמונה או iframe.
איך תמונות מטופלות כשמדפיסים דף אינטרנט?
כל התמונות ורכיבי ה-iframe נטענים מיד כשהדף מודפס. צפייה בעיה מס' 875403 לקבלת פרטים.
האם מערכת Lighthouse מזהה טעינה מדורגת ברמת הדפדפן?
Lighthouse 6.0 ואילך גישות לטעינה מדורגת של תמונות מחוץ למסך שיכולות להשתמש בערכי סף שונים, ומאפשרת להם להעביר בדיקת דחיית התמונות שלא מופיעות במסך.
טעינה מדורגת של תמונות לשיפור הביצועים
תמיכת הדפדפן בטעינה מדורגת של תמונות יכולה להקל עליכם בצורה משמעותית כדי לשפר את הדפים שלכם או של ביצועים.
האם הבחנת בהתנהגות חריגה כשהתכונה הזו מופעלת ב-Chrome? דווחו על באג!