Jak „leniwe obrazki” pomagają w szybszym ładowaniu?

Co należy zrobić, żeby strona ładowała się szybciej? Jak nie stracić ani potencjalnych klientów, ani pozycji w wynikach wyszukiwania? Jedną z metod, która pomoże rozwiązać problem wolnego ładowania,  jest Lazy Loading. Co oznacza ta strategia i jak ją wdrożyć, przeczytaj poniżej.

Lazy loading – informacje podstawowe

Lazy loading to technika, która pozwala obrazkom „załadować się” dopiero wtedy, gdy są potrzebne. Innymi słowy – jeśli wiadomo, że część zdjęć będzie niewidoczna po wejściu na stronę – można opóźnić nieco ich ładowanie. Dzięki temu reszta strony wczyta się sprawniej i internauta szybciej jest w stanie zapoznać się z jej treścią. A te wstępnie niewidoczne obrazy trzeba doładować w momencie, gdy internauta do nich „zeskrolluje”.

Jak technologia opóźnionego ładowania wygląda w praktyce?

Przygotowaliśmy dla Ciebie dwie strony z przykładami:

Zwróć uwagę, że w drugim przykładzie, po przejechaniu do niewidocznych obrazków, potrzebują one kilku chwil na załadowanie się. Nie martw się! Na potrzeby przykładu specjalnie opóźniliśmy czas doładowania, abyś mógł zapoznać się z mechanizmem.

Typowy lazy loading pozwala na doładowanie zdjęć w tle, aby internauta mógł korzystać ze strony całkowicie komfortowo 😊

Kiedy warto się zainteresować tematem?

Czy faktycznie opłaca Ci się wprowadzać takie zmiany? Nie w każdym przypadku!

Sprawdź najpierw, ile oszczędności możesz uzyskać, stosując technikę leniwego ładowania. Wykorzystaj w takim przypadku audyty Lighthouse. Raport dotyczący zastosowania mechanizmu lazy loading znajdziesz w sekcji Wydajność (Performance). Namierz test „Opóźnij niewidoczne obrazy” („Defer offscreen images”). Nie sugeruj się jednak kolorem, czy faktem, że Lighthouse test przeszedł. Zawsze wyświetl szczegóły i sprawdź, czy na liście znajdują się przykładowe obrazy!

Audyt  Lighthouse strony internetowej

Przykład audytu strony

Jeśli obrazków jest sporo i ważą dużo – powinieneś pomyśleć o wdrożeniu na swojej stronie mechanizmu lazy loading.

Pamiętaj!
Audyt Google Lighthouse stosuje amerykański format liczb. 1,863 KB oznacza, że możesz zaoszczędzić prawie dwa tysiące kilobajtów. To aż 2 megabajty, a więc całkiem sporo!

Jakie strony w serwisie sprawdzić?

Możliwie dużo.

To nie żart, wybierz przynajmniej jedną podstronę z różnych typów. Jeśli prowadzisz sklep internetowy możesz wybrać do sprawdzenia:

  • stronę główną,
  • stronę kategorii,
  • stronę wyszukiwania,
  • stronę produktową (albo lepiej kilka stron – z mniejszą i większą liczbą zdjęć poglądowych),
  • wpis na blog (jeśli oczywiście prowadzisz),
  • kontakt,
  • strony pomocnicze („o nas”, „media”),
  • landing page kampanii promocyjnych (jeśli jakieś posiadasz).

Pamiętaj!
Raport Google Lighthouse możesz wygenerować w SEMSTORM, w sekcji Audyty dla wszystkich wybranych stron, lub bezpośrednio w przeglądarce Google Chrome – dla każdej strony oddzielnie.

 

Jak „włączyć” lazy loading?

Uważaj!
Wszystkie modyfikacje, które robisz na swojej stronie, musisz zawsze dokładnie przetestować! Wprowadzanie jakichkolwiek zmian robisz na swoje ryzyko. Nieumiejętne zmiany mogą doprowadzić do wielu problemów, w skrajnych sytuacjach nawet do awarii Twojej strony!

 

