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

Możesz użyć atrybutu loading do leniwego ładowania obrazów bez konieczności pisania niestandardowego kodu leniwego ładowania lub używania osobnej biblioteki JavaScript. Oto prezentacja tej funkcji:

Na tej stronie omawiamy szczegóły implementowania leniwego ładowania w przeglądarce.

Dlaczego leniwe ładowanie na poziomie przeglądarki?

Według archiwum HTTP obrazy są najczęściej poszukiwanym typem zasobów w przypadku większości witryn i zwykle zajmują większą przepustowość niż jakikolwiek inny zasób. Na 90. percentylu witryny wysyłają na komputery i urządzenia mobilne ponad 5 MB obrazów.

Wcześniej były dostępne 2 sposoby na opóźnienie wczytywania obrazów niewidocznych na ekranie:

• Korzystanie z interfejsu Intersection Observer API.
• Używanie modułów obsługi zdarzeń scroll, resize lub orientationchange

Każda z tych opcji może pozwolić programistom na włączenie leniwego ładowania. Wielu programistów tworzy biblioteki zewnętrzne, aby udostępniać abstrakcje, które są jeszcze łatwiejsze w obsłudze.

Leniwe ładowanie obsługiwane bezpośrednio przez przeglądarkę nie wymaga jednak zewnętrznej biblioteki. Leniwe ładowanie na poziomie przeglądarki gwarantuje też, że wczytywanie obrazów będzie nadal działać, nawet jeśli klient wyłączy JavaScript. Pamiętaj, że wczytywanie jest opóźnione tylko po włączeniu JavaScriptu.

Atrybut loading

Chrome wczytuje obrazy o różnych priorytetach w zależności od tego, gdzie się znajdują w obszarze widocznym na urządzeniu. Obrazy poniżej widocznego obszaru są wczytywane z niższym priorytetem, ale nadal są pobierane podczas wczytywania strony.

Możesz użyć atrybutu loading, aby całkowicie opóźnić wczytywanie obrazów poza ekranem:

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

Oto obsługiwane wartości atrybutu loading:

• lazy: opóźnia wczytywanie zasobu, dopóki nie osiągnie obliczonej odległości od widocznego obszaru.
• eager: domyślne zachowanie przeglądarki oznaczające nieuwzględnienie atrybutu oraz oznacza, że obraz jest wczytywany niezależnie od tego, gdzie znajduje się na stronie. Jest to wartość domyślna, ale może być przydatna, jeśli Twoje narzędzie automatycznie dodaje loading="lazy", gdy nie ma wartości jednoznacznej lub gdy linter nie wyraża wyraźnie na niej żadnej wartości.

Związek między atrybutem loading a priorytetem pobierania

Wartość eager oznacza, że obraz ma zostać wczytany w zwykły sposób, bez opóźniania jego dalszego ładowania, jeśli obraz znajduje się poza ekranem. Obraz nie wczytuje się szybciej niż inny obraz bez atrybutu loading.

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

Obraz z atrybutami loading="lazy" i fetchpriority="high" wciąż jest opóźniony, ponieważ znajduje się poza ekranem, a także jest pobierany z wysokim priorytetem, gdy znajdzie się prawie w widocznym obszarze. Ta kombinacja nie jest potrzebna, bo przeglądarka prawdopodobnie i tak załaduje ten obraz z wysokim priorytetem.

Progi odległości od widocznego obszaru

Wszystkie obrazy, które można od razu wyświetlić bez przewijania. Obrazy znajdujące się znacznie poniżej widocznego obszaru urządzenia są pobierane tylko wtedy, gdy użytkownik przewija stronę w jego pobliżu.

Implementacja leniwego ładowania w Chromium ma na celu zadbanie o to, aby obrazy poza ekranem były wczytywane na tyle wcześnie, by wczytywały się na tyle wcześnie, że użytkownik przewinął stronę, pobierając je na długo, zanim staną się widoczne w widocznym obszarze.

Próg odległości zależy od następujących czynników:

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

Domyślne wartości różnych skutecznych typów połączeń znajdziesz w źródle Chromium. Możesz poeksperymentować z różnymi progami, ograniczając sieć w Narzędziach deweloperskich.

