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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Za pomocą atrybutu loading możesz leniwie ładować obrazy bez konieczności pisania niestandardowego kodu leniwego ładowania ani używania osobnej biblioteki JavaScript. Oto demonstracja tej funkcji:

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

Dlaczego warto stosować leniwe ładowanie na poziomie przeglądarki?

Według HTTP Archive, obrazy są najczęściej żądanym typem zasobu w większości witryn i zwykle zajmują więcej przepustowości niż inne zasoby. W 90. percentylu witryny wysyłają ponad 5 MB obrazów na komputerach i urządzeniach mobilnych.

Wcześniej istniały 2 sposoby na odłożenie ładowania obrazów niewyświetlanych na ekranie:

• Używanie Intersection Observer API
• Używanie scroll, resize, lub orientationchange obsługi zdarzeń

Obie opcje pozwalają deweloperom uwzględnić leniwe ładowanie, a wielu z nich stworzyło biblioteki innych firm, które zapewniają jeszcze łatwiejsze w użyciu abstrakcje.

Dzięki leniwemu ładowaniu obsługiwanemu bezpośrednio przez przeglądarkę nie trzeba jednak korzystać z biblioteki zewnętrznej. Leniwe ładowanie na poziomie przeglądarki zapewnia też, że ładowanie obrazów nadal działa, nawet jeśli klient wyłączy JavaScript. Pamiętaj jednak, że ładowanie jest odkładane tylko wtedy, gdy JavaScript jest włączony.

Atrybut loading

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

Za pomocą atrybutu loading możesz całkowicie odłożyć ładowanie obrazów niewyświetlanych na ekranie:

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

Oto obsługiwane wartości atrybutu loading:

• lazy: odłóż ładowanie zasobu, dopóki nie znajdzie się w obliczonej odległości od widocznego obszaru.
• eager: domyślne zachowanie przeglądarki podczas ładowania, które jest takie samo jak brak atrybutu i oznacza, że obraz jest wczytywany niezależnie od jego położenia na stronie. Jest to wartość domyślna, ale może być przydatna, jeśli Twoje narzędzie automatycznie dodaje loading="lazy" w przypadku braku wyraźnej wartości lub jeśli linter zgłasza błąd, gdy nie jest ona wyraźnie ustawiona.

Zależność między atrybutem loading a priorytetem pobierania

Wartość eager to instrukcja, aby wczytać obraz w zwykły sposób, bez dalszego opóźniania ładowania, jeśli obraz znajduje się poza ekranem. Nie wczytuje obrazu szybciej niż inny obraz, który nie ma atrybutu loading.

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

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

Progi odległości od widocznego obszaru

Wszystkie obrazy, które są od razu widoczne bez przewijania, wczytują się normalnie. Obrazy znajdujące się daleko poniżej widocznego obszaru urządzenia są pobierane tylko wtedy, gdy użytkownik przewinie stronę w ich pobliże.

Implementacja leniwego ładowania w Chromium ma na celu zapewnienie, że obrazy niewyświetlane na ekranie są wczytywane wystarczająco wcześnie, aby zakończyć wczytywanie, zanim użytkownik przewinie do nich stronę. W tym celu pobiera je na długo przed tym, zanim staną się widoczne w widocznym obszarze.

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

• Typ pobieranego zasobu graficznego
• Użyty rodzaj połączenia

Wartości domyślne dla różnych użytych rodzajów połączeń znajdziesz w źródle Chromium. Możesz eksperymentować z tymi różnymi progami, ograniczając sieć w Narzędziach deweloperskich.

Ulepszone oszczędzanie danych i progi odległości od widocznego obszaru

W lipcu 2020 r. Chrome wprowadził znaczące ulepszenia, aby dostosować progi odległości od widocznego obszaru leniwego ładowania obrazów do oczekiwań deweloperów.

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

• <img loading=lazy> działa podobnie jak biblioteki JavaScript do leniwego ładowania.
• Nowe progi odległości od widocznego obszaru nadal oznaczają, że obrazy prawdopodobnie zostaną wczytane, zanim użytkownik przewinie do nich stronę.

Poniżej znajdziesz porównanie starych i nowych progów odległości od widocznego obszaru w przypadku jednej z naszych wersji demonstracyjnych przy szybkim połączeniu (4G):

oraz nowych progów w porównaniu z LazySizes (popularną biblioteką JavaScript do leniwego ładowania):

Dodaj do obrazów atrybuty wymiarów

