[object Object]

Największa zawartość treściowa (LCP) to jeden z trzech wskaźników Google Core Web Vitals, opracowany w celu pomiaru postrzeganej szybkości ładowania strony.LCP śledzi czas, jaki upływa od momentu rozpoczęcia ładowania strony internetowej przez użytkownika do momentu całkowitego narysowania na ekranie największego obrazu, ramki plakatu wideo lub bloku tekstu w początkowo widocznej rzutni.

Ponieważ użytkownicy oceniają szybkość strony internetowej na podstawie tego, jak szybko główna treść staje się widoczna i czytelna, LCP jest powszechnie uważany za najważniejszy wskaźnik wydajności ładowania.W związku z tym Google włącza LCP do swoich oficjalnych sygnałów rankingowych dotyczących jakości strony w bezpłatnych wynikach wyszukiwania.

Podsumowanie w pierwszej kolejności

Largest Contentful Paint (LCP) to wskaźnik Core Web Vital, który mierzy postrzeganą szybkość ładowania strony na podstawie czasu, w którym kończy się renderowanie największego widocznego bloku tekstu lub elementu obrazu w rzutni.Dostateczny wynik LCP wynosi 2,5 sekundy lub mniej w przypadku co najmniej 75% wizyt na stronie w danych terenowych rzeczywistych użytkowników (CrUX).Opóźnienie LCP składa się z czterech odrębnych części: czasu do pierwszego bajtu (TTFB), opóźnienia ładowania zasobu, czasu trwania ładowania zasobu i opóźnienia renderowania elementu.Optymalizacja LCP wymaga wstępnego załadowania zasobów głównych, wdrożenia buforowania brzegowego, kompresji obrazów do formatów WebP/AVIF i wyeliminowania blokujących renderowanie CSS i JavaScript.

Skala ocen wyników LCP i progi podstawowych wskaźników internetowych

Aby zapewnić użytkownikom szybkie i wciągające doświadczenie, strony internetowe muszą spełniać ustalone przez Google progi Core Web Vitals dla największej zawartości treściowej:

Czas renderowania LCP	Ocena wydajności	Wpływ na użytkownika i sygnał rankingowy wyszukiwarki Google
$\le 2,5\text{sekundy}$	Dobry (zielony)	Szybkie postrzegane ładowanie;w pełni spełnia ocenę Google Core Web Vitals.
$> 2,5\text {s} $ i $\le 4,0\text {s} $	Wymaga poprawy (bursztynowy)	Zauważalne opóźnienie ładowania;potencjalny spadek współczynników konwersji mobilnych i pozycji w wyszukiwarce.
$> 4,0\text{sekundy}$	Biedny (czerwony)	Poważne wizualne opóźnienie ładowania;wysoki współczynnik odrzuceń użytkowników i kary za ranking wyszukiwania.

Aby uzyskać pozytywną ocenę w teście Core Web Vitals, witryna musi uzyskać wynik LCP w kategorii Dobry ($\le 2,5\text{ sekund}$) przez co najmniej 75% odwiedzin strony, ocenianych w kohortach komputerów stacjonarnych i urządzeń mobilnych na podstawie rzeczywistych danych terenowych.

Jakie elementy DOM kwalifikują się do oceny LCP?

Zgodnie z oficjalną specyfikacją W3C Largest Contentful Paint przeglądarka monitoruje określone widoczne elementy DOM znajdujące się w początkowej rzutni:

Standardowe elementy <img> (w tym obrazy renderowane w responsywnych tagach <picture>).
Elementy <image> osadzone w kontenerze wektorowym <svg>.
Obrazy plakatów wideo (atrybut poster w elemencie <video>).
Elementy z obrazem tła CSS ładowanym za pomocą funkcji url().
Kontenery HTML na poziomie bloków zawierające węzły tekstowe lub podrzędne elementy tekstu wbudowanego (takie jak nagłówki od <h1> do <h6>, akapity <p> lub bloki <div>).

Dekonstrukcja LCP: cztery podczęści

Aby skutecznie diagnozować i optymalizować powolne wyniki w kategorii „Największa zawartość treściowa”, inżynierowie wydajności dzielą opóźnienia LCP na cztery odrębne części:

