LCP mierzy czas, po którym ładuje się główna treść. Główna treść to największy blok tekstu lub obraz na stronie. Na większości stron LCP to kluczowy wskaźnik, bo określa, kiedy strona staje się użyteczna dla odwiedzającego.
Użytkownik wchodzi na stronę. Strona zaczyna się ładować. Przeglądarka pobiera HTML. Pobiera CSS. Pobiera JavaScript. HTML się renderuje. CSS nakłada style. JavaScript się uruchamia. Pojawia się główna treść. To jest LCP.
LCP równy 1 sekundzie jest doskonały. Użytkownik szybko widzi treść. LCP równy 3 sekundom jest wolny. Użytkownik czeka. LCP równy 5 sekundom jest bardzo wolny. Użytkownik odchodzi.
Co liczy się jako Largest Contentful Paint
Największy element na pierwszym ekranie strony. Zwykle obraz lub nagłówek. Przykład: strona główna z dużym obrazem na górze. Ten obraz jest największym elementem. Czas jego pojawienia się to LCP.
Przykład: artykuł na blogu z nagłówkiem. Nagłówek jest największym elementem. Czas jego pojawienia się to LCP.
Przykład: strona produktu ze zdjęciem produktu. Zdjęcie jest największym elementem. Czas jego pojawienia się to LCP.
LCP liczy się od kliknięcia linku (początek ładowania strony) do pojawienia się największego elementu. Obejmuje czas pobierania HTML, CSS i JavaScript, pobierania obrazu oraz renderowania strony.
Optymalizacja LCP
Cel optymalizacji: LCP poniżej 2,5 sekundy.
Strategia pierwsza: skróć czas odpowiedzi serwera (TTFB). Szybszy serwer to szybciej docierający HTML. Bez HTML nie ma renderowania. Skróć TTFB, ulepszając serwer, używając CDN i ograniczając zapytania do bazy danych.
Strategia druga: zmniejsz rozmiar plików CSS. Mniejszy CSS pobiera się szybciej. CSS musi się pobrać, zanim strona się wyrenderuje. Zmniejsz CSS, usuwając nieużywane style, minifikując go i odkładając mniej ważny CSS na później.
Strategia trzecia: zmniejsz rozmiar plików JavaScript. Duży JavaScript opóźnia wykonanie i renderowanie. Zmniejsz go, usuwając nieużywany kod, dzieląc duże pliki i odkładając mniej ważny JavaScript na później.
Strategia czwarta: zoptymalizuj obrazy. Obrazy są często największymi elementami (LCP). Zmniejsz rozmiar plików, kompresując je, używając nowoczesnych formatów (WebP) i zmniejszając wymiary obrazów.
Strategia piąta: wczytaj kluczowe zasoby z wyprzedzeniem (preload). Powiedz przeglądarce, żeby wcześnie pobrała ważny obraz lub czcionkę. Obraz pobiera się równolegle z HTML i CSS. To skraca LCP.
Prawdziwy przykład: optymalizacja LCP artykułu na blogu
Wyjściowy LCP: 2,8 sekundy.
Analiza: główny obraz artykułu jest największym elementem. Obraz waży 2 megabajty. Pobiera się 1,2 sekundy. Pobieranie obrazu to wąskie gardło.
Optymalizacja
Kompresja obrazu: z 2 megabajtów do 0,5 megabajta. Czas pobierania wynosi teraz 0,3 sekundy.
Konwersja do formatu WebP: dalsze zmniejszenie do 0,3 megabajta. Czas pobierania wynosi teraz 0,1 sekundy.
Preload obrazu: przeglądarka pobiera obraz wcześniej. Obraz pobiera się równolegle z HTML. Oszczędność: 0,2 sekundy.
Przeniesienie kluczowego CSS na pierwszy ekran: krótszy czas do wyrenderowania strony. Oszczędność: 0,3 sekundy.
Nowy LCP: 1,7 sekundy.
2,8 minus 1,2 (pobieranie obrazu) plus 0,1 (pobieranie skompresowanego obrazu) daje 1,7 sekundy. Poniżej celu 2,5.
LCP a różne typy stron
Strona główna
Zwykle LCP to duży obraz na górze. Zoptymalizuj go: skompresuj obraz, użyj CDN, wczytaj go z wyprzedzeniem.
Artykuł na blogu
LCP to nagłówek lub pierwszy obraz. Zoptymalizuj, skracając opóźnienia CSS i JavaScript oraz wczytując czcionki z wyprzedzeniem.
Strona produktu
LCP to zdjęcie produktu. Zoptymalizuj, kompresując obraz i stosując obrazy responsywne dla różnych urządzeń.
Strona kasy
LCP to formularz lub przycisk. Zoptymalizuj, ograniczając CSS i JavaScript oraz wczytując kluczowe zasoby z wyprzedzeniem.
Różne typy stron wymagają innych strategii. Sprawdź, który element jest Twoim LCP. Zoptymalizuj właśnie ten element.
LCP na urządzeniach mobilnych i komputerach
Na telefonach LCP jest zwykle gorszy niż na komputerach. Sieć mobilna jest wolniejsza. Urządzenia mobilne mają mniejszą moc obliczeniową.
Wyjściowy LCP na komputerze: 1,5 sekundy. Wyjściowy LCP na telefonie: 3 sekundy.
Telefon jest dwa razy wolniejszy. Użytkownicy mobilni odczuwają to mocniej.
Zacznij od optymalizacji wersji mobilnej. Skup się na zmniejszeniu obrazów (łącze mobilne jest ograniczone). Ogranicz JavaScript (urządzenia mobilne przetwarzają go wolniej). Używaj formatów przyjaznych urządzeniom mobilnym.
Pomiar poprawy LCP
Wyjściowy LCP
Zmierz przed optymalizacją.
Wdrożenie optymalizacji
Nowy LCP
Zmierz po optymalizacji.
Poprawa
Wyjściowy LCP minus nowy LCP.
Przykład
Wyjściowo 2,8 sekundy. Po optymalizacji 1,7 sekundy. Poprawa wynosi 1,1 sekundy.
Oblicz wpływ
Poprawa o 1,1 sekundy może zwiększyć współczynnik konwersji o 1 procent (zależnie od punktu wyjścia i branży). Przy 50 tysiącach odwiedzin miesięcznie to 500 dodatkowych konwersji przy wartości zamówienia 100 dolarów. To 50 tysięcy dolarów miesięcznie. 600 tysięcy dolarów rocznie.
Porównaj to z kosztem optymalizacji. Jeśli koszt wynosi 50 tysięcy dolarów, zwrot nastąpi w miesiąc. Doskonały ROI.
Najczęstsze pytania
Skąd wiadomo, który element jest naszym LCP?
Użyj Google Chrome DevTools. Kliknij stronę prawym przyciskiem myszy. Wybierz Zbadaj. Otwórz kartę Performance. Nagraj ładowanie strony. DevTools pokaże element LCP. Możesz też sprawdzić PageSpeed Insights. Lighthouse wskazuje elementy LCP. Sprawdź też raport Core Web Vitals w Search Console. Pokazuje elementy LCP na stronach. Dzięki kreatorowi stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Czy optymalizować LCP na wszystkich stronach, czy tylko na stronie głównej?
Optymalizuj wszystkie strony. Ustal jednak priorytety według ruchu. Strona główna jest ważna, ale tak samo strony produktów (w sklepie internetowym) lub artykułów (w wydawnictwie). Mierz LCP na wszystkich ważnych stronach. Kolejność optymalizacji ustal według wielkości ruchu.
Czy preload zawsze pomaga w LCP?
Nie zawsze. Preload zużywa przepustowość. Jeśli wczytasz z wyprzedzeniem mało ważny zasób, zużyjesz łącze, które mogło pobrać ważny. Używaj preloadu tylko dla kluczowych zasobów (główny obraz, kluczowa czcionka). Nie wczytuj z wyprzedzeniem zasobów mniej ważnych.
Jak zoptymalizować LCP, gdy główna treść jest dynamiczna (ładowana z API)?
Opóźnienie wywołania API dodaje się do LCP. Skróć czas odpowiedzi API, optymalizując bazę danych, buforując odpowiedzi i używając CDN. Pokaż też ekran szkieletowy albo treść zastępczą, gdy API się ładuje. Treść zastępcza pojawia się od razu. Użytkownik ma wrażenie, że strona się załadowała. Właściwa treść uzupełnia się potem. Odczuwalny LCP jest szybszy niż rzeczywisty.
Czy używać leniwego ładowania dla elementu LCP?
Nie. Leniwe ładowanie opóźnia obraz do chwili, gdy ma wejść w widoczny obszar. Jeśli obraz jest na pierwszym ekranie (element LCP), leniwe ładowanie niepotrzebnie go opóźnia. Ładuj leniwie tylko obrazy poniżej pierwszego ekranu. Element LCP ładuj od razu.
Czym LCP różni się od FCP (First Contentful Paint)?
FCP to moment, gdy pojawia się jakakolwiek treść (może to być mały tekst). LCP to moment, gdy pojawia się główna treść (zwykle większy obraz lub nagłówek). FCP jest szybszy niż LCP. LCP jest ważniejszy dla doświadczenia użytkownika. Najpierw popraw LCP.