Podczas wczytywania obrazu przeglądarka nie zna od razu jego wymiarów, chyba że są one wyraźnie określone. Aby przeglądarka mogła zarezerwować wystarczająco dużo miejsca na stronie na obrazy i uniknąć zakłócających przesunięć układu, zalecamy dodanie width i height atrybutów do wszystkich <img> tagów.

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

Możesz też określić ich wartości bezpośrednio w stylu wbudowanym:

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

Sprawdzona metoda ustawiania wymiarów dotyczy <img> tagów niezależnie od tego, czy stosujesz leniwe ładowanie, ale leniwe ładowanie może sprawić, że będzie to jeszcze ważniejsze.

Leniwe ładowanie w Chromium jest zaimplementowane w taki sposób, że obrazy są wczytywane, gdy tylko staną się widoczne, ale nadal istnieje szansa, że nie zostaną wczytane w odpowiednim momencie. Jeśli tak się stanie, brak określenia width i height w przypadku obrazów zwiększy ich wpływ na skumulowane przesunięcie układu. Jeśli nie możesz określić wymiarów obrazów, leniwe ładowanie może zaoszczędzić zasoby sieciowe, ale wiąże się z ryzykiem zwiększenia przesunięć układu.

W większości przypadków obrazy nadal są leniwie ładowane, jeśli nie określisz wymiarów, ale istnieje kilka przypadków brzegowych, o których warto pamiętać. Jeśli nie określisz width i height, domyślne wymiary obrazu to 0 × 0 pikseli. Jeśli masz galerię obrazów, przeglądarka może uznać, że wszystkie mieszczą się w widocznym obszarze na początku, ponieważ każdy obraz nie zajmuje miejsca i żaden obraz nie jest przesuwany poza ekran. W takim przypadku przeglądarka decyduje się wczytać wszystko, co spowalnia wczytywanie strony.

Przykład działania loading w przypadku dużej liczby obrazów znajdziesz w tej wersji demonstracyjnej.

Możesz też leniwie ładować obrazy zdefiniowane za pomocą elementu <picture>:

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

Chociaż przeglądarka decyduje, który obraz wczytać z dowolnego elementu <source> , musisz dodać loading tylko do elementu zastępczego <img>.

Zawsze wczytuj obrazy widoczne w pierwszym widocznym obszarze

W przypadku obrazów widocznych, gdy użytkownik po raz pierwszy wczytuje stronę, a zwłaszcza w przypadku obrazów LCP, użyj domyślnego wczytywania przeglądarki, aby były dostępne od razu. Więcej informacji znajdziesz w artykule Wpływ na wydajność zbyt dużej ilości leniwego ładowania.

Używaj loading=lazy tylko w przypadku obrazów znajdujących się poza początkowym widocznym obszarem. Przeglądarka nie może leniwie ładować obrazu, dopóki nie wie, gdzie powinien się on znajdować na stronie, co powoduje wolniejsze wczytywanie.

<!-- 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">

Łagodna degradacja

Przeglądarki, które nie obsługują atrybutu loading, ignorują go. Nie korzystają z zalet leniwego ładowania, ale jego uwzględnienie nie ma negatywnego wpływu.

Najczęstsze pytania

Najczęstsze pytania dotyczące leniwego ładowania na poziomie przeglądarki.

Czy mogę automatycznie leniwie ładować obrazy w Chrome?

Wcześniej Chromium automatycznie leniwie ładował wszystkie obrazy, które dobrze nadawały się do odłożenia, jeśli tryb uproszczony był włączony w Chrome na Androidzie, a atrybut loading nie był podany lub miał wartość loading="auto". Tryb uproszczony i zostały jednak wycofane i nie planujemy automatycznego leniwego ładowania obrazów w Chrome.loading="auto"

Czy mogę zmienić odległość obrazu od widocznego obszaru, po której obraz ma się wczytać?

Te wartości są zakodowane na stałe i nie można ich zmienić za pomocą interfejsu API. Mogą się jednak zmienić w przyszłości, gdy przeglądarki będą eksperymentować z różnymi odległościami progowymi i zmiennymi.

Czy obrazy tła CSS mogą używać atrybutu loading?

Nie, możesz go używać tylko z tagami <img>.

Czy loading może działać z obrazami w widocznym obszarze, które nie są od razu widoczne?

Użycie loading="lazy" może uniemożliwić wczytywanie obrazów, gdy nie są one widoczne, ale znajdują się w obliczonej odległości. Obrazy te mogą znajdować się za karuzelą lub być ukryte przez CSS w przypadku niektórych rozmiarów ekranu. Na przykład Chrome, Safari i Firefox nie wczytują obrazów, które używają stylu display: none;, ani w elemencie obrazu, ani w elemencie nadrzędnym. Inne techniki ukrywania obrazów, takie jak użycie stylu opacity:0, nadal powodują jednak wczytywanie obrazu przez przeglądarkę. Zawsze dokładnie testuj implementację, aby upewnić się, że działa zgodnie z oczekiwaniami.

