Najwyższe wyrenderowanie treści (LCP) to jeden ze wskaźników śledzonych w sekcji Skuteczność raportu Lighthouse. Każda wartość odzwierciedla określony aspekt szybkości wczytywania strony.
Lighthouse wyświetla LCP w sekundach:
![Zrzut ekranu z audytu największego wyrenderowania treści w Lighthouse](https://developer.chrome.google.cn/static/docs/lighthouse/performance/lighthouse-largest-contentful-paint/image/a-screenshot-the-lightho-d3c8bf09dcb23.png?authuser=9&hl=pl)
Co mierzy LCP
LCP to czas renderowania na ekranie największego elementu treści w widocznym obszarze. Pozwala to w przybliżeniu określić, kiedy główna zawartość strony jest widoczna dla użytkowników. Więcej informacji o sposobie określania LCP znajdziesz w artykule Zdefiniowane największe wyrenderowanie treści.
Jak Lighthouse określa wynik LCP
Lighthouse wyodrębnia dane LCP z narzędzia do śledzenia w Chrome.
Tabela poniżej pokazuje, jak interpretować wynik LCP:
Czas LCP (w sekundach) |
Oznaczanie kolorami |
---|---|
0-2.5 | Zielony (szybko) |
2.5-4 | Pomarańczowy (umiarkowany) |
Ponad 4 | Czerwony (wolno) |
Jak poprawić wynik LCP
Jeśli LCP to obraz, czas można podzielić na 4 fazy. Wiedza o tym, które fazy trwają najdłużej, może pomóc w optymalizacji LCP. Lighthouse wyświetli element LCP wraz z podziałem na fazę w diagnostyce „Największe wyrenderowanie treści”.
Faza LCP | Opis |
---|---|
Czas do pierwszego bajtu (TTFB) | Czas od rozpoczęcia ładowania strony przez użytkownika do momentu, gdy przeglądarka otrzyma pierwszy bajt odpowiedzi dokumentu HTML. Więcej informacji o funkcji TTFB |
Opóźnienie wczytywania | Różnica między TTFB a momentem rozpoczęcia ładowania zasobu LCP przez przeglądarkę. |
Czas wczytywania | Czas potrzebny na wczytanie zasobu LCP. |
Opóźnienie renderowania | Różnica między zakończeniem ładowania zasobu LCP do momentu pełnego wyrenderowania elementu LCP. |