LCP (Largest Contentful Paint)

A felhasználó ezt érzi sebességnek

A látogató nem a TTFB-t érzékeli, hanem azt, mikor jelenik meg a kép és a szöveg. A lassú LCP közvetlen visszafordulást okoz. Webshopban ez elveszett kosár, szolgáltatóknál elveszett ajánlatkérés.

A Google rangsorolási jelként használja

A Core Web Vitals része a page experience jeleknek. Önmagában nem fogja előrébb hozni a gyenge tartalmat. Két hasonló erősségű oldal között viszont dönthet.

AI-szempontból is számít

A generatív keresők és az AI-crawlerek időkorláttal dolgoznak. Ha a fő tartalom későn rajzolódik ki, a renderelő bot egy félkész oldalt lát. A render-blokkoló erőforrások miatt a szöveg akár teljesen hiányozhat abból, amit a modell feldolgoz.

Üzleti következmény

A mobilforgalom aránya a legtöbb magyar KKV-oldalon 60 százalék felett van. Mobilon a lassú kapcsolat gyakoribb, így az LCP ott romlik először. A javítás tipikusan képoptimalizálás, nem szerverbővítés, tehát olcsóbb, mint amire sokan számítanak.

Kikre vonatkozik

• Minden nyilvános weboldalra, amelynek van látható tartalma a hajtás felett
• Webshopokra kiemelten: a kategória- és termékoldalak nagy képekkel dolgoznak
• Landing oldalakra: ott a hero-kép szinte mindig az LCP-elem
• Hírportálokra, blogokra: a cikk borítóképe a tipikus jelölt

Kikre nem vagy kevésbé

• Bejelentkezés mögötti felületekre: ezeket a keresők nem mérik, de a felhasználói élményt ott is rontja
• Staging és fejlesztői környezetekre: ott az érték félrevezető, mert nincs éles cache és CDN (tartalomszolgáltató hálózat)
• Tisztán API-végpontokra: nincs vizuális kirajzolás

A mezei adat mérése külön feltétel. A CrUX csak akkor ad LCP-értéket, ha elegendő valós látogatásod van. Kis forgalmú oldalaknál gyakran csak laboradat érhető el.

Lépések

1. Nyisd meg a PageSpeed Insights oldalt, és illeszd be az URL-t.
2. Nézd meg a felső blokkot: ez a valós látogatói adat (CrUX), ha van elég forgalom.
3. Görgess a Lighthouse-szakaszhoz: ez a laborérték, lassú hálózat emulációjával.
4. Kattints a "Largest Contentful Paint element" diagnosztikára, és nézd meg, melyik elemet mérte.
5. Böngésző devtoolsban nyisd meg a Performance fület, futtass egy felvételt, és keresd az LCP jelölőt az idővonalon.
6. A Network fülön ellenőrizd, mikor indul az LCP-elem letöltése. Ha későn, az a sorrend hibája.

Jó jel

• A mezei LCP 2,5 másodperc alatt van mobilon is
• Az LCP-elem egy optimalizált, modern formátumú kép
• Az LCP-elem letöltése az első hálózati kérések között indul
• A TTFB 0,8 másodperc alatt marad

Rossz jel

• A labor-LCP 4 másodperc felett
• Az LCP-elem lazy loadinggal töltődik
• Az LCP-kép több száz kilobájtos JPEG vagy PNG
• A kép letöltése csak egy JavaScript-fájl lefutása után indul
• A mezei és a labor adat is rossz: akkor nem mérési torzításról van szó

Amit ne csinálj

Ne mérj egyszer, és ne vonj le belőle következtetést. A laborérték futásonként ingadozik. Három mérés mediánja használható.

A riport ajánlása minden platformon ugyanaz: csökkentsd a legnagyobb elem betöltési idejét. Ennek négy eszköze van: képoptimalizálás, preload, kritikus CSS, gyors szerver.

WordPress

