Jak diagnozować i poprawiać wolne LCP?

Question

IT Interview Practice · Accepted Answer

Zacznij od ustalenia, **czym jest element LCP** i **dlaczego jest spóźniony**. LCP dzieli się na cztery podczęści — napraw największą z nich. ## Diagnoza: cztery podczęści LCP ```text [ TTFB ] ─▶ [ Opóźnienie ładowania zasobu ] ─▶ [ Czas ładowania zasobu ] ─▶ [ Opóźnienie renderowania ] serwer kiedy pobieranie SIĘ ZACZYNA pobranie obrazu namalowanie ``` Chrome DevTools i PageSpeed Insights pokazują, który wycinek dominuje. Częste winowajcy: wolny serwer (TTFB), obraz LCP odkryty późno lub blokujący renderowanie skrypt/CSS opóźniający malowanie. ## Poprawki według podczęści - **Wolne TTFB** → cache'uj HTML na CDN, użyj SSG/ISR, przyspiesz origin/bazę danych. - **Opóźnienie ładowania (obraz znaleziony późno)** → preładuj go i podnieś jego priorytet, aby przeglądarka pobrała go natychmiast, a nie po CSS/JS: ```html

``` - **Czas ładowania (obraz za duży)** → serwuj AVIF/WebP, dobierz rozmiar przez `srcset`, kompresuj. - **Opóźnienie renderowania** → wytnij blokujący renderowanie CSS/JS; wstaw krytyczny CSS w linii; użyj `defer` dla skryptów. ## Pułapki - Leniwe ładowanie obrazu LCP (lub ukrywanie go za hydracją JS) — samozadana rana LCP nr 1. - Web fonty blokujące tekst LCP; użyj `font-display: swap` i preładuj font. - Optymalizowanie LCP w warunkach laboratoryjnych, podczas gdy rzeczywiści użytkownicy na 4G pozostają wolni — zawsze potwierdzaj danymi terenowymi. ## Dlaczego to ważne LCP to sztandarowa metryka ładowania i czynnik rankingowy w wyszukiwarce. Umiejętność nazwania czterech podczęści i przypisania każdej z nich konkretnej poprawki to dokładnie to ustrukturyzowane, oparte na dowodach podejście, którego szukają rekruterzy.

Diagnoza: cztery podczęści LCP

Poprawki według podczęści

Pułapki

Dlaczego to ważne

Powiązane pytania