Kaip diagnozuojate ir gerinate lėtą LCP?

Question

IT Interview Practice · Accepted Answer

Pradėkite nuo to, kad išsiaiškintumėte, **kas yra LCP elementas** ir **kodėl jis vėluoja**. LCP skyla į keturias dalis — taisykite didžiausią. ## Diagnozė: keturios LCP dalys ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools ir PageSpeed Insights parodo, kuri dalis dominuoja. Dažni kaltininkai: lėtas serveris (TTFB), vėlai aptiktas LCP paveikslėlis arba render-blocking skriptas/CSS, atidedantis paint. ## Pataisos pagal dalį - **Lėtas TTFB** → talpinkite HTML CDN, naudokite SSG/ISR, pagreitinkite origin/duomenų bazę. - **Load delay (paveikslėlis rastas vėlai)** → preload jį ir pakelkite jo prioritetą, kad naršyklė jį atsisiųstų iškart, o ne po CSS/JS: ```html

``` - **Load time (paveikslėlis per didelis)** → tiekite AVIF/WebP, tinkamai dydžiuokite su `srcset`, suspauskite. - **Render delay** → sumažinkite render-blocking CSS/JS; įterpkite kritinį CSS; `defer` skriptus. ## Spąstai - LCP paveikslėlio lazy-loadinimas (arba jo slėpimas už JS hidratacijos) — #1 savo paties padaryta LCP žaizda. - Web font, blokuojantys LCP tekstą; naudokite `font-display: swap` ir `preload` šriftui. - Lab LCP optimizavimas, kol tikri naudotojai su 4G lieka lėti — visada patvirtinkite su lauko duomenimis. ## Kodėl tai svarbu LCP yra pagrindinė įkėlimo metrika ir paieškos reitingavimo veiksnys. Gebėjimas įvardyti keturias dalis ir kiekvieną susieti su konkrečia pataisa yra būtent tas struktūrinis, įrodymais grįstas požiūris, kurio interviuotojai ieško.

Diagnozė: keturios LCP dalys

Pataisos pagal dalį

Spąstai

Kodėl tai svarbu

Susiję klausimai