1. Telepíts képkonvertáló bővítményt, és állítsd át a képeket WebP vagy AVIF formátumra.
2. Kapcsold ki a lazy loadingot a hero-képen. A legtöbb sebességbővítőben van kivétel-lista.
3. Kapcsolj be oldalcache-t, és ellenőrizd, hogy a kezdőlap is cache-elt.
4. A sebességbővítőben engedélyezd a kritikus CSS generálását.
5. Ha a TTFB 0,8 másodperc felett van, váltsd a tárhelyet PHP 8.2+ és objektumcache támogatásra.

Shopify

1. A témában keresd meg a hero-szekció képét, és vedd le róla a loading="lazy" attribútumot.
2. Használd a beépített image_url szűrőt szélességparaméterrel, hogy ne teljes méretben töltsön.
3. Csökkentsd az aktív appok számát: minden app saját szkriptet tölt be.
4. A theme.liquid fájlban vidd a nem kritikus szkripteket defer attribútummal a végére.

Unas

1. Az adminban a képfeltöltésnél tartsd a fájlméretet 200 kB alatt.
2. A sablon fejlécében ellenőrizd a beillesztett külső szkripteket, és a nem szükségeseket töröld.
3. A slider helyett használj egyetlen statikus képet a kezdőlapon.
4. A Google Tag Manager kódját ne a head elejére tedd.

Shoprenter

1. A dizájn szerkesztőben csökkentsd a kezdőlapi bannerek számát és méretét.
2. Ellenőrizd, hogy a termékképek a megjelenítési méretben töltődnek-e, nem eredetiben.
3. A saját beillesztett kódokat vidd a lap aljára.
4. Ha egyedi sablont használsz, kérd a fejlesztőtől az LCP-kép preloadját.

Egyedi fejlesztés

1. Azonosítsd az LCP-elemet devtoolsban, ne találgass.
2. Tedd be a képre a fetchpriority="high" attribútumot.
3. Adj hozzá <link rel="preload"> sort a HTML head részébe.
4. Szállítsd a képet AVIF vagy WebP formátumban, <picture> elemben fallbackkel.
5. Emeld ki a hajtás feletti CSS-t inline stílusként, a többit töltsd aszinkron módon.
6. Tedd a statikus fájlokat CDN (tartalomszolgáltató hálózat) mögé, hosszú cache-idővel.
7. Mérj újra minden lépés után, hogy lásd, melyik hozta a javulást.

• Lazy loading a hero-képen: a lusta betöltés a hajtás felett késlelteti pont azt az elemet, amit mérünk.
• Eredeti méretű képek használata: egy 3000 pixel széles fotó 400 pixeles helyen felesleges megabájtokat tölt.
• CSS-háttérkép hero-nak: a böngésző csak a stíluslap feldolgozása után tudja meg, hogy le kell töltenie.
• Mindenre preload: ha tíz erőforrást jelölsz meg prioritásosnak, egyiknek sincs prioritása.
• Csak a laborértékre optimalizálás: a magyar KKV-oldalak többségén a valós CrUX-adat jobb, mint a lassú 4G emuláció eredménye.
• A render-blokkoló szkriptek figyelmen kívül hagyása: a fejlécben lévő szinkron JavaScript minden kirajzolást késleltet.
• Webfont-váltás késleltetése: ha az LCP-elem szöveg, a rosszul beállított font-display másodperceket vesz el.

A hero-kép prioritásos betöltése. A preload sor a head elejére kerül, még a stíluslap elé:

<head>
  <link rel="preload" as="image"
        href="/img/hero.avif"
        type="image/avif"
        fetchpriority="high">
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <picture>
    <source srcset="/img/hero.avif" type="image/avif">
    <source srcset="/img/hero.webp" type="image/webp">
    <img src="/img/hero.jpg"
         width="1200" height="600"
         alt="Műhely belső tere munka közben"
         fetchpriority="high"
         decoding="async">
  </picture>
</body>

A width és height megadása a CLS miatt is kell. A loading="lazy" szándékosan hiányzik.

A szerver válaszidejét curl-lel mérheted, ez az LCP első szakasza:

curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\nTeljes: %{time_total}s\n" https://pelda.hu/

Ha a TTFB 0,8 másodperc felett van, előbb a szervert javítsd. Képoptimalizálással onnan nem hozol be semmit.