LCP – Largest Contentful Paint
LCP érthetően: mit mér a Largest Contentful Paint, mi számíthat LCP elemnek, és hogyan bontsd TTFB, resource delay, load time és render delay részekre?
Röviden
A Largest Contentful Paint a viewportban megjelenő legnagyobb releváns tartalmi elem renderelési idejét méri a navigáció kezdetétől. Jó célérték legfeljebb 2,5 másodperc a page visit-ek 75. percentilisénél.
Mit jelent a lcp – largest contentful paint?
A Largest Contentful Paint a viewportban megjelenő legnagyobb releváns tartalmi elem renderelési idejét méri a navigáció kezdetétől. Jó célérték legfeljebb 2,5 másodperc a page visit-ek 75. percentilisénél.
LCP bontás
01
TTFB
02
resource delay
03
load time
04
render delay
05
LCP
Hogyan működik a gyakorlatban?
Az LCP gyakran négy részre bontható: TTFB, LCP resource load delay, resource load duration és element render delay. Ha hero image az LCP, a böngészőnek korán fel kell fedeznie és megfelelő prioritással letöltenie; ha szöveg, font és render blokkolás lehet fontos.
- Jó LCP: ≤2,5 s; gyenge: >4 s.
- Hero/LCP képet ne lazy-loadd a viewport tetején.
- Preload/fetchpriority csak valóban fontos erőforrásnál hasznos.
- Szerver TTFB és render delay ugyanúgy befolyásolhatja az LCP-t.
Gyakorlati fejlesztői szemlélet
DevToolsban először azonosítsd az LCP elemet és az erőforrás request kezdetét. Ha a kép csak későn kerül a request waterfallba, a discovery probléma fontosabb lehet, mint újabb tömörítési százalékok hajszolása.
Gyakori hibák és félreértések
- Minden nagy képet preloadolni.
- Above-the-fold LCP képet lazy loadingra állítani.
- A 2,5 s küszöböt minden egyes user request hard határának gondolni a 75. percentilis helyett.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy