Co to jest lazy loading i jak wpływa na pozycjonowanie?

Czym jest lazy loading?

Odciąża to serwer i pozwala na szybsze załadowanie się witryny, ponieważ użytkownik widzi tylko jej fragment, a nie całą zawartość.

Przykład:

Firma oferująca usługi remontowe wdrożyła lazy loading. Gdy użytkownik otwiera jej stronę, widzi w pierwszej kolejności slogan oraz tło z dużym zdjęciem. Dopiero przewijając stronę w dół, zobaczy pozostałe sekcje, np. przykłady realizacji, opinie klientów czy dane kontaktowe, które wczytają się w odpowiednim momencie.

Lazy loading – najważniejsze korzyści

Lazy loading cieszy się dużą popularnością ze względu na liczne korzyści. Do najważniejszych zalet tej techniki należą:

• szybsze ładowanie strony – zasoby wczytują się dopiero wtedy, gdy są potrzebne, co zmniejsza obciążenie serwera i skraca czas wyświetlania kluczowych treści;
• mniejsze zużycie danych – użytkownicy pobierają tylko te elementy, które faktycznie oglądają, co jest korzystne zwłaszcza dla urządzeń mobilnych z ograniczonym dostępem do internetu;
• lepsze doświadczenia użytkownika (UX) – kluczowe elementy strony pojawiają się szybciej, zmniejszając ryzyko jej opuszczenia przed pełnym załadowaniem;
• wpływ na SEO – poprawa wskaźników, takich jak współczynnik odrzuceń, średni czas spędzony na stronie i liczba odsłon na sesję, co może przełożyć się na lepsze pozycjonowanie;
• możliwy wzrost konwersji – dzięki szybszemu ładowaniu i lepszemu UX użytkownicy chętniej podejmują pożądane działania, np. dokonują zakupów.

Lazy loading może być szczególnie istotny dla rozbudowanych, bogatych w multimedia serwisów. Mowa tu np. o portalach informacyjnych czy stronach z dużymi galeriami zdjęć, które dzięki zastosowaniu tej techniki będą ładowały się dużo szybciej i tym samym spełnią oczekiwania użytkowników.

Lazy loading a SEO

Należy jednak pamiętać, że kluczem do sukcesu jest odpowiednie wdrożenie on-demand loading. Wszelkie błędy mogą bowiem skutkować problemami z indeksacją treści, ponieważ część z nich nie będzie natychmiast widoczna dla robotów Google. W efekcie np. zawartość zawierająca słowa kluczowe może nie zostać zaindeksowana, co negatywnie wpłynie na pozycjonowanie witryny.

Jak wdrożyć on-demand loading?

Chcąc prawidłowo wdrożyć on-demand loading, należy w pierwszej kolejności określić, które elementy mają być ładowane „leniwie”. Powinny być to przede wszystkim zasoby najbardziej obciążające serwer i wydłużające proces wczytywania się strony, które nie są natychmiast potrzebne użytkownikowi. Mowa tu np. o galeriach zdjęć czy materiałach wideo. Nie należy natomiast opóźniać kluczowych treści, takich jak logo, banery czy nagłówki H1.

Wdrożenie lazy loading jest możliwe na kilka sposobów.

Natywne lazy loading w HTML5

To najprostsza metoda, która polega na dodaniu do wybranego elementu atrybutu loading=”lazy”. Jest on wspierany przez większość nowoczesnych przeglądarek i dobrze współpracuje z robotami Google. Efektem takiego działania jest automatyczne wczytywanie się obrazów oraz innych danych w momencie, gdy są one potrzebne użytkownikowi strony. Największą zaletą jest brak konieczności pisania dodatkowego kodu JavaScript, co mogłoby się okazać czasochłonne i wymagające – zwłaszcza dla osób bez doświadczenia.

Jak wygląda zastosowanie natywnego lazy loading w praktyce? Dla obrazu kod HTML wygląda następująco:

Jeżeli chcesz wymusić natychmiastowe ładowanie obrazu niezależnie od jego pozycji na stronie, zamiast powyższego atrybutu możesz zastosować loading=”eager”. Inną opcją jest loading=”auto”, który pozostawia decyzję o sposobie ładowania danych przeglądarce.

Lazy loading za pomocą JavaScript

Metoda ta sprawdza się, gdy przeglądarka nie wspiera natywnego lazy loading, chcesz zyskać większą kontrolę nad ładowaniem treści albo używasz na stronie niestandardowych elementów, jak np. zaawansowane widżety. W takiej sytuacji możesz skorzystać z gotowych skryptów i bibliotek.

Najlepszym przykładem jest tu Intersection Observer API, który nie wymaga pisania kodu sprawdzającego pozycję każdego z elementów i zapewnia pełną kontrolę nad ich widocznością. Aby go użyć, wystarczy dodać odpowiedni kod do pliku JavaScript.

W skrypcie lazy loading nie należy umieszczać grafik zlokalizowanych na górze strony, ponieważ skrypt, zamiast wczytać je natychmiast, będzie dodatkowo analizować proces. W efekcie wczytywanie strony może zostać znacząco wydłużone.

Lazy loading za pomocą CMS

Jeżeli korzystasz z popularnych systemów zarządzania treścią, możesz użyć odpowiednich wtyczek, narzędzi lub wbudowanych funkcji. Pozwala to dużo prościej zaimplementować lazy loading, bez konieczności ingerencji w kod witryny.

• Dla WordPressa najbardziej polecane są a3 Lazy Load i Lazy Load by WP Rocket.
• Dla Joomli najbardziej polecane są Lazy Load for Jooma oraz JCH Optimize.

W WordPressie, od wersji 5.5, zostało wprowadzone natywne lazy loading, co oznacza, że obrazy ładują się leniwie automatycznie, bez konieczności instalowania dodatkowych wtyczek czy modyfikowania kodu.