Większa oszczędność danych i progi dotyczące odległości od widocznego obszaru

W lipcu 2020 roku wprowadziliśmy znaczne ulepszenia w Chrome, aby dostosować progi leniwego ładowania obrazów w odległości od widocznego obszaru, aby lepiej spełnić oczekiwania 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ższe) – zmieniliśmy próg z 4000px na 2500px. Ta zmiana daje dwa cele:

• Działanie <img loading=lazy> jest bliższe działaniu bibliotek leniwego ładowania JavaScriptu.
• Nowe progi odległości od widocznego obszaru nadal oznaczają, że obrazy powinny być już wczytywane, gdy użytkownik je przewinie.

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

Stare a nowe progi:

a porównanie nowych progów z LazySizes (popularną biblioteką leniwego ładowania JavaScriptu):

Dodaj atrybuty wymiarów zdjęć

Gdy przeglądarka wczytuje obraz, nie rozpoznaje od razu jego wymiarów, chyba że jednoznacznie je określisz. Aby umożliwić przeglądarce zarezerwowanie odpowiedniej ilości miejsca na stronie na obrazy i uniknąć zakłócających 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 we stylu wbudowanego:

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

Sprawdzoną metodą ustawiania wymiarów jest stosowanie tagów <img> niezależnie od tego, czy używasz leniwego ładowania. Leniwe ładowanie może jednak zwiększyć znaczenie tej funkcji.

Leniwe ładowanie w Chromium działa tak, że zwiększa prawdopodobieństwo wczytania obrazów, gdy tylko stają się widoczne, ale wciąż istnieje ryzyko, że nie załadują się w odpowiednim czasie. W takim przypadku nieokreślenie atrybutów width i height w obrazach zwiększy ich wpływ na skumulowane przesunięcie układu. Jeśli nie możesz określić wymiarów obrazów, leniwe ładowanie ich może oszczędzić zasoby sieciowe i ryzyko związane z tymi zwiększonymi zmianami układu.

Jeśli nie określisz wymiarów, w większości przypadków obrazy nadal będą leniwe ładowanie, ale jest kilka skrajnych przypadków, o których trzeba wiedzieć. Jeśli nie określono width i height, wymiary obrazu to domyślnie 0 × 0 pikseli. Jeśli masz galerię obrazów, przeglądarka może zdecydować, że na początku mieści się w widocznym obszarze, bo każdy obraz nie zajmuje miejsca, a żaden obraz nie jest wypychany poza ekran. W takim przypadku przeglądarka decyduje się wczytać wszystko wolniej, co spowalnia wczytywanie strony.

Przykład działania loading z dużą liczbą obrazów znajdziesz w tej prezentacji.

Obrazy zdefiniowane przez Ciebie można też leniwie ładować, korzystając z 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 elementu <source>, wystarczy, że do elementu kreacji zastępczej <img> dodać parametr loading.

Zawsze ładowane obrazy z chęcią widoczne w pierwszym widocznym obszarze

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

Używaj parametru loading=lazy tylko w przypadku obrazów spoza początkowego widocznego obszaru. Przeglądarka nie może leniwie ładować obrazu, dopóki nie ustali, w którym miejscu na stronie powinien się znajdować, co spowoduje, że pliki będą się ładować 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">

Płynne pogorszenie

Przeglądarki, które nie obsługują atrybutu loading, ignorują go. Nie są one uwzględniane w zaletach leniwego ładowania, ale nie mają negatywnego wpływu na takie działanie.

Najczęstsze pytania

Czy mogę automatycznie ładować obrazy w Chrome, używając leniwego ładowania?

Wcześniej Chromium automatycznie ładował wszystkie obrazy odpowiednie do odroczenia, jeśli w Chrome na Androida był włączony wersja uproszczona, a atrybut loading nie był podany lub miał wartość loading="auto". Jednak wersja uproszczona i loading="auto" zostały wycofane. Nie planujemy też automatycznego leniwego ładowania obrazów w Chrome.

Czy mogę zmienić, jak bardzo obraz musi znajdować się w widocznym obszarze, zanim zostanie załadowany?

