# LCP, valódi látogatók

> A legnagyobb tartalmi elem megjelenési ideje a valódi Chrome-látogatóknál (CrUX, 28 nap, 75. percentilis); 2,5 s alatt jó.

Az LCP (Largest Contentful Paint) azt mutatja, mennyi idő után jelenik meg a lap legnagyobb tartalmi eleme. Ez a teszt nem laborban méri, hanem azt nézi, mit tapasztaltak a valódi látogatók a saját eszközükön és hálózatukon. A Core Web Vitals része, a keresők is használják.

## Valódi látogatók és labor

A Chrome UX Report (CrUX) a Chrome azon felhasználóinak anonim mérési adatait gyűjti, akik ezt engedélyezték. Az adat 28 napos gördülő időszakra összesített, és a 75. percentilist adjuk meg: a betöltések legalább 75%-a ennél gyorsabb. Ez a valódi helyzetet mutatja, de nem azonnali (a javítás hatása napokig lassan épül be), és csak Chrome-ból jön: iOS-es Chrome, Android WebView és más Chromium-alapú böngészők (például Edge) nem járulnak hozzá. A [Labor-LCP](https://hub.hellowp.io/hu/report/teljesitmeny/labor-lcp/) ezzel szemben egy szabályozott, azonnal ismételhető mérés. A két érték eltérhet; a web.dev szerint a javítandó dolgok kiválasztásához a valódi adat az irányadó.

## Hogyan mérjük

A riport a Google Chrome UX Report API-ját kérdezi le a megadott cím origin-jére (az egész webhelyre, nem csak egy oldalra). Előbb telefonos adatot kér (`formFactor: PHONE`); ha arra nincs adat, az összes eszköz együttes adatát.

- **Megfelelő:** a 75. percentilis 2500 ms vagy kevesebb.
- **Hiba, közepes súlyosság:** 2500 ms felett, 4000 ms-ig.
- **Hiba, magas súlyosság:** 4000 ms felett.
- **Nem mérhető:** nincs beállított API-kulcs a riportban, nincs elég adat (kis forgalmú webhely), az LCP-érték hiányzik a válaszból, vagy hiba volt a lekérdezéskor.

A web.dev határai ugyanezek (jó 2,5 s vagy kevesebb, gyenge 4 s felett); a riport egyezik.

## Hogyan javítsd

A javítás ugyanaz, mint a laborban mért LCP-nél, de a hatás csak napok múlva látszik a CrUX-ban.

1. Derítsd ki, mi a legnagyobb elem a leglassabb oldalaidon (többnyire a hero-kép).
2. Gyorsítsd az első bájtot: [Első bájt (TTFB)](https://hub.hellowp.io/hu/report/teljesitmeny/elso-bajt-ttfb/).
3. A képet ne töltsd lustán, adj neki `fetchpriority="high"` attribútumot, és legyen kicsi a fájl: [Modern képformátum](https://hub.hellowp.io/hu/report/teljesitmeny/modern-kepformatum/).
4. Ne blokkolják a megjelenítést a szkriptek és a CSS: [Renderelést blokkoló szkriptek](https://hub.hellowp.io/hu/report/teljesitmeny/renderelest-blokkolo-szkriptek/).
5. Ha 4 s fölötti, nézd a részletes útmutatót: [A fő tartalom betöltése előbb (LCP)](https://hub.hellowp.io/hu/report/teljesitmeny/a-fo-tartalom-betoltese-elobb-lcp/).

### HTML

```html title="HTML"
<img src="/kepek/hero.webp" width="1200" height="600" alt="A kép leírása" fetchpriority="high">
```

Csak a fő, hajtás fölötti képre tedd, és azon ne legyen `loading="lazy"`.

## Hogyan ellenőrizd

- A javítás után a CrUX-adat fokozatosan frissül (28 napos gördülő időszak), ezért a riport újramérése csak hetek alatt mutatja a teljes hatást. A gyors visszajelzéshez használd a [Labor-LCP](https://hub.hellowp.io/hu/report/teljesitmeny/labor-lcp/) tesztet.
- [PageSpeed Insights](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/): felül a valódi látogatók adatai (CrUX), alul a labor.