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

Atrybutu loading możesz używać, aby leniwie ładować obrazy bez konieczności: napisz niestandardowy kod leniwego ładowania lub użyj osobnej biblioteki JavaScriptu. Oto prezentacja 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 są najczęściej żądanym typem zasobu w przypadku większości witryn. wykorzystują większą przepustowość niż jakikolwiek inny zasób. W 90. centylu witryny wysyłanie ponad 5 MB obrazów na komputery i komórki.

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

Każda z tych opcji pozwala programistom zastosować stworzyli biblioteki zewnętrzne, aby dostarczyć abstrakcje, które są jeszcze łatwiejszy w użyciu.

Leniwe ładowanie jest obsługiwane bezpośrednio przez przeglądarkę, ale nie ma potrzeby korzystania z biblioteki zewnętrznej. Leniwe ładowanie na poziomie przeglądarki powoduje też, że ładowanie obrazów będzie działać, nawet jeśli klient wyłączy JavaScript. Pamiętaj jednak, że ładowanie jest opóźnione tylko wtedy, gdy włączona jest obsługa JavaScriptu.

Atrybut loading

Chrome ładuje obrazy w różnych priorytetach w zależności od ich lokalizacji względem widocznego obszaru urządzenia. Obrazy poniżej widocznego obszaru są ładowane przez tag o niższym priorytecie, ale są nadal pobierane w miarę wczytywania strony.

Możesz użyć atrybutu loading, aby całkowicie opóźnić wczytywanie treści poza ekranem obrazy:

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

Oto obsługiwane wartości atrybutu loading:

• lazy: odłóż wczytywanie zasobu do momentu osiągnięcia obliczana odległość od widocznego obszaru.
• eager: domyślny sposób wczytywania przeglądarki, taki sam jak inny. łącznie z atrybutem i oznacza, że obraz jest ładowany niezależnie od tego, gdzie się znajduje umieszczone na stronie. Jest to ustawienie domyślne, ale warto ustawić je jawnie, jeśli używane przez Ciebie narzędzia automatycznie dodają wartość loading="lazy", gdy nie ma żadnej wartości jawna wartość lub w sytuacji, gdy linter nie narzeka, jeśli nie została wyraźnie ustawiona.

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

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

Jeśli chcesz zwiększyć priorytet pobierania ważnego obrazu (na przykład obrazu LCP), użyj opcji Fetch Priority (Priorytet pobierania) z fetchpriority="high"

Obraz z atrybutami loading="lazy" i fetchpriority="high" jest nadal opóźniony. jest poza ekranem, a następnie pobierane z wysokim priorytetem, gdy zbliża się do limitu w widocznym obszarze. Ta kombinacja nie jest potrzebna, ponieważ przeglądarka i tak trzeba będzie załadować ten obraz z wysokim priorytetem.

Progi odległości od widocznego obszaru

Wszystkie obrazy, które można wyświetlić natychmiast bez przewijania, ładują się normalnie. Obrazy znajdujące się znacznie poniżej widocznego obszaru urządzenia, są odczytywane tylko wtedy, gdy użytkownik przewinie stronę w pobliżu.

Implementacja leniwego ładowania w Chromium ma zagwarantować, że obrazy poza ekranem są ładowane na tyle wcześnie, że wczytują się dopiero wtedy, gdy użytkownik przewinie stronę. pobierając je na długo, zanim staną się widoczne w widocznym obszarze.

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

• Typ pobieranego zasobu obrazu
• efektywny typ połączenia,

Domyślne wartości dla różnych skutecznych typów połączeń znajdziesz w źródło Chromium. Możesz eksperymentować z tymi progami poprzez: ograniczanie przepustowości sieci, w Narzędziach deweloperskich.

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

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 progi odległości od widocznego obszaru w Chrome z 3000px do 1250px, a w przypadku wolniejszych połączeń (3G lub mniej), zmieniliśmy próg z 4000px na 2500px. Ta zmiana przynosi 2 korzyści:

• Funkcja <img loading=lazy> działa bliżej funkcji zapewnianych przez biblioteki leniwego ładowania JavaScriptu.
• Nowe progi odległości od widocznego obszaru nadal oznaczają, że obrazy prawdopodobnie będą wczytywane, zanim użytkownik do nich przewinie.

Poniżej znajdziesz porównanie starych i nowych progów odległości od widocznego obszaru w jednej z naszych demonstracji dotyczących szybkiego połączenia (4G):

Stare a nowe progi:

oraz nowe progi w porównaniu z LazySizes (popularną biblioteką JavaScriptu do leniwego ładowania):

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

Podczas wczytywania obrazu przeglądarka nie wie od razu o ile nie są one wyraźnie określone. Aby umożliwić przeglądarce rezerwację wystarczającą ilość miejsca na obrazy i uniknąć uciążliwych przesunięć 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;">

Sprawdzoną metodą ustawiania wymiarów jest stosowanie <img> tagów niezależnie czy leniwe ładowanie jest leniwe, ale może zwiększyć jego znaczenie.

Leniwe ładowanie w Chromium zostało zaimplementowane w taki sposób, że obrazy są bardziej prawdopodobne. zostały załadowane od razu, gdy się pojawią, ale nadal istnieje ryzyko, nie zostaną wczytane w odpowiednim momencie. W takim przypadku nie należy określać właściwości width ani Element height na obrazach zwiększa ich wpływ na skumulowane przesunięcie układu. Jeśli nie możesz określać obrazów wymiarów, leniwe ładowanie może zaoszczędzić sieć narażonych na takie zwiększone zmiany układu.

W większości przypadków obrazy nadal będą się leniwie ładować, jeśli nie określisz wymiarów, jest kilka skrajnych przypadków, o których warto wiedzieć. Bez: width i height domyślnie wymiary obrazu to 0 × 0 pikseli. Jeśli masz galerię obrazów, przeglądarka może uznać, że wszystkie mieszczą się w widocznym obszarze ponieważ każdy obraz nie zajmuje miejsca i nie jest wypychany poza ekran. W w tym przypadku przeglądarka decyduje się wczytać wszystko, co sprawi, że strona będzie ładowana częściej powoli.

Przykład działania loading w przypadku dużej liczby obrazów znajdziesz tutaj: 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>

Przeglądarka decyduje, który obraz załadować z dowolnej z <source> elementów, wystarczy dodać loading do elementu zastępczego <img>.

Zawsze chętnie wczytuj obrazy widoczne w pierwszym widocznym obszarze

W przypadku obrazów, które są widoczne po wczytaniu strony przez użytkownika, a zwłaszcza w przypadku w przypadku obrazów LCP użyj domyślnego entuzjazmu w przeglądarce, aby były one dostępne od razu. Więcej informacji znajdziesz w artykule Wpływ zbyt leniwego ładowania na wydajność.

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

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

Bezwzględna degradacja

Przeglądarki, które nie obsługują atrybutu loading, ignorują go. Nie dostają to zaleta leniwego ładowania, ale nie ma żadnych negatywnych skutków.

Najczęstsze pytania

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

Wcześniej Chromium automatycznie ładował leniwie wszystkie obrazy, które miały na odroczenie, jeśli wersja uproszczona została włączona w Chrome na Androida, ale atrybut loading albo nie podana lub ustawiona na loading="auto". Pamiętaj jednak: Wersja uproszczona i wersja loading="auto" zostały wycofane Nie planujemy też automatycznego leniwego ładowania obrazów w Chrome.

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

Są one zakodowane na stałe i nie można ich zmienić za pomocą interfejsu API. Jednak są one może się zmienić w przyszłości, ponieważ przeglądarki będą eksperymentować z innymi progami odległości i zmiennych.

Czy obrazy tła w usłudze porównywania cen mogą używać atrybutu loading?

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

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

