Czym jest lazy loading i jak działa

Nie każdy obraz na stronie musi ładować się w tym samym czasie. Lazy loading obrazów opóźnia pobieranie obrazów, które nie są jeszcze widoczne w obszarze widoku odwiedzającego, dzięki czemu przeglądarka skupia się na treści, którą odwiedzający naprawdę widzi, zamiast ładować całą stronę naraz. Na stronach z wieloma obrazami sama ta zmiana może znacząco skrócić początkowy czas ładowania i poprawić wskaźniki ważne zarówno dla doświadczenia odwiedzających, jak i pozycji w wyszukiwarce. Ten artykuł wyjaśnia, czym jest lazy loading, jak działa technicznie, co powinno, a czego nie powinno być ładowane leniwie i jak wpływa na wyniki Core Web Vitals.

Gdy przeglądarka ładuje stronę bez lazy loading, pobiera każdy obraz na stronie, niezależnie od tego, czy któryś z nich jest już widoczny. Odwiedzający, który otwiera stronę i od razu wychodzi, i tak powoduje pobranie każdego obrazu poniżej pierwszego ekranu. To marnowanie transferu, które spowalnia ładowanie wszystkiego powyżej, co odwiedzający faktycznie widzi. Lazy loading zmienia to tak, że pobierana jest tylko treść aktualnie widoczna. Kontekst, jak to wpisuje się w szerszy obraz szybkości ładowania strony, znajdziesz w artykule jak skrócić czas ładowania strony internetowej.

Czym jest lazy loading?

Lazy loading to technika, która odracza ładowanie mniej ważnych zasobów do chwili, gdy są potrzebne. W przypadku obrazów oznacza to, że obraz nie jest pobierany, dopóki odwiedzający nie przewinie strony blisko niego. Zamiast żądać każdego obrazu przy ładowaniu strony, przeglądarka żąda tylko tych, które są widoczne lub zaraz staną się widoczne podczas interakcji odwiedzającego ze stroną.

Co lazy loading zmienia w sekwencji ładowania

• Bez lazy loading: przeglądarka żąda wszystkich obrazów przy pierwszym ładowaniu strony, niezależnie od tego, czy są w obszarze widoku
• Z lazy loading: przeglądarka żąda tylko obrazów, które są w obszarze widoku lub blisko niego. Pozostałe są żądane w miarę przewijania w ich stronę
• Łączna ilość danych przesłanych podczas przewijania całej strony jest taka sama, ale początkowe ładowanie jest znacznie lżejsze
• Odwiedzający, którzy nie przewiną strony poza pewien punkt, nigdy nie wywołają pobrania obrazów, do których nie docierają

Jak lazy loading działa technicznie?

Są dwa sposoby wdrożenia lazy loading dla obrazów: natywny atrybut przeglądarki i rozwiązania oparte na JavaScript.

Natywny lazy loading

• Wszystkie główne przeglądarki obsługują natywny lazy loading przez atrybut loading="lazy" dodany bezpośrednio do znacznika obrazu
• Nie jest potrzebny JavaScript ani zewnętrzne biblioteki. Przeglądarka obsługuje ładowanie natywnie
• To obecnie standardowe podejście do lazy loading obrazów w sieci i wymaga minimalnej wiedzy technicznej do wdrożenia
• Przeglądarka ustala, kiedy zacząć ładować obraz, na podstawie jego odległości od obszaru widoku, a ten próg różni się nieznacznie między przeglądarkami

Lazy loading oparty na JavaScript

• Zanim natywny lazy loading był szeroko obsługiwany, programiści używali bibliotek JavaScript, które monitorowały pozycję przewijania i wyzwalały ładowanie obrazów, gdy wchodziły w obszar widoku
• Standardowym podejściem JavaScript jest Intersection Observer API, które wykrywa wejście elementu w obszar widoku lub wyjście z niego bez polegania na nasłuchiwaniu zdarzeń przewijania
• Lazy loading oparty na JavaScript jest nadal używany w bardziej złożonych scenariuszach, takich jak leniwe ładowanie obrazów w tle ustawionych w CSS lub treści wideo
• W przypadku standardowych elementów obrazu prostszy i bardziej niezawodny jest natywny lazy loading z loading="lazy"

