SŁOWNIK POJĘĆ W MARKETINGU

LCP, czyli co to?

Na czym polega LCP?

Definicja
LCP – Largest Contentful Paint, czyli większe wyrenderowanie treści. Jest to jeden z elementów wskaźnika Core Web Vitals, a od 2021 roku czynnikiem rankingowym Google. Ocenia on jakość doświadczenia użytkownika na konkretnej witrynie internetowej.

3 ciekawostki o LCP

1. Pożądana wartość LCP

LCP jest mierzony oraz wyrażany w sekundach. Wskaźnik ukazuje czas, jaki potrzebny jest na załadowanie największego elementu znajdującego się na stronie www, który jest widoczny dla użytkowników. Jest to bardzo istotny wskaźnik, ponieważ w dużej mierze decyduje o tym, czy dany użytkownik pozostanie na stronie, czy też będzie zniechęcony długim oczekiwaniem na załadowanie witryny i ją opuści.

Z tego też względu im niższa wartość LCP, tym lepiej. Niski LCP mówi o wydajności strony, a także potwierdza jej szybkość ładowania się. Dobry wynik to ten poniżej 2,5 sekundy. Za średni uważa się wynik w przedziale od 2,5 do 4 sekund, z kolei strony ładujące się powyżej 4 sekund często posiadają wysoki współczynnik odrzuceń.

2. Co pogarsza wartość LCP?

Każda strona internetowa powinna dążyć do zoptymalizowania i zwiększenia swojej wydajności. Dlatego warto wiedzieć, co wpływa na wolniejsze ładowanie strony. Najczęściej są to:

niezoptymalizowane zasoby na stronie,
wydłużony czas odpowiedzi serwera,
spowalniające skrypty,
arkusze stylów w kodzie CSS i JavaScript,
tworzenie stron, w których wyrenderowanie następuje po stronie użytkownika.

W przypadku renderowania po stronie użytkownika, ładowanie strony odbywa się w przeglądarce internetowej, a renderowanie po stronie serwera odbywa się na serwerze witryny.

3. Jak poprawić wartość wskaźnika LCP?

Optymalizacja LCP może przebiegać na wiele sposobów. Aby była skuteczna, należy dokładnie przeanalizować zawartość strony. Do prostych działań naprawczych zalicza się:

zmianę rozmiarów zdjęć oraz plików tekstowych znajdujących się na stronie,
konwersję obrazów na nowe formaty,
usunięcie nieużywanych arkuszy CSS,
zmianę kodu na asynchroniczne ładowanie,
wykorzystanie link relationship =”preload”> do wskazania priorytetu zasobom, które powinny być pobierane w pierwszej kolejności.

Można także zmienić format, rozmiar i kodowanie zdjęć, zoptymalizować sposób jego dostarczania, czy zastosować technikę lazy loading. W przypadku tekstów można zoptymalizować czcionki lub wykorzystać właściwości display w kodzie CSS, aby poprawić wartość wskaźnika LCP.