Czas do pierwszego bajtu (TTFB): Czas, jaki upłynął od żądania strony przez użytkownika do otrzymania przez przeglądarkę pierwszego bajtu odpowiedzi dokumentu HTML z serwera.Cel: $< 800\text {ms} $ (40%$ budżetu LCP).
Opóźnienie ładowania zasobu: Opóźnienie pomiędzy zakończeniem odbierania przez dokument HTML bajtów odpowiedzi a wykryciem i rozpoczęciem pobierania przez przeglądarkę zasobu LCP (takiego jak obraz główny).Cel: $< 200\text {ms} $ (10%$ budżetu LCP).
Czas ładowania zasobu: Czas wymagany przez przeglądarkę do pobrania obrazu LCP lub zasobu czcionki przez sieć.Cel: $< 800\text {ms} $ (40%$ budżetu LCP).
Opóźnienie renderowania elementu: Czas pomiędzy zakończeniem pobierania zasobu LCP a zakończeniem przez przeglądarkę obliczeń układu i wyświetleniem elementu na ekranie.Cel: $< 200\text {ms} $ (10%$ budżetu LCP).

Matematycznie całkowite opóźnienie LCP jest sumą tych czterech podczęści:

$$\text {LCP} = \text {TTFB} + \text{Opóźnienie ładowania zasobu} + \text{Czas ładowania zasobu} + \text{Opóźnienie renderowania elementu}$$

Sprawdzone techniki optymalizacji LCP

Wyeliminuj opóźnienie ładowania zasobów: Dodaj <link rel="preload" as="image" href="..."> lub fetchpriority="high" do tagu obrazu głównego, aby przeglądarka natychmiast zainicjowała pobieranie obrazu podczas analizowania HTML.
Optymalizuj odpowiedź serwera (TTFB): wdrażaj buforowanie brzegowe za pośrednictwem CDN, optymalizuj wydajność zapytań do bazy danych i korzystaj z multipleksowania wypychanego serwera HTTP/2 lub HTTP/3.
Kompresuj i modernizuj obrazy: Udostępniaj obrazy bohaterów przy użyciu nowoczesnych formatów WebP lub AVIF z responsywnymi rozmiarami srcset dostosowanymi do wymiarów ekranu urządzeń mobilnych i komputerów stacjonarnych.
Zmniejsz zasoby blokujące renderowanie: Wstaw krytyczny CSS do tagu <head> i odłóż niekrytyczny JavaScript, używając atrybutów skryptu defer lub async.
Optymalizuj ładowanie czcionek internetowych: Użyj font-display: swap lub font-display: optional w regułach CSS @font-face, aby zapewnić, że bloki tekstu pozostaną widoczne natychmiast po zakończeniu pobierania czcionek internetowych przez sieć.

LCP vs First Contentful Paint (FCP) vs Indeks Prędkości

Chociaż LCP, FCP i Speed Index mierzą wydajność ładowania, rejestrują różne aspekty postępu ładowania strony:

Pierwsze malowanie treści (FCP): Mierzy, kiedy pierwszy element DOM (taki jak kolor tła, pokrętło lub tekst nagłówka) kończy renderowanie na ekranie.
Największe malowanie treści (LCP): Mierzy czas, w którym główny element treści wizualnej (baner główny lub główny blok akapitu) zakończy renderowanie.
Indeks prędkości: Mierzy, jak szybko treść wizualna wypełnia obszar roboczy w miarę upływu czasu podczas rejestrowania postępu wizualnego.

LCP ma największą wagę wśród wskaźników ładowania w algorytmie punktacji Google Lighthouse (obecnie 25% całkowitego wyniku wydajności), ponieważ najlepiej odpowiada percepcji zakończenia ładowania strony przez rzeczywistych użytkowników.

Ciągłe monitorowanie LCP za pomocą SimpleOps

SimpleOps automatyzuje śledzenie największej zawartości treści poprzez przechwytywanie syntetycznych audytów laboratorium Lighthouse i wskaźników pola zestawu danych raportu Chrome UX (CrUX) w jednym ujednoliconym panelu monitorowania.SimpleOps wysyła natychmiastowe, proaktywne alerty za każdym razem, gdy 75. percentyl LCP Twojej witryny przekroczy budżet na wydajność wynoszący 2,5 sekundy, umożliwiając Twojemu zespołowi ochronę konwersji i rankingów wyszukiwania.