Lazy loading - jak włączyć i przyspieszyć stronę?
Lazy loading odkłada pobranie obrazów i ramek do momentu, w którym użytkownik zbliża się do nich przewijaniem. Strona pobiera na start to, co widać, a nie wszystko, co na niej jest. Zysk jest największy tam, gdzie treści jest dużo: długie artykuły, galerie, listy produktów. Jest jednak jeden przypadek, w którym ta technika szkodzi, i większość błędnych wdrożeń polega właśnie na nim.
Co to jest lazy loading i jak działa?
Domyślnie przeglądarka pobiera wszystkie obrazy z kodu strony, niezależnie od tego, czy użytkownik do nich dotrze. Przy artykule z dwudziestoma zdjęciami oznacza to pobranie dwudziestu plików, z których widać jeden.
Lazy loading odwraca tę kolejność. Przeglądarka rezerwuje miejsce, ale pobiera plik dopiero wtedy, gdy zbliża się on do widocznego obszaru. Dla użytkownika, który nie przewinie do końca, część zdjęć nie zostanie pobrana nigdy.
Przeciwieństwem jest ładowanie natychmiastowe, stosowane do tego, co widać od razu. Sztuka polega na rozdzieleniu jednego od drugiego, a nie na objęciu techniką wszystkiego.
Jak włączyć lazy loading w WordPressie?
Od wersji 5.5 WordPress dodaje atrybut `loading="lazy"` sam, do obrazów wstawianych przez edytor i do obrazów wyróżniających. W większości witryn nie trzeba więc robić nic.
Ręcznej uwagi wymagają trzy przypadki:
- obrazy wstawiane przez kreatory stron, które generują kod po swojemu
- suwaki i galerie z własnym mechanizmem ładowania
- obrazy tła wstawiane w stylach zamiast znacznikiem `
`
W czystym kodzie wystarczy jeden atrybut:
<img src="zdjecie.webp" width="800" height="600" loading="lazy" alt="opis">Ramki z wideo i mapami obsługuje ten sam atrybut na znaczniku `