Lazy loading obrazów

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

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.

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).