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):

oraz nowe progi w porównaniu z LazySizes (popularną biblioteką JavaScript do ładowania opóźnionego):

Dodaj atrybuty wymiarów do obrazów

Podczas wczytywania obrazu przeglądarka nie zna jego wymiarów, chyba że zostaną one wyraźnie określone. Aby umożliwić przeglądarce rezerwowanie wystarczającej ilości miejsca na stronie na potrzeby obrazów i uniknąć uciążliwych zmian układu, zalecamy dodanie atrybutów width i height do wszystkich tagów <img>.

<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 tagów <img> niezależnie od tego, czy używasz leniwego ładowania, ale leniwy sposób ładowania może sprawić, że będzie to ważniejsze.

Opóźnione wczytywanie w Chromium jest zaimplementowane w taki sposób, aby obrazy były wczytywane od razu po tym, jak staną się widoczne, ale nadal istnieje ryzyko, że nie wczytają się we właściwym czasie. W takim przypadku brak określenia wartości width i height w obrazach zwiększa ich wpływ na kumulatywną zmianę układu. Jeśli nie możesz określić wymiarów obrazów, ich wczytywanie opóźnione może oszczędzać zasoby sieci, ale wiąże się z ryzykiem zwiększonych przesunięć układu.

W większości przypadków obrazy są ładowane z opóźnieniem, jeśli nie określisz wymiarów, ale jest kilka szczególnych przypadków, o których musisz pamiętać. Jeśli nie podasz wartości width i height, wymiary obrazu zostaną domyślnie ustawione na 0 × 0 pikseli. Jeśli masz galerię obrazów, przeglądarka może uznać, że wszystkie z nich mieszczą się w obszarze widoku na początku, ponieważ każdy obraz nie zajmuje miejsca i żaden obraz nie jest przesuwany poza ekran. W tym przypadku przeglądarka decyduje się na wczytanie wszystkiego, co powoduje, że strona wczytuje się wolniej.

Przykład działania funkcji loading z dużą liczbą obrazów znajdziesz w tym demo.

Możesz też zdefiniować opóźnione wczytywanie obrazów 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ż to przeglądarka decyduje, które zdjęcie ma się wczytać z dowolnego elementu <source>, wystarczy dodać loading do elementu zapasowego <img>.

Zawsze wczytuj najpierw obrazy widoczne w pierwszym widoku

W przypadku obrazów widocznych podczas pierwszego wczytywania strony przez użytkownika, a zwłaszcza obrazów LCP, użyj domyślnego szybkiego wczytywania w przeglądarce, aby były one dostępne od razu. Więcej informacji znajdziesz w artykule Wpływ nadmiernego leniwego ładowania na wydajność.

Używaj tagu loading=lazy tylko do obrazów znajdujących się poza początkowym widocznym obszarem. Przeglądarka nie może wczytywać obrazu z opóźnieniem, dopóki nie wie, gdzie ma się on znaleźć na stronie. W efekcie wczytywanie trwa dłużej.

<!-- 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ą one z zalet ładowania opóźnionego, ale ich uwzględnienie nie ma negatywnego wpływu.

Najczęstsze pytania

Najczęstsze pytania dotyczące ładowania opóźnionego na poziomie przeglądarki.

Czy w Chrome mogę automatycznie ładować obrazy z opóźnieniem?

Wcześniej Chromium automatycznie opóźniało wczytywanie wszystkich obrazów, które nadawały się do opóźnionego wczytania, jeśli tryb Lite był włączony w Chrome na Androida, a atrybut loading nie był określony lub był ustawiony na loading="auto". Tryb uproszczony i loading="auto" zostały wycofane, a w Chrome nie ma planów automatycznego ładowania obrazów z opóźnieniem.

Czy mogę zmienić odległość obrazu od widocznego obszaru, zanim zostanie on wczytany?

Te wartości są zakodowane na stałe i nie można ich zmienić za pomocą interfejsu API. W przyszłości mogą się jednak zmienić, ponieważ przeglądarki eksperymentują z różnymi wartościami progowymi, odległościami i zmiennymi.

Czy obrazy tła w 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?

