Leniwe ładowanie obrazów na poziomie przeglądarki w internecie

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Możesz użyć atrybutu loading, aby wczytywać obrazy z opóźnieniem bez konieczności pisania niestandardowego kodu do wczytywania z opóźnieniem lub używania osobnej biblioteki JavaScript. Oto demonstracja tej funkcji:

Na tej stronie znajdziesz szczegółowe informacje o wdrażaniu leniwego ładowania w przeglądarce.

Dlaczego leniwe ładowanie na poziomie przeglądarki?

Według archiwum HTTP obrazy to najczęściej pobierany typ zasobu w przypadku większości witryn i zwykle zajmują więcej przepustowości niż jakikolwiek inny zasób. W 90. percentylu witryny wysyłają ponad 5 MB obrazów na komputerach i urządzeniach mobilnych.

Wcześniej można było opóźnić wczytywanie obrazów poza ekranem na 2 sposoby:

• Korzystanie z interfejsu Intersection Observer API
• Używanie modułów obsługi zdarzeń scroll, resize lub orientationchange

Obie opcje umożliwiają deweloperom stosowanie opóźnionego wczytywania. Wielu deweloperów stworzyło biblioteki zewnętrzne, aby zapewnić abstrakcje, które są jeszcze łatwiejsze w użyciu.

Jednak dzięki temu, że opóźnione wczytywanie jest obsługiwane bezpośrednio przez przeglądarkę, nie trzeba korzystać z biblioteki zewnętrznej. Leniwe ładowanie na poziomie przeglądarki zapewnia też, że wczytywanie obrazów działa nawet wtedy, gdy klient wyłączy JavaScript. Pamiętaj jednak, że ładowanie jest opóźnione tylko wtedy, gdy JavaScript jest włączony.

Atrybut loading

Chrome wczytuje obrazy z różną priorytetem w zależności od ich położenia względem widoku urządzenia. Obrazy znajdujące się poniżej widocznego obszaru są wczytywane z niższym priorytetem, ale nadal są pobierane podczas wczytywania strony.

Aby całkowicie opóźnić wczytywanie obrazów znajdujących się poza ekranem, użyj atrybutu loading:

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

Oto obsługiwane wartości atrybutu loading:

• lazy: ładowanie zasobu zostaje opóźnione, dopóki nie osiągnie obliczonej odległości od widocznego obszaru.
• eager: domyślne zachowanie wczytywania przeglądarki, które jest takie samo jak brak atrybutu i oznacza, że obraz jest wczytywany niezależnie od tego, gdzie się znajduje na stronie. Jest to wartość domyślna, ale może być przydatne jawne ustawienie, jeśli narzędzia automatycznie dodają loading="lazy", gdy nie ma jawnej wartości, lub jeśli linter zgłasza błąd, gdy nie jest ona jawnie ustawiona.

Relacja między atrybutem loading a priorytetem pobierania

Wartość eager to instrukcja wczytania obrazu w zwykły sposób, bez opóźnienia wczytywania, jeśli obraz znajduje się poza ekranem. Nie wczytuje się on szybciej niż inne zdjęcie, które nie ma atrybutu loading.

Jeśli chcesz zwiększyć priorytet pobierania ważnego obrazu (np. obrazu LCP), użyj atrybutu Priorytet pobierania z wartością fetchpriority="high".

Obraz z loading="lazy" i fetchpriority="high" jest nadal opóźniony, gdy znajduje się poza ekranem, a potem pobierany z wysokim priorytetem, gdy jest prawie w widocznym obszarze. Ta kombinacja nie jest konieczna, ponieważ przeglądarka prawdopodobnie i tak wczyta obraz z wysokim priorytetem.

Próg odległości od widocznego obszaru

Wszystkie obrazy, które są widoczne od razu, bez przewijania, wczytują się normalnie. Obrazy znajdujące się daleko poniżej widocznego obszaru na urządzeniu są pobierane tylko wtedy, gdy użytkownik przewinie do nich kursor.

Implementacja leniwego ładowania w Chromium stara się, aby obrazy znajdujące się poza ekranem były wczytane odpowiednio wcześnie, aby zakończyć wczytywanie przed momentem, gdy użytkownik przewinie stronę do tych obrazów. W tym celu pobiera je odpowiednio wcześniej, zanim staną się widoczne w widocznym obszarze.

Próg odległości zależy od tych czynników:

• Typ pobieranego zasobu obrazu
• użyty typ połączenia,

Wartości domyślne różnych typów skutecznych połączeń znajdziesz w źródle Chromium. Możesz eksperymentować z tymi wartościami progowymi, ograniczając przepustowość sieci w Narzędziach deweloperskich.

Ulepszenia progów oszczędzania danych i odległości od widoku

W lipcu 2020 r. wprowadziliśmy w Chrome znaczne ulepszenia, aby dostosować progi leniwego wczytywania obrazów do odległości od widoku, co lepiej odpowiada oczekiwaniom programistów.

W przypadku szybkich połączeń (4G) obniżyliśmy w Chrome próg odległości od widoku z 3000px na 1250px, a w przypadku wolniejszych połączeń (3G lub niższych) zmieniliśmy go z 4000px na 2500px. Ta zmiana ma 2 cele:

• <img loading=lazy> działa podobnie jak biblioteki JavaScript do opóźnionego wczytywania.
• Nowe progi odległości od widoku nadal oznaczają, że obrazy prawdopodobnie zostaną załadowane, zanim użytkownik przewinie stronę do tego miejsca.

Poniżej znajdziesz porównanie starych i nowych wartości progowych odległości od widoku w przypadku jednego z naszych demonstracji na szybkim połączeniu (4G):