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

Atrybutu loading możesz używać, aby leniwie ładować obrazy bez konieczności pisania niestandardowego kodu leniwego ładowania 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. centylu 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 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 wczytuje obrazy z różną priorytetem w zależności od ich położenia względem widoku na urządzeniu. 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 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.

Zależność 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ę ona szybciej niż inne obrazy, które nie mają 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 atrybutami loading="lazy" i fetchpriority="high" jest nadal opóźniony, gdy znajduje się poza ekranem, a następnie jest pobierany z wysokim priorytetem, gdy znajdzie się 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.

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 przynosi 2 korzyści:

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

Określanie atrybutów wymiarów obrazów

Gdy przeglądarka wczytuje obraz, nie zna od razu jego wymiarów, chyba że wyraźnie je określisz. 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.

Leniwe ładowanie w Chromium jest zaimplementowane w taki sposób, że obrazy z większym prawdopodobieństwem zostaną załadowane, gdy tylko są widoczne, ale zawsze istnieje ryzyko, że nie załadują się w odpowiednim 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 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ż 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 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 leniwego wczytywania na poziomie przeglądarki.

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

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ą stylu display: none; (zarówno w elemencie obrazu, jak i w elemencie nadrzędnym). Jednak inne techniki ukrywania obrazów, np. stosowanie stylu opacity:0, nadal powodują wczytanie obrazu 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. Progi te są teraz takie same jak przy przewijaniu pionowym. 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ł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 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, 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ąć wczytywania z zapasem w nieobsługiwanych przeglądarkach. Jeśli atrybut loading jest obsługiwany, zastąp atrybutem data-src atrybut src.
• Jeśli zasada loading nie jest obsługiwana, wczytaj kreację zastępczą z leniwych rozmiarów i zainicjuj ją, używając klasy lazyload, aby wskazać, które obrazy mają być leniwe ładowanie:

<!-- 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 prezentacja tego wzorca. 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 wczytywanie opóźnione 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 elementy iframe są wczytywane 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 zwiększenia 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