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
Szekció neve “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 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
Szekció neve “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
Szekció neve “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.
- Derítsd ki, mi a legnagyobb elem a leglassabb oldalaidon (többnyire a hero-kép).
- Gyorsítsd az első bájtot: Első bájt (TTFB).
- A képet ne töltsd lustán, adj neki
fetchpriority="high"attribútumot, és legyen kicsi a fájl: Modern képformátum. - Ne blokkolják a megjelenítést a szkriptek és a CSS: Renderelést blokkoló szkriptek.
- Ha 4 s fölötti, nézd a részletes útmutatót: A fő tartalom betöltése előbb (LCP).
<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
Szekció neve “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 tesztet.
- PageSpeed Insights: felül a valódi látogatók adatai (CrUX), alul a labor.
Készült: