Czym jest lazy loading i dlaczego warto się nim zainteresować w kontekście SEO?
(10 min czytania)
Wymagania wobec stron internetowych są coraz wyższe. Użytkownicy oczekują błyskawicznego załadowania się strony, a wyszukiwarki coraz bardziej doceniają strony spełniające wymagania użytkowników. Jednym z rozwiązań, które może znacząco poprawić szybkość ładowania się twojej strony i jej wydajność, jest właśnie lazy loading.
Co to jest lazy loading?
Lazy loading to technika optymalizacji wydajności stron www, która polega na opóźnieniu ładowania elementów, takich jak obrazy, filmy czy duże bloki tekstu, do momentu, gdy są one rzeczywiście potrzebne użytkownikowi. Zamiast ładować je wszystkie jednocześnie, przeglądarka odkłada ich wczytanie, aż znajdą się w obszarze widocznym na ekranie. Dzięki temu użytkownik może zacząć przeglądać treść strony znacznie szybciej, bez zbędnego oczekiwania na załadowanie wszystkich elementów.
Tak naprawdę lazy loading steruje ładowaniem mediów — obrazów, filmów, skryptów, ramek iframe (np. z video z YouTube), fontów — umieszczonych w kodzie strony. Multimedia ładują się dzięki niemu dopiero wtedy, gdy użytkownik przechodzi do konkretnej sekcji, a nie bezpośrednio po przejściu na docelowy adres WWW. Taki schemat działania przyspiesza proces ładowania się serwisu.
Choć samo pojęcie lazy loading w istocie powinno być rozumiane jako wolne ładowanie, z perspektywy rozwiązań z dziedziny SEO ma zupełnie inne konotacje. Tak naprawdę to nic innego, jak skrypt wprowadzony do kodu strony, który steruje ładowaniem mediów (obrazów i filmów) umieszczonych w kodzie strony. Multimedia ładują się dzięki niemu dopiero wtedy, gdy użytkownik przechodzi do konkretnej sekcji, a nie bezpośrednio po przejściu na docelowy adres WWW. Taki schemat działania przyśpiesza proces ładowania się serwisu i zachęca do skorzystania z niego, choć sama nazwa skryptu może być dość myląca.
Istotne z punktu widzenia właściciela strony internetowej będą rezultaty. A te są bardzo czytelne, ponieważ czas ładowania witryny powinien znacznie się skrócić. Wystarczy wyobrazić sobie sam proces działania strony.
Jeśli mamy do czynienia z rozbudowaną stroną o dużej ilości treści, ładowanie się wszystkich plików multimedialnych jednocześnie byłoby totalnym spalaniem jej zasobów. W przypadku wdrożenia skryptu lazy loading uruchamiane są sekwencje danych istotne dla wyjaśnienia określonego problemu lub tematu, który jest akurat rozpatrywany w witrynie. Dla użytkownika dane są dostarczane natychmiastowo, a jednocześnie nie ma on żadnej świadomości i nie ponosi żadnych konsekwencji tego, że pozostałe grafiki czekają na swój czas ładowania – nastąpi to dopiero wtedy, gdy się nimi zainteresuje, przewijając stronę.
Dlaczego skrypt lazy loading to dobre rozwiązanie?
Jeśli faktycznie analizujesz, kto odwiedza Twoją stronę internetową i jak się na niej zachowuje, to wiesz, że użytkownik nie zawsze spędza na niej dużo czasu i nie zagłębia się w strukturę linków i podstron, by wnikliwie przyjrzeć się ofercie czy produktom (a szkoda). Zwykle trafia od razu na stronę docelową (na pewno przy kampaniach Google Ads), sięga po informacje, realizuje swoją potrzebę i przechodzi dalej. Nie ma zatem sensu, by w czasie tej krótkiej obecności ładowały mu się wszystkie inne grafiki niezwiązane z celem jego wizyty.
Przykład
Kowalski poszukuje motoru. Zawsze o nim marzył, ale nigdy wcześniej nie było go stać na ten wydatek. Wreszcie uzbierał 20 tys. zł i jest gotowy na wybór wymarzonego modelu. Wchodzi zatem do wyszukiwarki i wpisuje „dobry motor do 20 tys. zł”.
W wynikach wyszukiwania pojawiają mu się:
- Multiwyszukiwarki z ofertami sprzedaży – sortuje w nich modele po wybranych parametrach. Otwiera kartę po karcie i przegląda oferty.
- Serwisy contentowe – poradniki dotyczące zakupu i wyboru motoru.
O ile w serwisie z ogłoszeniami Kowalski spędza sporo czasu, ponieważ musi wyselekcjonować idealny motor, o tyle w serwisie contentowym prawdopodobnie nie posiedzi dłużej niż 8-10 minut na jednej karcie artykułu i przejdzie dalej.
Istotne w tym przykładzie jest to, że nie ma konieczności ładowania dla Kowalskiego wszystkich zdjęć z danej podstrony serwisu contentowego – wystarczy oprawa graficzna artykułu. Nie musisz też dostarczać mu zdjęć wszystkich dostępnych modeli w multiwyszukiwarce. Przecież skusi go tylko kilka!
Lazy loading zbędnych zasobów to absolutny „must have” dla każdej strony internetowej, która chce serwować użytkownikom swój content w krótkim czasie. Warto pamiętać, że od lipca 2018 roku szybkość witryny jest oficjalnie jednym z czynników rankingowych przy ustalaniu pozycji mobilnych wyników wyszukiwania w Google’u, dlatego przy optymalizacji strony pod kątem SEO należy zwrócić uwagę na ten aspekt.
Wojciech Skąpski, Co-funder w IF.pl
Taki schemat działania, nazywany ładowaniem obrazów na żądanie, to najlepsze rozwiązanie dla zachowania komfortu użytkowania witryny oraz szybkości korzystania z niej. Zyskasz na czasie i otrzymasz wyższe oceny za jakość prowadzonego serwisu. Do uzyskania takiego efektu na swojej stronie możesz użyć narzędzia Ajax Load More. Dzięki niemu dodasz przycisk wczytywania się kolejnych postów i automatyczne przejście do dowolnej części strony. Rezygnujesz wówczas ze standardowej paginacji, udostępniając użytkownikowi rozwijaną listę, która jest ładowana po obejrzeniu określonego bloku tekstu czy grafik. Warto pamiętać, że za pomocą Ajaxa wygenerujesz także shortcode, który można dokleić do kodu strony.
Kiedy warto wdrożyć lazy loading?
Nie wszystkie strony internetowe wymagają implementacji lazy loading. Rozwiązanie to jest szczególnie przydatne w przypadku witryn posiadających dużą liczbę podstron, np. sklepów internetowych czy rozbudowanych serwisów stosujących infinite scroll (nieskończone przewijanie). Dla mniejszych stron wprowadzenie lazy loadingu może nie przynieść oczekiwanych korzyści.
Lazy loading a SEO
Szybkość ładowania witryny to nie tylko element, który budzi zadowolenie klientów. To także jeden z czynników rankingowych pozytywnie wpływających na ocenę pozycjonowanej strony. Zanim użytkownik ją zobaczy, przeglądarka musi wykonać na niej kilka kroków. Jeśli na którymś z etapów analizy coś pójdzie nie tak, w efekcie user będzie długo czekał na załadowanie się witryny.
Twoja strona składa się z zasobów typu: kod HTML, CSS i JS, który odpowiada za elementy graficzne. Aby użytkownik otrzymał gotowy widok, przeglądarka potrzebuje odczytać każdy z nich. Widok ze sporą ilością treści będzie więc wymagał dłuższego czasu ładowania witryny oraz scrollowania całej podstrony. To nie najlepsze rozwiązanie zarówno dla Ciebie, jak i dla użytkownika. User traci bowiem swój transfer na telefonie lub obciąża domowe łącze niepotrzebnie ładującymi się zasobami. Jako właściciel strony też na tym tracisz, gdy korzystasz z serwera, który ma ograniczony transfer lub dzierżawisz zasoby w zależności od intensywności ruchu na stronie.
Lazy loading ma zastosowanie głównie dla elementów graficznych i wideo, znajdujących się w dolnej części strony. Są to zazwyczaj najcięższe elementy strony internetowej – dla przykładu, przeciętnej wielkości zdjęcie o wadze 20 kB to 20 tys. znaków kodu. Opóźniając jego ładowanie, zyskujemy cenne milisekundy przy wyrenderowaniu pierwszego widoku, co ma odwzorowanie m.in. w wartościach statystyk Lighthouse: First Contentful Paint (FCP) oraz First Meaningful Paint (FMP), czynnikach używanych przez Google’a do oceny performance stron WWW.
Wojciech Skąpski, Co-funder w IF.pl
Powiedzmy sobie wprost – na większość czynników wpływających na szybkość ładowania witryny masz wpływ i możesz ten proces zdecydowanie przyspieszyć za pomocą określonych działań. Jako właściciel strony internetowej lub osoba odpowiedzialna za jej optymalizację, sprawdź serwer hostujący. Powinien mieć wydajność dopasowaną do wielkości witryny oraz panującego na niej natężenia ruchu. To podstawa, o którą należy zadbać podczas opracowywania serwisu.
Możesz wydać wiele pieniędzy na optymalizację strony i poświęcić sporo czasu na wdrożenia, ale jeśli serwer jest powolny, strona nie przyspieszy. Dlatego nie wybieraj pierwszego lepszego dostawcy hostingu!
Jak wdrożyć skrypt lazy loading?
Wdrożenie skryptu lazy loading polega na wprowadzeniu pewnych zmian w kodzie strony. Żeby to zrobić, można skorzystać z odpowiednich atrybutów HTML, gotowych wtyczek do CMS lub pluginów JS.
Natywny lazy loading
Nowoczesne przeglądarki internetowe, takie jak Chrome czy Firefox, wprowadziły natywne wsparcie dla lazy loading. Polega to na automatycznym wczytywaniu obrazów i iframe'ów dopiero wtedy, gdy są one potrzebne użytkownikowi. Wymaga to dodania prostych atrybutów HTML do znaczników obrazków i iframe'ów:
- loading="lazy" - powoduje leniwe wczytywanie elementu
- loading="eager" - wymusza natychmiastowe wczytanie elementu
Przykład użycia:
<img src="obraz.jpg" alt="Opis obrazu" loading="lazy"><iframe src="https:// przykladowa-strona.pl" loading="lazy"> </iframe>
Zaletą tego rozwiązania jest brak potrzeby pisania dodatkowego kodu JavaScript. Ponadto zmniejsza ono liczbę zasobów na stronie, co przyspiesza jej ładowanie.
Lazy loading oparte na JavaScript
Dla przeglądarek, które nie wspierają natywnego lazy loading, można zastosować rozwiązania oparte na JavaScript. Można to zrobić samodzielnie lub skorzystać z bibliotek, takich jak:
- Vanilla Lazyload
- lazysizes
- yall.js
Rozwiązania te pozwalają na bardziej zaawansowane dostosowanie lazy loading do potrzeb danej strony. Umożliwiają na przykład wczytywanie obrazków w różnych rozmiarach w zależności od wielkości wyświetlacza.
W skrypcie lazy loading nie powinieneś umieszczać grafik znajdujących się na górze strony (tzw. above the fold) oraz wszystkich logotypów „hero images”. Jeśli wdrożysz lazy loading dla grafik, które zostały umieszczone na górze strony, to zamiast od razu pokazać je użytkownikowi, skrypt będzie dodatkowo analizował proces, co oczywiście doprowadzi do opóźnień i zdecydowanego obniżenia jakości UX. Efekt takiej optymalizacji będzie odwrotny do zamierzonego.
Nieumiejętne zaimplementowanie lazy loading może spowodować, że w początkowym etapie renderowania strony użytkownikowi nie będą się pojawiały grafiki, a zawartość witryny będzie nieprawidłowo wyświetlana.Dlatego skrypt powinien wdrożyć programista lub specjalista SEO, który ma wiedzę na temat kodowania.
Gotowe wtyczki do wdrożenia lazy loading
Jeśli nie masz doświadczenia w programowaniu, warto rozważyć użycie gotowych wtyczek. Są one dostępne dla większości popularnych systemów zarządzania treścią, takich jak WordPress, Joomla, Drupal, Magento czy PrestaShop. Ich instalacja i konfiguracja są zazwyczaj bardzo proste i intuicyjne.
Wtyczki WordPress:
Wtyczki Drupal:
Wtyczki Magento:
Joomla:
Joomla 4 posiada wbudowaną funkcjonalność lazy loadingu, którą można aktywować bez konieczności instalacji dodatkowych wtyczek. By z niej skorzystać, przejdź w panelu administracyjnym do widoku System > Zarządzaj > Wtyczki. I aktywuj pozycję Content – ImageLazyLoading.
Niezależnie od wybranej techniki, lazy loading przyspiesza ładowanie stron internetowych, oszczędza transfer danych i poprawia doświadczenie użytkowników.
Po wdrożeniu lazy loading, ważne jest przeprowadzenie testów, aby upewnić się, że działa poprawnie na różnych przeglądarkach i urządzeniach. Monitoruj wydajność strony oraz metryki SEO, takie jak LCP (Largest Contentful Paint) i FID (First Input Delay), aby ocenić wpływ lazy loading na doświadczenia użytkowników i pozycjonowanie w wyszukiwarkach.
Lazy loading - przydatne wskazówki
Jeśli zauważysz problemy z ładowaniem się serwisu, to:
- zastosuj kompresję Gzip, która jest metodą kompresji plików HTML i CSS po stronie serwera. Jej użycie pozwala zaoszczędzić od 40 do nawet 80% oryginalnego rozmiaru pliku,
- weryfikuj i aktualizuj bazę danych, która powiększa się podczas aktualizacji i wdrożeń,
- zadbaj o buforowanie przeglądarek; serwer nie będzie musiał przesyłać wszystkich elementów witryny za każdym razem, gdy użytkownik ją odwiedzi, ponieważ część z nich będzie zapisana w pamięci podręcznej,
- pozbądź się wszystkich zbędnych skryptów i pluginów, które nie mają wpływu na prawidłowe działanie strony.
Artykuł został oryginalnie napisany przez Dominika Olszewskiego, zaktualizowany przez zespół WhitePress®.
Copywriter
