Długi czas ładowania strony to jedna z najważniejszych przyczyn porzucania koszyków w sklepach internetowych*. Jeśli obawiasz się, że potencjalni klienci zrezygnują z zakupów, bo irytuje ich opieszale działająca strona, zadbaj o wdrożenie lazy loading. Wbrew pozorom „leniwe ładowanie” sprawia, że sklep osiąga wyższą wydajność, satysfakcjonując użytkowników. Przeczytaj, jak działa lazy loading w e-commerce.
Z tego wpisu dowiesz się:
- czym jest lazy loading,
- dlaczego jest to ważny element serwisu e-commerce,
- jak wdrożyć "leniwe ładowanie" w sklepie internetowym,
- jak sprawdzić szybkość ładowania strony.
Lazy loading – co to jest?
Lazy loading („leniwe ładowanie”) to metoda optymalizacji ładowania zawartości strony internetowej w celu zwiększenia wydajności witryny i polepszenia doświadczeń użytkowników. Dzięki lazy loading zasoby, które są najważniejsze dla odbiorcy, wyświetlają się w pierwszej kolejności. Dopiero potem następuje pobieranie pozostałych elementów.
Lazy loading na Pintereście sprawia, że zdjęcia nie ładują się, dopóki użytkownik nie przescrolluje zawartości ekranu. Źródło: Pinterest
Jak działa lazy loading w e-commerce? Klienci sklepu internetowego najpierw oglądają zawartość w polu above the fold. To obszar widoczny w przeglądarce desktopowej lub mobilnej przed scrollowaniem. Każdy ruch scrollem w myszce bądź przeciągnięcie palcem po ekranie wywołuje błyskawiczne ładowanie kolejnych elementów. Z tego względu lazy loading nazywa się także on-demand loadingiem, czyli ładowaniem na żądanie.
Kolejne rzędy produktów w sklepie odzieżowym ładują się wraz ze scrollowaniem podstrony kategorii. Źródło: Poszetka
Dlaczego lazy loading ma znaczenie w e-commerce?
Technika lazy loading zapobiega wysokiemu współczynnikowi odrzuceń w sklepie internetowym. Wyobraź sobie sytuację, w której konsument otwiera kartę produktową, ale nie widzi od razu np. galerii zdjęć asortymentu, więc błyskawicznie opuszcza witrynę. W tym scenariuszu przyczyną utraty klienta może być przyznanie priorytetu ładowaniu elementów zlokalizowanych w dolnej części strony, do której użytkownik nawet nie dociera.
Gdyby nie lazy loading, galeria zdjęć mogłaby się wyświetlić dopiero po załadowaniu elementów w dolnej części podstrony, która jest niewidoczna w polu above the fold. Źródło: Media Expert
Co istotne, lazy loading oszczędza zasoby i odciąża sieć po stronie zarówno sklepu internetowego, jak i konsumentów. Leniwe ładowanie wyklucza pobieranie zawartości, do której użytkownik nie dotarł.
Lazy loading w sklepie internetowym a infinite scroll
Co ważne, lazy loading w sklepie internetowym można połączyć z techniką infinite scroll (endless scroll), czyli nieskończonego przewijania. To rozwiązanie jest powszechnie znane dzięki mediom społecznościowym. Kiedy używasz Facebooka, Instagrama czy LinkedIna, nie wybierasz kolejnej podstrony z listy. Posty wyświetlają się automatycznie, kiedy scrollujesz feed. Analogicznie można przeglądać setki produktów w obszernej kategorii. Infinite scroll w e-commerce zastępuje klasyczną paginację, czyli numerowaną listę adresów URL, która znajduje się przeważnie na dole kategorii produktowej. Dzięki połączeniu infinite scroll z lazy loading zyskujesz pewność, że konsumenci nie rozczarują się wolno ładującymi się miniaturkami produktów.
Infinite scroll w połączeniu z lazy loading umożliwia płynne przeglądanie produktów na podstronie kategorii pozbawionej paginacji. Źródło: x-kom
Możesz rozważyć również kompromis między tradycyjną paginacją a infinite scroll, którym jest przycisk umożliwiający załadowanie określonej liczby produktów na podstronie kategorii. W tym przypadku klient może przescrollować płynnie np. 30 pozycji. Kiedy kliknie button, odkryje kolejne 30 produktów, lecz pozostanie na tej samej stronie.
Lazy loading w sklepie internetowym a SEO
Szybkość ładowania strony ma znaczenie zarówno pod kątem UX (user experience), czyli doświadczenia użytkownika, jak i pod kątem pozycjonowania sklepu internetowego. Jak można przeczytać w raporcie „Ranking Factors ‘24” Semrush, czas ładowania strony nie jest wskaźnikiem wpływającym bezpośrednio na pozycje strony w wynikach wyszukiwania Google’a. Niemniej Core Web Vitals, które są związane z szybkością ładowania witryny, odzwierciedlają doświadczenia użytkowników i oddziałują na ranking. To stanowisko jest potwierdzone w oficjalnym centrum pomocy Google Search Console.
Badanie Semrush ujawniło największą korelację między pozycjami w TOP 20 a metrykami, takimi jak:
- FID (First Input Delay) – opóźnieniem przy pierwszym działaniu, czyli czasem mijającym od pierwszej akcji użytkownika do chwili reakcji przeglądarki na tę aktywność. Uwaga – wskaźnik FID został zastąpiony wskaźnikiem INP (Interaction to Next Paint), mierzącym czas od akcji użytkownika do zauważalnej zmiany na stronie.
- TBT (Total Blocking Time) – czasem „zablokowania” strony dla użytkownika przez długotrwałe operacje w tle. To okres, który upływa od pierwszego wyrenderowania treści (mierzonego wskaźnikiem FCP, czyli First Contentful Paint) do osiągnięcia pełnej interaktywności przez witrynę.
Lazy loading wpływa też na wskaźnik LCP (Largest Contentful Paint), czyli czas renderowania największej zawartości strony internetowej, np. zdjęcia, w obszarze widocznym dla użytkownika. LCP nie powinien przekraczać 2,5 s. Wynik między 2,5 a 4 s jest sklasyfikowany jako alarmujący, a powyżej 4 s – jako słaby.
Core Web Vitals były wielokrotnie aktualizowane, m.in. ze względu na zewnętrzne zakłócenia, które były niezależne od właścicieli stron internetowych, a wpływały na metryki.
Jak wdrożyć lazy loading w sklepie internetowym?
Lazy loading to skrypt JavaScript umieszczony w kodzie strony. Jeśli brakuje Ci wiedzy umożliwiającej swobodną modyfikację kodu, możesz skorzystać z wtyczek kompatybilnych z CMS-em, czyli systemem zarządzania treścią, np. WordPressem, bądź platformą e-commerce SaaS.
Zdarza się, że dany szablon lub system ma automatycznie wdrożony lazy loading. Niestety, istnieje ryzyko, że gotowe rozwiązanie nie będzie działać w pożądany sposób, ponieważ opóźni wyświetlanie priorytetowych elementów, zamiast przyspieszyć ich ładowanie. W związku z tym warto skonsultować wdrożenie lazy loading w sklepie internetowym z agencją marketingową, która może także wyeliminować błędy wydłużające czas ładowania strony.
Lazy loading można wdrożyć również w kodzie HTML w przypadku pojedynczych obrazów na stronie internetowej, np. w poradniku blogowym. Źródło: W3Schools
Jak sprawdzić szybkość ładowania strony?
Czas ładowania sklepu internetowego można sprawdzić za pomocą PageSpeed Insights. To bezpłatne narzędzie od Google’a, które ocenia m.in. podstawowe wskaźniki internetowe strony w wersji mobilnej (na komórki) i desktopowej (na komputer stacjonarny). Wyniki analizy zawierają elementy wymagające ulepszenia i podpowiedzi dotyczące działań w witrynie. PageSpeed Insights szacuje także potencjalne oszczędności, co ułatwia wyznaczenie kolejności wdrażania poprawek.
Informacje o podstawowych wskaźnikach internetowych wyświetlisz również w Google Search Console. Wystarczy, że przejdziesz do sekcji „Eksperymenty i personalizacja”, a następnie wybierzesz „Podstawowe wskaźniki internetowe”. Narzędzie umożliwi Ci pobranie dwóch raportów: obejmujących wydajność strony na urządzeniach mobilnych oraz w wersji na komputery. Dane, które zbiera GSC, odzwierciedlają, czego doświadczają rzeczywiści użytkownicy Twojego sklepu internetowego.
Analiza podstawowych wskaźników internetowych, które wpływają na szybkość ładowania strony. Źródło: PageSpeed Insights
Dlaczego strony długo się ładują?
Jak poprawić szybkość ładowania strony internetowej, która nie wyświetla zawartości nawet przez kilka sekund? Najczęstsze błędy są związane z plikami graficznymi o zbyt dużej rozdzielczości, wysyłaniu setek – a nawet tysięcy – zapytań do serwera na sekundę lub instalowaniem i aktywowaniem zbędnych wtyczek. Jeżeli chcesz się dowiedzieć, co spowalnia Twój sklep internetowy, zaloguj się do Google Search Console i sprawdź podstawowe wskaźniki internetowe. W przypadku braku GSC możesz wykorzystać PageSpeed Insights.
Lazy loading w sklepie internetowym – najważniejsze informacje
- Lazy loading przyspiesza ładowanie zawartości sklepu internetowego, ponieważ narzuca priorytet treściom, które w pierwszej kolejności powinny się wyświetlić konsumentowi. Kolejne elementy są ładowane wraz ze scrollowaniem strony.
- Lazy loading w połączeniu z infinite scroll zapewnia dynamiczne wyświetlanie zawartości strony internetowej – bez konieczności ręcznego wybierania kolejnych podstron. To rozwiązanie stosuje się przede wszystkim na podstronach kategorii w e-commerce.
- Bezpłatne narzędzie PageSpeed Insights od Google’a oraz Google Search Console pozwalają na sprawdzenie szybkości ładowania sklepu internetowego i wykrycie elementów do poprawy.
Źródła:
* https://eizba.pl/wp-content/uploads/2018/11/RAPORT-PorzuconyE-koszyk.pdf