Połączenie nie powiodło się. Spróbuj ponownie.

Przejdź do treści
SEO Tools
Pomoc i dokumentacja
Szybkość Średni wpływ Łatwe 10–30 min

Lazy loading obrazów

Obrazy poza ekranem wczytuj dopiero przy przewijaniu.

Co to jest

Lazy loading oznacza, że obrazy poza widocznym obszarem nie wczytają się od razu, lecz dopiero gdy użytkownik do nich doprzewija. Wystarczy atrybut loading="lazy".

Dlaczego warto to rozwiązać

Bez lazy loadingu przeglądarka pobiera także obrazy na samym dole strony, których użytkownik być może nigdy nie zobaczy — opóźnia to pierwsze renderowanie i marnuje dane. Lazy loading przyspiesza start i oszczędza transfer.

Jak to zrobić

  1. 1Dodaj loading="lazy" obrazom i ramkom iframe poniżej widocznego obszaru.
  2. 2NIE używaj lazy na głównym obrazie nad linią załamania (obraz LCP) — ten chcesz przeciwnie, jak najwcześniej (najlepiej preload).
  3. 3Zawsze podawaj width i height, aby układ nie skakał (CLS).

Przykład

Dobrze
<img src="galeria-12.webp" alt="..." loading="lazy" width="800" height="600">

Podsumowanie

Lazy loading jest dziś natywny (jeden atrybut) i niemal za darmo przyspiesza strony z dużą liczbą obrazów. Uważaj tylko na główny obraz nad linią załamania — temu lazy nie nadawaj. Uzupełnij wymiary ze względu na stabilność układu.

Powiązane tematy