W Chrome 121 zmieniliśmy zachowanie w przypadku obrazów przewijanych w poziomie, takich jak karuzele. Używają one teraz tych samych progów co przewijanie w pionie. Oznacza to, że w przypadku karuzeli obrazy będą wczytywane, zanim staną się widoczne w widocznym obszarze. Oznacza to, że wczytywanie obrazu jest mniej zauważalne dla użytkownika, ale kosztem większej liczby pobrań. Aby porównać zachowanie w Chrome, Safari i Firefox, użyj wersji demonstracyjnej leniwego ładowania w poziomie.

Co się stanie, jeśli używam już biblioteki lub skryptu innej firmy do leniwego ładowania obrazów?

Dzięki pełnej obsłudze leniwego ładowania w nowoczesnych przeglądarkach prawdopodobnie nie potrzebujesz biblioteki ani skryptu innej firmy do leniwego ładowania obrazów.

Jednym z powodów, dla których warto nadal używać biblioteki innej firmy razem z loading="lazy" jest zapewnienie polyfill dla przeglądarek, które nie obsługują tego atrybutu, lub większa kontrola nad tym, kiedy jest wyzwalane leniwe ładowanie.

Jak obsługiwać przeglądarki, które nie obsługują leniwego ładowania?

Leniwe ładowanie obrazów na poziomie przeglądarki jest dobrze obsługiwane we wszystkich głównych przeglądarkach i jest zalecane w większości przypadków, aby wyeliminować potrzebę dodatkowych zależności od JavaScript.

Jeśli jednak musisz obsługiwać więcej przeglądarek lub chcesz mieć większą kontrolę nad progami leniwego ładowania, możesz użyć biblioteki innej firmy do leniwego ładowania obrazów w swojej witrynie.

Za pomocą właściwości loading możesz sprawdzić, czy przeglądarka obsługuje tę funkcję:

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

Na przykład lazysizes to popularna biblioteka JavaScript do leniwego ładowania. Możesz wykryć obsługę atrybutu loading, aby wczytywać lazysizes jako bibliotekę zastępczą tylko wtedy, gdy loading nie jest obsługiwane. Działa to w ten sposób:

• Zastąp <img src> elementem <img data-src>, aby uniknąć wczytywania w przeglądarkach, które nie obsługują tej funkcji. Jeśli atrybut loading jest obsługiwany, zamień data-src na src.
• Jeśli loading nie jest obsługiwane, wczytaj rezerwę z lazysizes i zainicjuj ją, używając klasy lazyload, aby wskazać, które obrazy mają być leniwie ładowane:

<!-- 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>

Oto demonstracja tego wzorca. Wypróbuj ją w starszej przeglądarce, aby zobaczyć, jak działa rezerwa.

Czy leniwe ładowanie iframe jest też obsługiwane w przeglądarkach?

<iframe loading=lazy> Znormalizowano też. Dzięki temu możesz leniwie ładować iframe za pomocą atrybutu loading. Więcej informacji znajdziesz w artykule Czas na leniwe ładowanie iframe niewyświetlanych na ekranie.

Jak leniwe ładowanie na poziomie przeglądarki wpływa na reklamy na stronie internetowej?

Wszystkie reklamy wyświetlane użytkownikowi jako obrazy lub iframe są leniwie ładowane tak samo jak inne obrazy lub iframe.

Jak są obsługiwane obrazy podczas drukowania strony internetowej?

Podczas drukowania strony wszystkie obrazy i iframe są wczytywane od razu. Szczegółowe informacje znajdziesz w problemie #875403.

Czy Lighthouse rozpoznaje leniwe ładowanie na poziomie przeglądarki?

Lighthouse w wersji 6.0 i nowszych uwzględnia podejścia do leniwego ładowania obrazów niewyświetlanych na ekranie, które mogą używać różnych progów, co pozwala im przejść audyt Odłóż ładowanie obrazów niewyświetlanych na ekranie.

Leniwe ładowanie obrazów w celu zwiększenia wydajności

Obsługa leniwego ładowania obrazów w przeglądarce może znacznie ułatwić zwiększenie wydajności stron.

Czy po włączeniu tej funkcji w Chrome zauważasz jakieś nietypowe zachowanie? Zgłoś błąd.