Wartości te są zakodowane na stałe i nie można ich zmienić za pomocą interfejsu API. W przyszłości mogą jednak się zmienić, ponieważ przeglądarki będą eksperymentować z różnymi progami odległości i zmiennymi.

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

Nie, tej funkcji można używać tylko z tagami <img>.

Czy loading może obsługiwać w widocznym obszarze obrazy, które nie są od razu widoczne?

Używanie właściwości loading="lazy" może zapobiec wczytywaniu obrazów, gdy są niewidoczne, ale znajdują się w obliczonej odległości. W przypadku niektórych rozmiarów obrazy mogą znajdować się za karuzelą lub być ukryte przez CSS. Na przykład Chrome, Safari i Firefox nie ładują obrazów ze stylem display: none; ani w elemencie obrazu, ani w elemencie nadrzędnym. Inne techniki ukrywania obrazu, np. stosowanie stylu opacity:0, nadal powodują jednak załadowanie obrazu przez przeglądarkę. Zawsze dokładnie przetestuj implementację, aby mieć pewność, że działa prawidłowo.

W Chrome 121 zmienił się sposób działania obrazów przewijanych w poziomie, np. karuzeli. Obowiązują w nich te same progi co w przypadku przewijania w pionie. Oznacza to, że w przypadku karuzeli obrazy będą wczytywane, zanim pojawią się w widocznym obszarze. Oznacza to, że wczytywanie obrazu będzie mniej zauważalne dla użytkownika, ale wiąże się to z koniecznością pobrania większej liczby plików. Użyj demonstracji leniwego ładowania w poziomie, aby porównać działanie przeglądarek Chrome z tymi w Safari i Firefoksie.

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

Dzięki pełnej obsłudze leniwego ładowania wbudowanej w nowoczesne przeglądarki prawdopodobnie nie potrzebujesz zewnętrznych bibliotek ani skryptów do leniwego ładowania obrazów.

Jednym z powodów dalszego używania biblioteki zewnętrznej loading="lazy" jest udostępnienie kodu polyfill w przeglądarkach, które nie obsługują tego atrybutu, lub zapewnienie większej kontroli nad tym, kiedy jest uruchamiane leniwe ładowanie.

Jak obsłużyć przeglądarki, które nie obsługują leniwego ładowania? {browsers-dont-support}

Utwórz kod polyfill lub użyj biblioteki zewnętrznej, aby leniwe ładowanie obrazów w witrynie. Właściwość loading pozwala sprawdzić, czy przeglądarka obsługuje daną funkcję:

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

Na przykład leniwe rozmiary są popularną biblioteką leniwego ładowania JavaScriptu. Możesz wykryć, że atrybut loading obsługuje leniwe rozmiary, aby można było wczytywać leniwe rozmiary jako bibliotekę zastępczą tylko wtedy, gdy zasada loading nie jest obsługiwana. Działa to w ten sposób:

• Zamień <img src> na <img data-src>, aby uniknąć nadmiernie szybkiego wczytywania stron w nieobsługiwanych przeglądarkach. Jeśli atrybut loading jest obsługiwany, zamień data-src na src.
• Jeśli zasada loading nie jest obsługiwana, wczytaj kreację zastępczą z leniwego rozmiaru i zainicjuj ją, używając klasy lazyload do wskazywania obrazów do leniwego ładowania:

<!-- 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. Aby zobaczyć działanie kreacji zastępczej, wypróbuj ją w starszej przeglądarce.

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

Standard <iframe loading=lazy> również został ustandaryzowany. Umożliwia to leniwe ładowanie elementów iframe za pomocą atrybutu 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 z leniwym ładowaniem, tak jak ma to miejsce w przypadku innych obrazów lub elementów iframe.

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

Wszystkie obrazy i elementy iframe są wczytywane od razu po wydrukowaniu strony. Szczegółowe informacje znajdziesz w problemie nr 875403.

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

Lighthouse 6.0 i wyższy współczynnik w metodach leniwego ładowania obrazów poza ekranem, które mogą korzystać z różnych progów, i przechodzić kontroli opóźnianie obrazów poza ekranem.

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

Obsługa leniwego ładowania obrazów w przeglądarkach znacznie ułatwia zwiększenie wydajności stron.

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