Lazy loading w e-commerce: 3 błędy, które zabijają szybkość strony
Wydajność strony to dzisiaj nie opcja, a warunek przetrwania w e-commerce. Każda dodatkowa sekunda ładowania to utrata nawet 7% konwersji – te dane zna każdy. Ale diabeł tkwi w szczegółach. Lazy loading, czyli leniwe ładowanie obrazów i treści, miał być remedium na ciężkie strony. W teorii: ładuj tylko to, co widzi użytkownik, resztę dokładaj w tle. W praktyce, widzę to samo w kółko – błędy implementacji, które sprawiają, że strona działa wolniej niż bez lazy loadingu.
1. Ładowanie zbyt wielu obrazów naraz – brak progów i buforowania
Najczęstszy błąd, który wywraca ideę lazy loadingu na nice. Wyobraź sobie sklep z 50 produktami na liście kategorii. Każdy ma miniaturę, a pod nią drugi obrazek przy hoverze. Deweloper wdraża lazy loading, ale ustawia próg na „100 pikseli przed wejściem w viewport”. Efekt? Gdy użytkownik scrolluje, przeglądarka natychmiast wysyła zapytania o wszystkie obrazki, które mają się pojawić w najbliższej chwili. Przy szybkim scrollowaniu może to być kilkanaście, a nawet kilkadziesiąt żądań jednocześnie. Serwer dostaje uderzenie, klient czeka na odpowiedź, a strony się nie renderują.
Rozwiązanie: stosuj inteligentne progi. Używaj Intersection Observer API z threshold 0.1 i rootMargin nie większym niż 200px. Dla list produktów warto dodać opóźnienie – np. ładowanie obrazków dopiero po 100ms zatrzymania scrolla. Biblioteki jak lazysizes czy lozad.js radzą sobie z tym automatycznie, ale trzeba to skonfigurować. W JurskiTech często używamy skryptu, który grupuje zapytania i priorytetyzuje obrazki w zależności od pozycji na stronie.
Kolejna kwestia – obrazki poniżej folda na stronie głównej. Jeśli masz sekcję „polecane produkty” schowaną za przyciskiem „pokaż więcej”, nie ładuj jej obrazków na starcie. Pokazałem to klientowi z branży fashion, który miał 30 produktów na pierwszym ekranie (bo slider) – po zmianie strategii lazy loadingu czas ładowania spadł z 4.2s do 2.1s. Konwersja wzrosła o 12%.
2. Lazy loading dla wszystkich zasobów bez wyjątków
To klasyk: deweloperzy wrzucają lazy loading na wszystko, co się rusza – obrazki, iframe, filmy, a nawet fonty. Problem? Niektóre zasoby są krytyczne. Jeśli twoje logo w headerze ładuje się leniwie, przez chwilę strona wygląda jak pusta kartka. Albo gdy główne zdjęcie produktu – to, które decyduje o kliknięciu – pojawia się z opóźnieniem, bo jest podpięte pod lazy loading.
Zasady:
- Obrazki widoczne w pierwszym viewporcie (hero image, logo, pierwsze produkty na liście) ładuj normalnie, bez lazy loadingu. Użyj atrybutu
loading="eager"i dodaj preload przez link rel=”preload”. - Dla obrazków tła CSS – jeśli to tło sekcji hero, też nie powinno być leniwe. Z kolei tła głębiej na stronie można spokojnie przełożyć na lazy loading przez JavaScript.
- Filmy i iframe – tak, ale dodaj placeholder lub prostą miniaturę, żeby użytkownik widział, co tam będzie.
Przykład z życia: startup z subskrypcją żywności miał problem – strona główna zawierała 10 sekcji, każda z obrazkiem. Lazy loading na wszystkich spowodował, że przy pierwszym wejściu widać było tylko szare prostokąty, reszta dokładała się z opóźnieniem 2-3 sekund. Usunęliśmy lazy loading z pierwszych 3 sekcji (też hero, USP, CTA) i dodaliśmy preload. Od razu poprawił się First Contentful Paint i wrażenie szybkości.
3. Ignorowanie Core Web Vitals i interakcji użytkownika
Lazy loading bez patrzenia na Cumulative Layout Shift (CLS) to proszenie się o katastrofę. Gdy obrazki ładują się z opóźnieniem, a nie zarezerwowałeś dla nich miejsca, strona skacze, użytkownik klika w reklamę zamiast w produkt – masz problem.
Jak to naprawić:
- Zawsze ustawiaj atrybuty
widthiheightna obrazkach – nawet przy lazy loadingu. Nowoczesne przeglądarki potrafią na ich podstawie obliczyć proporcje i zarezerwować miejsce. - Używaj CSS
aspect-ratio– to kolejny sposób na uniknięcie skoków. Jeśli obrazek ma się zmieniać (np. responsive images z srcset), nadal możesz ustawić fixed aspect ratio, a obrazek dopasuje się do ramki.
Drugi aspekt – interakcja. Lazy loading nie powinien blokować kliknięć. Często spotykam się z sytuacją, gdzie galeria produktów ładuje leniwie kolejne zdjęcia dopiero po kliknięciu w miniaturę. To spowalnia UX. Lepsze rozwiązanie: preloaduj obrazy w tle po załadowaniu strony, ale z niskim priorytetem. Możesz też użyć Intersection Observer z rootMargin: 500px dla galerii, żeby przygotować zdjęcia na kilka kliknięć do przodu.
Praktyczna rada: użyj narzędzia Lighthouse i sprawdź CLS. Jeśli masz powyżej 0.1 – szukaj winnych obrazków. W jednym z audytów dla sklepu z elektroniką, CLS wynosił 0.4 tylko przez złe wymiary w lazy loadingu. Po dodaniu atrybutów spadł do 0.02.
Podsumowanie
Lazy loading to potężne narzędzie, ale wymaga myślenia. Nie wystarczy wrzucić bibliotekę i uznać, że działa. Musisz:
- Ustawić odpowiednie progi i grupowanie żądań.
- Wykluczyć zasoby krytyczne z leniwego ładowania.
- Zapewnić stabilność layoutu przez rezerwację miejsca.
W JurskiTech każde wdrożenie audytujemy pod kątem tych trzech obszarów. Efekt? Strony e-commerce, które szybko się ładują, nie skaczą i konwertują lepiej. Jeśli twoja strona ma problemy z wydajnością, warto przyjrzeć się lazy loadingowi – często jest źródłem problemu, a nie rozwiązaniem.
Pamiętaj: użytkownik nie wie, co to lazy loading, ale wie, że strona działa wolno. Nie daj mu tego odczuć.
