LCP w e-commerce: Jak przestać optymalizować zły element?
Myślisz, że główny baner to Twój LCP? Możesz się mylić. Zobacz, dlaczego optymalizacje Core Web Vitals często zawodzą i jak zidentyfikować prawdziwe wąskie gardło, zwłaszcza na platformach z customizacją layoutu.
Spędzasz tygodnie na optymalizacji Largest Contentful Paint (LCP), kompresujesz obrazki, a wskaźniki w PageSpeed Insights ani drgną? Prawdopodobnie optymalizujesz nie ten element, co trzeba. To częsta i kosztowna pomyłka, która wynika z niezrozumienia, jak przeglądarka faktycznie identyfikuje LCP na stronach e-commerce, zwłaszcza tych o zmiennym układzie.
Zły LCP, czyli jak przeglądarka widzi Twój sklep
Case study platformy e-commerce Nuvemshop doskonale ilustruje ten problem. Zespół przez rok pracował nad poprawą Core Web Vitals, początkowo skupiając się na typowych winowajcach: wadze obrazów i opóźnieniach serwera. Mimo wysiłków, efekty były mizerne. Dopiero głębsza analiza pokazała, że problem leżał gdzie indziej — w sposobie, w jaki przeglądarka wybierała element LCP.
Na platformie Nuvemshop sklepy mogą dowolnie konfigurować układ strony głównej, umieszczając karuzele, banery i siatki produktów w różnej kolejności. Okazało się, że przejścia CSS (np. efekt fade-in) stosowane w karuzelach i banerach opóźniały ich widoczność dla mechanizmu detekcji LCP. W efekcie, chociaż użytkownik widział karuzelę jako pierwszą, przeglądarka często oznaczała jako LCP element znajdujący się znacznie niżej — na przykład siatkę produktów, która nie miała animacji i renderowała się bez opóźnień. Cała energia zespołu szła w optymalizację zasobów, które nigdy nie były wąskim gardłem.
Zidentyfikowano trzy główne przyczyny błędnej detekcji LCP:
- Przejścia CSS, które opóźniały pojawienie się kluczowych elementów w pierwszej ramce renderowania.
- Użycie atrybutu
loading="lazy"dla obrazów znajdujących się w części above the fold. - Brak sygnału o priorytecie (
fetchpriority) dla krytycznych obrazów.
Trzy proste poprawki, które podniosły LCP z 57% do 96%
Po zdiagnozowaniu prawdziwego problemu, zespół Nuvemshop wdrożył trzy zmiany w sposobie renderowania i ładowania górnej części strony. Te modyfikacje, zgodne z najlepszymi praktykami web performance, przyniosły spektakularne rezultaty.
1. Usuń przejścia CSS z kluczowych sekcji
Elementy, które mają być widoczne od razu po załadowaniu strony, powinny renderować się natychmiast. Animacje i przejścia CSS, nawet te subtelne, opóźniają moment, w którym przeglądarka może uznać element za kandydata do LCP. Usunięcie ich z głównego banera czy karuzeli na górze strony to fundamentalny krok, by przeglądarka poprawnie zidentyfikowała właściwy element.
2. Wyłącz loading="lazy" dla obrazów “above the fold”
To jeden z najczęstszych błędów. Atrybut loading="lazy" jest świetnym narzędziem do optymalizacji zasobów znajdujących się poniżej pierwszego ekranu. Jednak jego zastosowanie do obrazu, który jest (lub powinien być) LCP, to strzał w kolano. Mówisz w ten sposób przeglądarce, aby odroczyła ładowanie najważniejszego wizualnie elementu, co bezpośrednio wydłuża czas LCP.
3. Nadaj priorytet krytycznemu obrazowi za pomocą fetchpriority
Atrybut fetchpriority="high" to wyraźny sygnał dla przeglądarki, aby pobrała dany zasób (najczęściej obraz) tak szybko, jak to możliwe. Nuvemshop zaimplementował go z dodatkową logiką, aby atrybut był dodawany tylko do obrazów, które faktycznie mają szansę stać się LCP na danym typie podstrony.
Pamiętaj o fundamentalnej zasadzie: jeśli wszystko ma wysoki priorytet, to nic go nie ma. Używaj
fetchpriority="high"oszczędnie, dla jednego lub maksymalnie dwóch kluczowych zasobów na stronie.
Co to oznacza dla Twojego biznesu?
Po wdrożeniu poprawek Nuvemshop odnotował wzrost odsetka sklepów z dobrym wskaźnikiem LCP z 57% do 96%. Ogólny wskaźnik zdawalności Core Web Vitals (pass rate) wzrósł z 48% do 72%. Co ważniejsze, firma zaobserwowała w analizowanej kohorcie sklepów wzrost współczynnika konwersji o 8,9% i wzrost zaangażowania (dodania do koszyka) o 8,4% rok do roku.
Należy traktować te dane jako korelację, a nie wynik kontrolowanego testu A/B. Kierunek zmian jest jednak zgodny z badaniami rynkowymi, np. analizą Deloitte dla Google, która wykazała, że skrócenie czasu ładowania o 0,1 sekundy może podnieść konwersję w handlu detalicznym o 8,4%. Szybszy sklep to przede wszystkim lepsze doświadczenie zakupowe, a dopiero w drugiej kolejności niewielki bonus w rankingu Google.
Co dalej
Zanim zaczniesz kolejną rundę kompresji obrazów lub tuning serwera, zatrzymaj się i zweryfikuj, czy na pewno optymalizujesz właściwy element. Użyj narzędzi deweloperskich w Chrome lub PageSpeed Insights, aby precyzyjnie zidentyfikować, co Twoja przeglądarka uznaje za LCP na kluczowych szablonach stron: głównej, kategorii i produktu. Problem błędnej identyfikacji jest szczególnie dotkliwy w sklepach opartych na konfigurowalnych szablonach, gdzie układ może się drastycznie różnić.
Diagnoza jest pierwszym i najważniejszym krokiem do skutecznej optymalizacji. Jeśli zmagasz się z Core Web Vitals i nie widzisz efektów, być może, tak jak w opisanym przypadku, patrzysz w złym kierunku. Skupienie się na właściwym celu pozwala osiągnąć znacznie lepsze rezultaty mniejszym nakładem pracy.
