Az LCP azt az időt méri, amíg a fő tartalom betöltődik. A fő tartalom az oldal legnagyobb szövegblokkja vagy képe. A legtöbb oldalon az LCP kulcsfontosságú mutató, mert ez dönti el, mikor válik használhatóvá az oldal a felhasználónak.
A felhasználó megérkezik az oldalra. Az oldal betöltődni kezd. A böngésző letölti a HTML-t. Letölti a CSS-t. Letölti a JavaScriptet. A HTML megjelenik. A CSS alkalmazza a stílusokat. A JavaScript lefut. Megjelenik a fő tartalom. Ez az LCP.
Az 1 másodperces LCP kiváló. A felhasználó gyorsan látja a tartalmat. A 3 másodperces LCP lassú. A felhasználó vár. Az 5 másodperces LCP nagyon lassú. A felhasználó elmegy.
Mi számít Largest Contentful Paintnek
Az oldal legnagyobb eleme a képernyő látható részén belül. Általában kép vagy címsor. Példa: főoldal hero képpel. A hero kép a legnagyobb elem. A hero kép megjelenési ideje az LCP.
Példa: blogcikk címsorral. A címsor a legnagyobb elem. A címsor megjelenési ideje az LCP.
Példa: termékoldal termékképpel. A termékkép a legnagyobb elem. A termékkép megjelenési ideje az LCP.
Az LCP attól számít, hogy a felhasználó rákattint a linkre (az oldalbetöltés kezdete), addig, amíg a legnagyobb elem megjelenik. Beleszámít a HTML, a CSS és a JavaScript letöltési ideje, a kép letöltése és az oldal megjelenítése.
Az LCP optimalizálása
Optimalizálási cél: 2,5 másodperc alatti LCP.
Első stratégia: optimalizáld a szerver válaszidejét (TTFB). A gyorsabb szerver miatt a HTML hamarabb megérkezik. A HTML megérkezése a megjelenítés előfeltétele. A TTFB-t csökkentheted a szerver javításával, CDN használatával és kevesebb adatbázis-lekérdezéssel.
Második stratégia: csökkentsd a CSS fájl méretét. A kisebb CSS gyorsabban letöltődik. A CSS-nek le kell töltődnie, mielőtt az oldal megjelenik. A CSS-t csökkentheted a nem használt stílusok eltávolításával, minifikálással és a nem kritikus CSS késleltetésével.
Harmadik stratégia: csökkentsd a JavaScript fájl méretét. A nagy JavaScript késlelteti a futtatást és a megjelenítést. A JavaScriptet csökkentheted a nem használt kód eltávolításával, a nagy fájlok szétbontásával és a nem kritikus JavaScript késleltetésével.
Negyedik stratégia: optimalizáld a képeket. A képek gyakran a legnagyobb elemek (LCP). A képfájl méretét csökkentheted tömörítéssel, modern formátumokkal (WebP) és kisebb képméretekkel.
Ötödik stratégia: töltsd be előre a kritikus erőforrásokat. Mondd meg a böngészőnek, hogy a kritikus képet vagy betűtípust korán töltse le. A kép a HTML-lel és a CSS-sel párhuzamosan töltődik le. Ez csökkenti az LCP-t.
Valós példa: blogcikk LCP optimalizálása
Kiindulási LCP: 2,8 másodperc.
Elemzés: a cikk hero képe a legnagyobb elem. A kép 2 megabájt. A letöltése 1,2 másodpercig tart. A kép letöltése a szűk keresztmetszet.
Optimalizálás
Kép tömörítése: 2 megabájtról 0,5 megabájtra csökkentve. A letöltési idő most 0,3 másodperc.
Átalakítás WebP formátumra: tovább csökkentve 0,3 megabájtra. A letöltési idő most 0,1 másodperc.
A kép előbetöltése: mondd meg a böngészőnek, hogy korán töltse le a képet. A kép a HTML-lel párhuzamosan töltődik le. Megspórol 0,2 másodpercet.
A kritikus CSS áthelyezése a látható rész elé: kevesebb idő telik el, amíg az oldal megjeleníthető. Megspórol 0,3 másodpercet.
Új LCP: 1,7 másodperc.
2,8 mínusz 1,2 (képletöltés) plusz 0,1 (tömörített kép letöltése) egyenlő 1,7 másodperc. A 2,5-ös cél alatt.
Az LCP és a különböző oldaltípusok
Főoldal
Az LCP általában a hero kép. Optimalizáld a kép tömörítésével, CDN használatával és előbetöltéssel.
Blogcikk
Az LCP a címsor vagy az első kép. Optimalizáld a CSS/JavaScript miatti késleltetés csökkentésével és a betűtípusok előbetöltésével.
Termékoldal
Az LCP a termékkép. Optimalizáld a kép tömörítésével és a különböző eszközökhöz igazodó, reszponzív képekkel.
Pénztár oldal
Az LCP az űrlap vagy a gomb. Optimalizáld a CSS/JavaScript csökkentésével és a kritikus erőforrások előbetöltésével.
A különböző oldaltípusoknak más-más optimalizálási stratégia kell. Tudd, melyik elem az LCP elemed. Azt az elemet optimalizáld.
Az LCP mobilon és asztali gépen
A mobil LCP általában lassabb, mint az asztali. A mobilhálózat lassabb. A mobil eszközök kevesebb számítási kapacitással rendelkeznek.
Az asztali LCP kiindulási értéke: 1,5 másodperc. A mobil LCP kiindulási értéke: 3 másodperc.
A mobil kétszer olyan lassú. A mobilos felhasználók élesebben érzik a lassúságot.
Először a mobilt optimalizáld. Fókuszálj a képméret csökkentésére (a mobil sávszélesség korlátozott). Csökkentsd a JavaScriptet (a mobil eszközök lassabban dolgozzák fel). Használj mobilbarát formátumokat.
Az LCP javulásának mérése
Kiindulási LCP
Mérd meg az optimalizálás előtt.
Az optimalizálás elvégzése
Új LCP
Mérd meg az optimalizálás után.
Javulás
A kiindulási LCP mínusz az új LCP.
Példa
Kiindulási érték: 2,8 másodperc. Optimalizálás után 1,7 másodperc. A javulás 1,1 másodperc.
A hatás kiszámítása
Az 1,1 másodperces javulás körülbelül 1 százalékkal növelheti a konverziós arányt (a kiindulási értéktől és az iparágtól függően). Havi 50 000 látogatónál ez 500 további konverziót jelent 100 dolláros rendelési értéknél. Havi 50 000 dollárt. Évi 600 000 dollárt.
Hasonlítsd össze az optimalizálás költségével. Ha a költség 50 000 dollár, a megtérülés egy hónap. Kiváló ROI.
Gyakran ismételt kérdések
Honnan tudjuk, melyik elem az LCP elemünk?
Használd a Google Chrome DevToolst. Kattints jobb gombbal az oldalra. Vizsgálat. Performance fül. Rögzítsd az oldalbetöltést. A DevTools megmutatja az LCP elemet. Vagy nézd meg a PageSpeed Insightsban. A Lighthouse azonosítja az LCP elemeket. A Search Console Core Web Vitals jelentését is megnézheted. Az oldalakon megmutatja az LCP elemeket. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Az LCP-t minden oldalon optimalizáljuk, vagy csak a főoldalon?
Optimalizálj minden oldalt. De a forgalom szerint állíts sorrendet. A főoldal fontos, de a termékoldalak (webshopnál) vagy a cikkoldalak (kiadóknál) is. Mérd az LCP-t minden fontos oldalon. A forgalom nagysága alapján rangsorold az optimalizálást.
Az előbetöltés mindig segít az LCP-nél?
Nem mindig. Az előbetöltés sávszélességet használ. Ha egy lényegtelen erőforrást töltesz be előre, olyan sávszélességet használsz el, amelyen egy fontos erőforrást is letölthetnél. Csak a kritikus erőforrásokat töltsd be előre (hero kép, kritikus betűtípus). A nem kritikusakat ne.
Hogyan optimalizáljuk az LCP-t, ha a fő tartalom dinamikus (API-ból töltődik be)?
Az API-hívás késése hozzáadódik az LCP-hez. Csökkentsd az API válaszidejét az adatbázis optimalizálásával, a válaszok gyorsítótárazásával és CDN használatával. Közben mutass vázképernyőt vagy helykitöltő tartalmat, amíg az API betölt. A helykitöltő azonnal megjelenik. A felhasználó betöltöttnek érzékeli az oldalt. A valódi tartalom utána kitöltődik. Az érzékelt LCP gyorsabb a valódinál.
Használjunk késleltetett betöltést az LCP elemnél?
Nem. A késleltetett betöltés addig halogatja a képet, amíg közel nem kerül a látható területhez. Ha a kép a látható részen van (LCP elem), a késleltetett betöltés feleslegesen lassítja. Csak a látható rész alatti képeket töltsd késleltetve. Az LCP elemet töltsd be azonnal.
Miben különbözik az LCP az FCP-től (First Contentful Paint)?
Az FCP az, amikor bármilyen tartalom megjelenik (akár egy kis szöveg is). Az LCP az, amikor a fő tartalom megjelenik (általában egy nagyobb kép vagy címsor). Az FCP gyorsabb az LCP-nél. A felhasználói élményben az LCP fontosabb. Először azt javítsd.