Co jeszcze, poza obrazami, można ładować leniwie?

Ramki iframe

• Atrybut loading="lazy" działa też na ramkach iframe we wszystkich głównych przeglądarkach
• Osadzone mapy, formularze i treści zewnętrzne w ramkach iframe można odroczyć do chwili, gdy odwiedzający do nich przewinie
• Jest to szczególnie przydatne na stronach z osadzonymi mapami lub widżetami zewnętrznymi w dolnej części strony, bo często wiążą się z ciężkimi skryptami zewnętrznymi

Wideo

• Pliki wideo są znacznie większe niż obrazy i mogą mieć duży wpływ na początkowy czas ładowania, gdy są umieszczone poniżej pierwszego ekranu
• Lazy loading wideo wymaga podejścia opartego na JavaScript, bo natywny atrybut loading nie dotyczy elementów wideo
• Częstym podejściem jest załadowanie na początku tylko miniatury lub obrazu zastępczego i rozpoczęcie ładowania pliku wideo dopiero wtedy, gdy odwiedzający wejdzie z nim w interakcję lub do niego przewinie

Komponenty i sekcje

• W aplikacjach z dużą ilością JavaScript całe sekcje strony lub komponenty mogą być ładowane leniwie, czyli ich kod i treść nie są pobierane, dopóki odwiedzający nie dotrze do tej części strony
• To zaawansowana technika stosowana w złożonych aplikacjach internetowych i zwykle obsługiwana przez framework, a nie wdrażana ręcznie

Czego nie powinno się ładować leniwie?

Lazy loading poprawia wydajność, gdy jest stosowany prawidłowo, ale użyty w niewłaściwym miejscu powoduje problemy zamiast je naprawiać.

Obrazy na pierwszym ekranie

• Obraz główny, logo lub jakakolwiek wyeksponowana treść wizualna widoczna po pierwszym otwarciu strony musi ładować się natychmiast
• Zastosowanie lazy loading do obrazów na pierwszym ekranie opóźnia LCP, co pogarsza wyniki Core Web Vitals i doświadczenie odwiedzających
• Zasada jest prosta: wszystko, co jest widoczne bez przewijania, powinno ładować się natychmiast. Wszystko poniżej pierwszego ekranu można ładować leniwie

Obrazy blisko granicy pierwszego ekranu

• Obrazy tuż poniżej widocznego obszaru mogą pojawiać się szybko, gdy odwiedzający zacznie przewijać. Jeśli lazy loading jest stosowany zbyt agresywnie, te obrazy mogą jeszcze się ładować, gdy odwiedzający do nich dotrze, przez co na chwilę widoczny jest pusty zamiennik
• Natywny lazy loading radzi sobie z tym, stosując próg, czyli zaczynając ładować obrazy, zanim w pełni znajdą się w obszarze widoku, zamiast czekać do ostatniej chwili

Treści krytyczne na szybko ładujących się stronach

• Na stronach z bardzo małą ilością treści i tylko kilkoma obrazami sekwencja ładowania jest już szybka. Lazy loading dodaje w takich przypadkach złożoność bez znaczącej korzyści
• Lazy loading jest najcenniejszy na stronach z wieloma obrazami lub długą przewijaną treścią

Jak lazy loading wpływa na Core Web Vitals?

Lazy loading ma bezpośredni wpływ na dwa wskaźniki Core Web Vitals i, przy prawidłowym zastosowaniu, nie wpływa na trzeci.

Largest Contentful Paint (LCP)

• Lazy loading nigdy nie powinien być stosowany do elementu, który jest prawdopodobnym kandydatem na LCP, zwykle obrazu głównego
• Zastosowany prawidłowo, lazy loading zmniejsza liczbę zasobów rywalizujących o transfer podczas początkowego ładowania, co może poprawić LCP, pozwalając treści na pierwszym ekranie ładować się szybciej
• Zastosowany błędnie do obrazów na pierwszym ekranie, lazy loading bezpośrednio pogarsza LCP, opóźniając największy widoczny element

Interaction to Next Paint (INP)

• Zmniejszenie liczby obrazów ładowanych na początku oznacza mniej aktywności sieciowej rywalizującej z wykonywaniem JavaScript w krytycznym oknie ładowania
• Może to pośrednio zmniejszyć blokowanie głównego wątku i poprawić wyniki INP na stronach, które wcześniej ładowały wiele obrazów jednocześnie

Cumulative Layout Shift (CLS)

• Lazy loading nie wpływa bezpośrednio na CLS, ale leniwie ładowane obrazy bez zdefiniowanych atrybutów szerokości i wysokości mogą powodować przesunięcia układu podczas ładowania
• Zawsze ustawiaj jawne wymiary leniwie ładowanych obrazów, aby przeglądarka zarezerwowała odpowiednie miejsce, zanim obraz się załaduje

Pełne omówienie tego, jak ocenia się LCP, INP i CLS i jakie są progi, znajdziesz w artykule czym są Core Web Vitals.

Czy lazy loading wpływa na SEO?

Przy prawidłowym wdrożeniu lazy loading nie szkodzi SEO i może przyczynić się do lepszych wyników w wyszukiwarce dzięki lepszym wynikom szybkości strony.

Jak wyszukiwarki traktują treści ładowane leniwie

• Roboty wyszukiwarek renderują strony podobnie jak przeglądarki i potrafią indeksować treści ładowane leniwie
• Obrazy ładowane leniwie nadal można skanować i mogą pojawiać się w wynikach wyszukiwania obrazów
• Korzyść dla SEO wynika głównie z poprawy szybkości, którą umożliwia lazy loading. Strony z lepszymi wynikami Core Web Vitals, które lazy loading może pomóc poprawić, mają przewagę rankingową

Tekst alternatywny nadal obowiązuje

• Leniwie ładowane obrazy wymagają takiego samego tekstu alternatywnego jak każdy inny obraz. Atrybut alt powinien zawierać opis obrazu niezależnie od tego, czy jest ładowany leniwie
• Wskazówki, jak pisać skuteczny tekst alternatywny, znajdziesz w artykule jak używać obrazów na swojej stronie

Jak dodać lazy loading do swojej strony?

Dla pojedynczych obrazów w HTML

• Dodaj loading="lazy" do każdego znacznika obrazu poniżej pierwszego ekranu
• Upewnij się, że każdy leniwie ładowany obraz ma jawne atrybuty width i height, aby zapobiec przesunięciom układu podczas ładowania obrazów
• Nie dodawaj loading="lazy" do obrazu głównego ani żadnego obrazu widocznego bez przewijania

Przez platformę strony

• Wiele kreatorów stron stosuje lazy loading automatycznie do obrazów poniżej pierwszego ekranu, bez ręcznego wdrożenia
• Sprawdź dokumentację wydajności swojej platformy, by potwierdzić, czy robi to automatycznie, zanim dodasz to ręcznie

Pełny przewodnik po optymalizacji obrazów poza lazy loading, w tym o formatach plików, kompresji i responsywnych rozmiarach, znajdziesz w artykule jak zoptymalizować obrazy, aby szybciej się ładowały.

Jak WEMASY radzi sobie z lazy loading

Kreator stron WEMASY automatycznie stosuje lazy loading do obrazów poniżej pierwszego ekranu na wszystkich stronach. Obrazy na pierwszym ekranie, w tym obrazy główne i każda treść widoczna bez przewijania, są wyłączone z lazy loading, więc renderują się natychmiast. Obrazy są też domyślnie serwowane ze zdefiniowanymi wymiarami, co zapobiega przesunięciom układu, gdy leniwie ładowane obrazy trafiają na swoje miejsce.

Lazy loading działa razem z kompresją obrazów i dostarczaniem przez CDN w każdym pakiecie WEMASY. Te trzy usprawnienia razem zmniejszają zarówno początkową wagę strony, jak i czas dostarczania obrazów, co bezpośrednio przyczynia się do szybszego LCP i lepszych wyników Core Web Vitals w panelu analityki.

Zobacz, co zawiera kreator stron WEMASY, albo sprawdź dostępne pakiety na stronie z cennikiem.

Najczęściej zadawane pytania