Tovább a tartalomhoz

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.

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ó.

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.

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).
  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.
  4. Ne blokkolják a megjelenítést a szkriptek és a CSS: Renderelést blokkoló szkriptek.
  5. Ha 4 s fölötti, nézd a részletes útmutatót: A fő tartalom betöltése előbb (LCP).
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".

  • 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:

Tiszteletben tartjuk a magánszférádat

Sütiket használunk a böngészési élmény javítására és a forgalom elemzésére. Az analitika csak akkor indul, ha engeded. Adatvédelmi irányelvek, Sütitájékoztató.

Sütibeállítások