Hogyan diagnosztizálsz és javítasz egy lassú LCP-t?

Question

IT Interview Practice · Accepted Answer

Kezdd azzal, hogy megtalálod, **mi az LCP-elem**, és **miért késik**. Az LCP négy alrészre bomlik — a legnagyobbat javítsd. ## Diagnózis: az LCP négy alrésze ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` A Chrome DevTools és a PageSpeed Insights megmutatja, melyik szelet dominál. Gyakori okok: lassú szerver (TTFB), későn felfedezett LCP-kép, vagy egy render-blocking szkript/CSS, amely késlelteti a paintet. ## Javítások alrészenként - **Lassú TTFB** → cache-eld a HTML-t egy CDN-en, használj SSG/ISR-t, gyorsítsd fel az origint/adatbázist. - **Betöltési késés (későn talált kép)** → preloadold, és emeld meg a prioritását, hogy a böngésző azonnal letöltse, ne a CSS/JS után: ```html

``` - **Betöltési idő (túl nagy kép)** → szolgáld ki AVIF/WebP-ben, méretezd helyesen `srcset`-tel, tömörítsd. - **Renderelési késés** → csökkentsd a render-blocking CSS/JS-t; ágyazd be inline a kritikus CSS-t; `defer`-eld a szkripteket. ## Buktatók - Az LCP-kép lazy-loadolása (vagy JS-hidratálás mögé rejtése) — az első számú, saját magadnak okozott LCP-seb. - A webfontok blokkolják az LCP-szöveget; használj `font-display: swap`-ot, és `preload`-old a fontot. - A labor-LCP optimalizálása, miközben a 4G-n lévő valós felhasználók lassúak maradnak — mindig erősítsd meg field adatokkal. ## Miért fontos Az LCP a vezető betöltési metrika és keresési rangsorolási tényező. Ha meg tudod nevezni a négy alrészt, és mindegyiket egy konkrét javításhoz tudod rendelni, az pontosan az a strukturált, bizonyítékalapú megközelítés, amit az interjúztatók keresnek.

Diagnózis: az LCP négy alrésze

Javítások alrészenként

Buktatók

Miért fontos

Kapcsolódó kérdések