Korzystanie z elementu loading="lazy" może uniemożliwić wczytywanie obrazów, gdy są one niewidoczne, ale znajdują się w obliczonej odległości. Te obrazy mogą być umieszczone w karuzeli lub ukryte przez CSS w przypadku określonych rozmiarów ekranu. Na przykład Chrome, Safari i Firefox nie wczytują obrazów za pomocą stylów display: none;, ani w elemencie obrazu, ani w elemencie nadrzędnym. Inne techniki ukrywania obrazów, np. opacity:0stylizacja, powodują jednak, że obraz nadal jest wczytywany przez przeglądarkę. Zawsze dokładnie testuj implementację, aby mieć pewność, że działa ona zgodnie z oczekiwaniami.

W Chrome 121 zmieniliśmy zachowanie obrazów z przewijaniem poziomym, takich jak karuzele. Teraz używają tych samych wartości progowych co przewijanie w pionie. Oznacza to, że w przypadku karuzeli obrazy będą wczytywane, zanim staną się widoczne w widoku. Oznacza to, że wczytywanie obrazu jest mniej widoczne dla użytkownika, ale kosztuje więcej pobrań. Aby porównać działanie funkcji ładowania opóźnionego w układzie poziomym w Chrome, Safari i Firefox, skorzystaj z demonstracji.

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

Ponieważ nowoczesne przeglądarki obsługują wczytywanie opóźnione, prawdopodobnie nie potrzebujesz biblioteki ani skryptu zewnętrznego, aby wczytywać obrazy opóźnione.

Jednym z powodów, dla których warto nadal używać biblioteki innej firmy razem z loading="lazy", jest zapewnienie polyfilla dla przeglądarek, które nie obsługują tego atrybutu, lub większa kontrola nad momentem uruchamiania ładowania opóźnionego.

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

Łatwo wczytywanie obrazów na poziomie przeglądarki jest dobrze obsługiwane we wszystkich głównych przeglądarkach i zalecane w większości przypadków, aby uniknąć konieczności korzystania z dodatkowych zależności od JavaScript.

Jeśli jednak chcesz obsługiwać więcej przeglądarek lub mieć większą kontrolę nad wartościami progowymi ładowania opóźnionego, możesz użyć biblioteki zewnętrznej do ładowania opóźnionego obrazów w swojej witrynie.

Aby wykryć, czy przeglądarka obsługuje tę funkcję, możesz użyć właściwości loading:

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

Na przykład lazysizes to popularna biblioteka JavaScript do ładowania opóźnionego. Możesz wykryć obsługę atrybutu loading, aby wczytywać rozmiary wczytywania opóźnionego jako bibliotekę zapasową tylko wtedy, gdy loading nie jest obsługiwany. Działa to w ten sposób:

• Zastąp <img src> wartością <img data-src>, aby uniknąć szybkiego wczytywania w nieobsługiwanych przeglądarkach. Jeśli atrybut loading jest obsługiwany, zastąp atrybutem data-src atrybut src.
• Jeśli loading nie jest obsługiwane, wczytaj obrazy zastępcze z lazysizes i inicjuj je, używając klasy lazyload, aby wskazać, które obrazy mają być wczytywane z opóźnieniem:

<!-- 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 wzoru. Wypróbuj to w starszej przeglądarce, aby zobaczyć, jak działa tryb zastępczy.

Czy leniwe ładowanie elementów iframe jest obsługiwane również w przeglądarkach?

Dane <iframe loading=lazy> zostały również ujednolicone. Umożliwia to wczytywanie elementów iframe z opóźnieniem za pomocą atrybutu loading. Więcej informacji znajdziesz w artykule Czas na wczytywanie opóźnione ramek iframe poza ekranem.

Jak wczytywanie opóźnione na poziomie przeglądarki wpływa na reklamy na stronie internetowej?

Wszystkie reklamy wyświetlane użytkownikowi jako obrazy lub iframe są wczytywane z opóźnieniem tak jak inne obrazy lub iframe.

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

Wszystkie obrazy i ramki iframe wczytują się natychmiast po wydrukowaniu strony. Więcej informacji znajdziesz w problemie 875403.

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

Lighthouse 6.0 i nowsze wersje uwzględniają podejścia do opóźnionego wczytywania obrazów poza ekranem, które mogą używać różnych progów, dzięki czemu strony mogą przejść audyt Opóźnij wczytywanie obrazów poza ekranem.

Leniwe ładowanie obrazów w celu poprawy wydajności

Obsługa leniwego wczytywania obrazów w przeglądarce może znacznie ułatwić Ci poprawę wydajności stron.

Czy po włączeniu tej funkcji w Chrome zauważasz nietypowe działanie? Zgłoś błąd