LCP (Largest Contentful Paint) - co to jest i jak poprawić czas ładowania?
Table of Contents
Wprowadzenie
Largest Contentful Paint (LCP) to jedna z trzech metryk Core Web Vitals, które Google oficjalnie uwzględnia przy ocenie jakości strony. Mierzy czas, jaki upływa od momentu rozpoczęcia ładowania strony do wyrenderowania największego widocznego elementu w obszarze viewportu. W praktyce LCP odpowiada na pytanie: jak szybko użytkownik widzi główną treść strony?
Dla właścicieli sklepów internetowych i stron firmowych to metryka o bezpośrednim przełożeniu na biznes. Wolne ładowanie oznacza wyższy współczynnik odrzuceń, niższą konwersję i potencjalnie gorsze pozycje w wynikach wyszukiwania.
Co liczy się jako “largest element”?
Google nie patrzy na całą stronę - analizuje tylko największy element widoczny w viewporcie (czyli w obszarze ekranu bez przewijania). Jako największy element mogą zostać zakwalifikowane:
- elementy
<img>- najczęstszy przypadek, szczególnie zdjęcia hero i bannery - elementy
<video>- konkretnie ich plakat (poster image) - elementy z tłem ustawionym przez
background-imagew CSS (dotyczy tylko obrazów rastrowych, nie gradientów) - bloki tekstu - elementy
<p>,<h1>i inne, jeśli zajmują największą powierzchnię
W sklepach internetowych największym elementem jest niemal zawsze główne zdjęcie produktu lub baner na stronie głównej. Na blogach często jest to zdjęcie wyróżniające artykułu lub sam blok tekstu.
Warto wiedzieć, że przeglądarka może kilkukrotnie zmieniać “kandydata” na largest element w trakcie ładowania. Początkowo może to być blok tekstu, który zostanie zastąpiony przez obraz po jego załadowaniu. LCP rejestruje ostatni taki element przed momentem interakcji użytkownika ze stroną.
Progi oceny LCP
Google stosuje trzy przedziały do oceny wyniku LCP:
- dobry - poniżej 2,5 sekundy
- wymaga poprawy - od 2,5 do 4 sekund
- słaby - powyżej 4 sekund
Docelowo Google oczekuje, że co najmniej 75% wizyt na stronie osiągnie wynik poniżej 2,5 sekundy. To ważne rozróżnienie - nie chodzi o pojedynczy test, lecz o dane zagregowane z rzeczywistych użytkowników.
Jak mierzyć LCP?
Pomiar LCP można wykonać na dwa sposoby, a każdy z nich dostarcza innych informacji.
Dane laboratoryjne (lab data)
Narzędzia takie jak Google Lighthouse, PageSpeed Insights (w trybie symulacji) czy Chrome DevTools mierzą LCP w kontrolowanych warunkach. Wynik zależy od ustawień testu - prędkości połączenia, mocy procesora symulowanego urządzenia. Dane laboratoryjne są powtarzalne i przydatne do debugowania, ale nie odzwierciedlają doświadczeń rzeczywistych użytkowników.
Dane terenowe (field data)
To pomiary z prawdziwych wizyt, zbierane przez Chrome User Experience Report (CrUX) i widoczne w PageSpeed Insights w sekcji “Ocena korzystania ze stron w rzeczywistości”. Dane terenowe uwzględniają różnorodność urządzeń, połączeń i lokalizacji odwiedzających. To właśnie te dane Google wykorzystuje w swoich algorytmach rankingowych.
Do monitorowania LCP na bieżąco warto korzystać z Google Search Console (raport Core Web Vitals), który agreguje dane terenowe i wskazuje konkretne grupy adresów URL z problemami.
Najczęstsze przyczyny złego LCP w e-commerce
Sklepy internetowe są szczególnie narażone na problemy z LCP. Oto najczęstsze przyczyny:
Nieskompresowane zdjęcia produktów. Zdjęcia w formacie JPEG o wadze 2-5 MB to nadal standard w wielu sklepach. Przy wolniejszym połączeniu mobilnym takie pliki ładują się wiele sekund.
Wolny czas odpowiedzi serwera (TTFB). Jeśli sam serwer potrzebuje 1-2 sekund na wygenerowanie odpowiedzi HTML, to LCP nie może być krótki. Problem ten dotyka szczególnie sklepów na współdzielonym hostingu lub z rozbudowanymi bazami danych.
Render-blocking CSS i JavaScript. Przeglądarka nie wyrenderuje strony, dopóki nie pobierze i nie przetworzy krytycznych plików CSS. Każdy dodatkowy arkusz stylów lub skrypt w <head> opóźnia moment renderowania.
Kaskadowe ładowanie zasobów. Sytuacja, w której przeglądarka musi najpierw pobrać HTML, potem CSS, a dopiero z CSS wynika, że trzeba pobrać obraz tła - każdy taki krok dodaje opóźnienie.
Zewnętrzne fonty bez optymalizacji. Niestandardowe czcionki pobierane z zewnętrznych serwerów mogą blokować renderowanie tekstu, co opóźnia LCP w przypadkach, gdy największym elementem jest blok tekstowy.
Jak poprawić LCP?
Optymalizacja obrazów
Konwersja zdjęć do formatu WebP lub AVIF redukuje rozmiar pliku o 25-50% w porównaniu z JPEG. Dodanie atrybutu srcset pozwala serwować różne rozmiary obrazu w zależności od urządzenia - nie ma sensu wysyłać zdjęcia 2000 px na telefon z ekranem 400 px.
Preload kluczowego obrazu
Jeśli wiesz, że baner hero jest największym elementem na stronie, dodaj w <head> tag:
<link rel="preload" as="image" href="/images/hero.webp">
Dzięki temu przeglądarka zacznie pobierać obraz natychmiast, nie czekając na przetworzenie CSS.
Szybszy serwer i CDN
Czas odpowiedzi serwera (TTFB) powinien być poniżej 200 ms. Jeśli jest wyższy, warto rozważyć lepszy hosting, cache na poziomie serwera lub sieć CDN, która serwuje statyczne zasoby z serwerów bliższych użytkownikowi.
Eliminacja render-blocking zasobów
Krytyczny CSS (potrzebny do wyrenderowania widocznej części strony) powinien być osadzony inline w <head>. Reszta stylów może być ładowana asynchronicznie. Skrypty JavaScript, które nie są potrzebne do renderowania, powinny mieć atrybut defer lub async.
Optymalizacja fontów
Użycie font-display: swap w regułach @font-face pozwala przeglądarce wyrenderować tekst systemową czcionką, zanim pobierze niestandardowy font. Dzięki temu tekst pojawia się natychmiast, a font podmienia się po załadowaniu.
FAQ
Czy LCP wpływa na pozycje w Google?
Tak. LCP jest jedną z trzech metryk Core Web Vitals, które Google oficjalnie włączył do czynników rankingowych. Nie jest to czynnik dominujący - treść i linki nadal mają większe znaczenie - ale przy porównywalnej jakości merytorycznej dwóch stron, lepsza wydajność może przechylić szalę.
Czy LCP mierzy się osobno dla mobile i desktop?
Tak. Google zbiera dane osobno dla wersji mobilnej i desktopowej. W praktyce wyniki mobilne są zazwyczaj gorsze ze względu na wolniejsze połączenia i słabsze procesory. Ponieważ Google stosuje mobile-first indexing, to właśnie wyniki mobilne mają kluczowe znaczenie.
Jaki jest najszybszy sposób na poprawę LCP?
Najszybszą poprawę daje zazwyczaj optymalizacja największego obrazu - konwersja do WebP, zmniejszenie rozmiaru i dodanie preload. W wielu przypadkach ta jedna zmiana obniża LCP o 1-3 sekundy.
Czy lazy loading pomaga w poprawie LCP?
Nie dla elementu LCP - wręcz przeciwnie. Lazy loading opóźnia ładowanie obrazów poza viewportem, co jest dobre dla wydajności ogólnej. Ale jeśli zastosujesz lazy loading do obrazu hero (który jest elementem LCP), przeglądarka celowo opóźni jego pobranie, co pogorszy wynik. Obraz LCP powinien ładować się natychmiast, najlepiej z preloadem.
Potrzebujesz pomocy z optymalizacją Core Web Vitals?
Skontaktuj się z nami, a pomożemy Ci poprawić wydajność Twojej strony i wyniki LCP.
