Obsługa przeglądarek
- 77
- 79
- 75
- 15,4
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
luborientationchange
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:
![Nowe i ulepszone progi umożliwiające leniwe ładowanie obrazów zmniejszają progi odległości od widocznego obszaru przy szybkich połączeniach z 3000 pikseli do 1250 pikseli.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-and-improved-thresho-a20c669983f73.png?authuser=7&hl=pl)
oraz nowe progi w porównaniu z LazySizes (popularną biblioteką JavaScriptu do leniwego ładowania):
![Nowe progi odległości od widocznego obszaru w Chrome wczytujące 90 KB obrazów w porównaniu z parametrami LazySizes wczytywanymi przy 70 KB w tych samych warunkach sieciowych.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-distance-viewport-b99ee22471f28.png?authuser=7&hl=pl)
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 atrybutloading
jest obsługiwany, wymień atrybutdata-src
zasrc
. - Jeśli zasada
loading
nie jest obsługiwana, wczytaj kreację zastępczą z leniwych rozmiarów i zainicjuj go, używając klasylazyload
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?
Obsługa przeglądarek
- 77
- 79
- 121
- 16.4
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.