Użycie właściwości loading="lazy" może uniemożliwić ładowanie obrazów, gdy nie są widoczne, ale mieszczą się w obliczonej odległości. Na niektórych ekranach te obrazy mogą znajdować się za karuzelą lub ukryte przez CSS rozmiarów reklam Google Ads. Na przykład Chrome, Safari i Firefox nie wczytują obrazów za pomocą styl display: none; w elemencie obrazu lub w elemencie nadrzędnym. . Należy jednak pamiętać o innych technikach ukrywania obrazów, takich jak opacity:0. stylu, nadal powoduje wczytanie obrazu przez przeglądarkę. Zawsze sprawdzaj aby upewnić się, że wszystko działa zgodnie z oczekiwaniami.

W wersji 121 Chrome zmienił się sposób działania obrazów przewijanych w poziomie, np. karuzel. Progi te są teraz takie same jak przy przewijaniu pionowym. W przypadku karuzeli oznacza to, że obrazy będą wczytywane, zanim pojawią się w widocznym obszarze. Oznacza to, że ładowanie obrazu będzie mniej zauważalne dla użytkownika, ale kosztem większej liczby pobrań. Skorzystaj z demonstracji leniwego ładowania poziomego, aby porównać zachowanie przeglądarki Chrome z działaniem w Safari i Firefoksie.

Co zrobić, jeśli używam już biblioteki zewnętrznej lub skryptu do leniwego ładowania obrazów?

Dzięki wbudowanej w nowoczesne przeglądarki funkcji leniwego ładowania prawdopodobnie nie trzeba wymagają biblioteki lub skryptu innej firmy do leniwego ładowania obrazów.

Jednym z powodów, dla których warto nadal korzystać z biblioteki innej firmy razem z usługą loading="lazy" jest udostępnienie kodu polyfill dla przeglądarek, które nie obsługują tego atrybutu, lub mają większą kontrolę nad tym, kiedy jest aktywowane leniwe ładowanie.

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

Aby umożliwić leniwe ładowanie obrazów w witrynie, utwórz kod polyfill lub bibliotekę innej firmy. Możesz użyć właściwości loading, by określić, czy przeglądarka obsługuje cecha:

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

Na przykład leniwe rozmiary są popularne Biblioteka leniwego ładowania JavaScriptu. Możesz wykryć wsparcie dla usługi loading , aby ładować leniwe rozmiary jako bibliotekę zastępczą tylko wtedy, gdy loading obsługiwane. Działa to w następujący sposób:

• Zamień <img src> na <img data-src>, by uniknąć długotrwałego wczytywania nieobsługiwanych przeglądarkach. Jeśli atrybut loading jest obsługiwany, wymień atrybut data-src za src.
• Jeśli zasada loading nie jest obsługiwana, wczytaj kreację zastępczą z leniwych rozmiarów i zainicjuj go, używając klasy lazyload do wskazania, które obrazy należy ładować leniwie:

<!-- 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: dla danego wzorca. Spróbuj użyć go w starszej przeglądarce, aby zobaczyć, jak działa funkcja zastępcza.

Czy leniwe ładowanie elementów iframe działa też w przeglądarkach?

Ustandaryzowano także zakres <iframe loading=lazy>. Pozwala to na leniwe ładowanie elementów iframe za pomocą interfejsu loading . Więcej informacji znajdziesz w artykule Czas na leniwe ładowanie elementów iframe poza ekranem.

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

Wszystkie reklamy wyświetlane użytkownikowi jako obrazy lub elementy iframe leniwe ładowanie, tak jak każde inne graficzny lub iframe.

Jak są traktowane obrazy podczas drukowania strony internetowej?

Wszystkie obrazy i elementy iframe są wczytywane natychmiast po wydrukowaniu strony. Zobacz Numer sprawy: 875403, aby uzyskać szczegółowe informacje.

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

Lighthouse 6.0 i wyższy współczynnik metody leniwego ładowania obrazów poza ekranem, które mogą mieć różne progi, umożliwiając im przejście przez Odłóż kontrolę obrazów poza ekranem.

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

Obsługa leniwego ładowania obrazów w przeglądarkach znacznie ułatwia do ulepszania stron skuteczność reklam.

Czy po włączeniu tej funkcji w Chrome zauważysz coś dziwnego? Zgłoś błąd.