Lazy loading

Lazy loading, czyli leniwe (odroczone) ładowanie, to technika optymalizacji wydajności stron internetowych, w której poszczególne zasoby — obrazy, filmy, ramki iframe, a nawet fragmenty kodu JavaScript — wczytywane są dopiero wtedy, gdy faktycznie stają się potrzebne. Zamiast pobierać całą zawartość strony od razu, przeglądarka odkłada mniej istotne elementy do chwili, gdy użytkownik do nich dotrze.

Jak działa lazy loading?

W najczęstszym zastosowaniu — leniwym ładowaniu obrazów — przeglądarka pobiera grafikę dopiero, gdy zbliża się ona do widocznego obszaru ekranu (viewportu) podczas przewijania. W praktyce realizuje się to na kilka sposobów:

• natywnie — atrybutem loading="lazy" w znaczniku obrazu, obsługiwanym dziś przez wszystkie główne przeglądarki;
• przez Intersection Observer — API JavaScriptu wykrywające, kiedy element pojawia się w polu widzenia;
• na poziomie frameworka — komponenty dzielą kod na porcje ładowane na żądanie (code splitting).

Dzięki temu początkowa transmisja danych jest mniejsza, a strona staje się interaktywna szybciej.

Zastosowanie w praktyce

Lazy loading najbardziej pomaga na stronach bogatych w media: galeriach, sklepach z setkami zdjęć produktów, blogach z długimi artykułami. Odroczenie zasobów poniżej pierwszego ekranu skraca czas ładowania i poprawia wskaźniki Core Web Vitals, w tym LCP. Ważne, by nie stosować go do elementów widocznych natychmiast — leniwe ładowanie głównego obrazu na górze strony paradoksalnie pogorszyłoby postrzeganą szybkość. Technika najlepiej działa w połączeniu z kompresją grafik i szybkim serwerem, który błyskawicznie dostarcza zasoby w momencie żądania.

Wdrażając leniwe ładowanie, warto zadbać o kilka szczegółów. Obrazom należy z góry przypisać wymiary (szerokość i wysokość), aby przeglądarka zarezerwowała dla nich miejsce i nie doszło do przeskoków układu, które pogarszają wskaźnik CLS. Dobrą praktyką jest też wyświetlanie lekkiego symbolu zastępczego (placeholdera) w czasie doładowywania zasobu. W większości popularnych systemów CMS i frameworków lazy loading jest dziś dostępny domyślnie lub przez prostą wtyczkę, dzięki czemu jego wdrożenie nie wymaga zaawansowanej wiedzy programistycznej.