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 ładowanie obrazów poza ekranem można było opóźnić na 2 sposoby:

• za pomocą 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 ma potrzeby korzystania 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 ładuje obrazy w różnych priorytetach w zależności od ich lokalizacji w stosunku do widocznego obszaru urządzenia. Obrazy znajdujące się poniżej widocznego obszaru są ładowane z niższym priorytetem, ale wciąż są pobierane podczas wczytywania strony.

Aby całkowicie opóźnić wczytywanie obrazów poza ekranem, możesz użyć 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 jej 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 wartością 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.

Progi 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 ma na celu zadbanie o to, aby obrazy poza ekranem były wczytywane dostatecznie wcześnie, aby wczytywały się dopiero, gdy użytkownik przewinie stronę.

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

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

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

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

W lipcu 2020 roku wprowadziliśmy w Chrome istotne ulepszenia, aby dostosować progi odległości od widocznego obszaru obrazu przy leniwym ładowaniu obrazów. Dzięki temu lepiej spełniły one oczekiwania deweloperó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 próg z 4000px na 2500px. Ta zmiana ma 2 cele:

• Funkcja <img loading=lazy> działa bliżej funkcji zapewnianych przez biblioteki leniwego ładowania JavaScriptu.
• 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 progów odległości od widoku w jednym z naszych pokazów 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 od razu jego wymiarów, chyba że zostaną one wyraźnie określone. Aby przeglądarka mogła zarezerwować wystarczającą ilość miejsca na stronie na obrazy 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ększenia 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 określisz atrybutów width i height, obraz będzie mieć domyślne wymiary 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 takim przypadku przeglądarka próbuje wczytać wszystko, co powoduje wolniejsze ładowanie strony.

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

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ż to przeglądarka decyduje, który obraz wczytać z dowolnego z elementów <source>, wystarczy, że do elementu zastępczego <img> dodasz tylko loading.

Zawsze łapczywie ładuj 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 leniwie ładować obrazu, dopóki nie dowie się, gdzie powinien się on znaleźć na stronie, co spowoduje wolniejsze ładowanie obrazów.

<!-- 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 leniwego wczytywania 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?

Są one 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?

Parametr loading="lazy" może zapobiec ładowaniu obrazów, które nie są widoczne, 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ą stylu display: none; (zarówno w elemencie obrazu, jak i w elemencie nadrzędnym). Inne techniki ukrywania obrazów, np. opacity:0stylizacja, powodują jednak, że obraz jest nadal wczytywany przez przeglądarkę. Zawsze dokładnie testuj implementację, aby mieć pewność, że działa ona zgodnie z oczekiwaniami.

W wersji 121 Chrome zmienił się sposób działania obrazów przewijanych w poziomie, np. karuzel. 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 ładowanie obrazu będzie mniej zauważalne dla użytkownika, ale kosztem większej liczby pobrań. Aby porównać działanie tej funkcji w Chrome, Safari i Firefox, skorzystaj z demonstracji poziomego ładowania opóźnionego.

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

Dzięki wbudowanej obsłudze leniwego ładowania w nowoczesnych przeglądarkach prawdopodobnie nie potrzebujesz zewnętrznej biblioteki ani skryptu 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 polyfilla dla przeglądarek, które nie obsługują tego atrybutu, lub większa kontrola nad momentem uruchamiania ładowania opóźnionego.

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

Ł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 opóźnionego wczytywania, możesz użyć biblioteki zewnętrznej do opóźnionego wczytywania 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 w celu wczytywania leniwych rozmiarów jako biblioteki zastępczej tylko wtedy, gdy zasada loading nie jest obsługiwana. Działa to w ten sposób:

• Aby uniknąć szybkiego wczytywania strony w nieobsługiwanych przeglądarkach, zastąp <img src> ciągiem <img data-src>. Jeśli atrybut loading jest obsługiwany, zastąp atrybutem data-src atrybut src.
• Jeśli loading nie jest obsługiwane, wczytaj wartość zastępczą z lazysizes i zainicjuj ją, 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 w przeglądarkach?

Dane <iframe loading=lazy> zostały również ujednolicone. Umożliwia to leniwe ładowanie elementów iframe 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 elementy iframe są leniwie ładowane, tak jak każdy inny element graficzny 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 ładowania obrazów w przeglądarkach może znacznie ułatwić poprawę wydajności stron.

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