Jeśli korzystasz z CMSów lub platform sklepowych do zarządzania stroną masz ułatwione zadanie. Zazwyczaj wystarczy, byś ściągnął i skonfigurował odpowiednią wtyczkę. Niestety nie jesteśmy w stanie zagwarantować Ci, że te wtyczki spełniają wymagania Google i pozwalają zaindeksować zdjęcia. Pamiętaj więc, aby po każdej zmianie przetestować swoją stronę.

Platforma

Wtyczka

Wordpress/Woocommerce

https://wordpress.org/plugins/a3-lazy-load/ (darmowe)

Joomla

https://extensions.joomla.org/extension/lazy-load-for-joomla/ (darmowe)

https://extensions.joomla.org/extension/jslazyloading/ (płatne)

Drupal

https://www.drupal.org/project/lazy

Magento

https://www.weltpixel.com/magento-2-lazy-load-product-extension.html (darmowe)

https://www.mgt-commerce.com/magento-lazy-load-images.html (darmowe)

Presta

https://addons.prestashop.com/pl/wydajnosc-strony/19225-lazy-loading-load-your-images-on-demand.html (płatne)

https://addons.prestashop.com/pl/wydajnosc-strony/29672-lazy-load-speed-up-page-loading-times.html (płatne)

Open Cart

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=6416 (darmowe)

Jeśli natomiast nie masz możliwości ściągnięcia gotowej wtyczki – zazwyczaj masz jeszcze możliwość modyfikacji skórki. W takim wypadku najlepiej posłużyć się gotowym skryptem:

Możesz także skorzystać z dodatkowych materiałów źródłowych:

Jak sprawdzić, czy wprowadzone zmiany odniosły skutek?

Możesz spróbować sprawdzić to ręcznie, szybko przewijając stronę do wybranego obrazka. Zadanie jest jednak niewygodne, karkołomne i w dodatku bezsensowne. Na rynku są bowiem narzędzia, które sprawdzą poprawność opóźnionego ładowania za Ciebie. Jednym z nich jest wspomniany wcześniej Google Lighthouse i test „Opóźnij niewidoczne obrazy”

Gdy lazy loading jest aktywny, powinieneś widzieć pustą listę, jak poniżej:

Audyt na stronie z aktywnym lazy loading

Jak leniwe ładowanie wpływa na SEO?

W przypadku, gdy jest zrobione poprawnie i zgodnie z zasadami – Googlebot nie powinien mieć problemu, aby takie obrazki zaindeksować[1].

Sprawa z rozpoznawaniem zdjęć ładowanych przez lazy loading jest dość nowa. 7 maja 2019 roku Google oficjalnie poinformowało na swoim blogu, że robot indeksujący strony korzysta ze znacznie nowocześniejszej technologii niż poprzednio. Jedną w prowadzonych zmian było właśnie indeksowanie obrazków leniwo ładowanych.

Więcej na ten temat przeczytasz tutaj.

Mimo tego pamiętaj, by zawsze uważnie testować wszystkie wprowadzone zmiany. Jeśli masz jakiekolwiek wątpliwości czy Twoje zmiany są zgodne z wytycznymi Google – wprowadź zmiany tylko na jednej z wybranych podstron. Następnie sprawdź, czy wszystko ze stroną jest OK.  Informację, jak to zrobić znajdziesz w oficjalnej pomocy Google.

Autor

Milena Majchrzak's picture

Milena Majchrzak

Analizą dużych ilości informacji zajmuje się od 2010 roku, gdy pracowała jako jedyna w Polsce specjalistka od Adobe Analytics. Wcześniej doskonaliła warsztat tworzenia portali i webaplikacji. Koordynuje różne procesy, ogarnia sprawy organizacyjne, jest odpowiedzialna za komunikację i sprzedaż. Chętnie dzieli się wiedzą i doświadczeniami.

Przeczytaj także

Komentarze