A Core Web Vitals a Google három mérőszáma, amely a valós látogatók böngészőjében méri az oldal betöltési élményét: a fő tartalom megjelenését, az elrendezés stabilitását és az interakciók válaszidejét. A három mutató az LCP, a CLS és az INP.
Hogyan működik
A Chrome minden valódi oldalletöltésnél méri ezeket az értékeket. Az adatok névtelenül gyűlnek a CrUX adatbázisba. Onnan kapja meg őket a PageSpeed Insights és a Search Console.
A Google a 75. percentilist nézi, nem az átlagot. Ez azt jelenti: a látogatóid háromnegyedének legalább ennyire jónak kell lennie az élmény. A küszöbök:
- LCP: 2,5 mp alatt jó, 4 mp felett rossz
- CLS: 0,1 alatt jó, 0,25 felett rossz
- INP: 200 ms alatt jó, 500 ms felett rossz
Mindhárom mutatót külön mérik mobilon és asztali gépen. A mobil szinte mindig rosszabb. A riportokban ezt látjuk: a magyar KKV-oldalak asztali értéke gyakran zöld, a mobil ugyanakkor piros.
Miért nem ugyanaz, mint a PageSpeed pontszám
A 0-100 közötti PageSpeed pontszám labor adat. Egy szimulált eszközön, egy szimulált hálózaton születik. A Core Web Vitals ezzel szemben mezei adat: valódi emberek, valódi telefonok, valódi wifi.
A kettő eltérhet. Van 45 pontos oldal zöld Core Web Vitals-szal, és van 92 pontos oldal piros INP-vel. A rangsorolásban a mezei adat számít.
Mikor számít igazán
A Core Web Vitals gyenge rangsorolási jel. Nem emeli fel a rossz tartalmat, de holtversenynél dönthet. Sokkal nagyobb a hatása a konverzióra: a lassú mobil oldalról egyszerűen elmennek.
Az AI-keresők esetében más a súlya. A crawlerek jellemzően nem futtatnak JavaScriptet, és nem mérnek felhasználói élményt. Ami számít nekik, az a TTFB és a szerver-válaszidő. Ha 3 másodpercig gondolkodik a szervered, az AI-crawler gyakran feladja.
Röviden: a Core Web Vitals azt méri, milyen az oldalad a tényleges látogatóknak, nem azt, milyennek látja egy teszteszköz.
Miért fontos
SEO-hatás
A Core Web Vitals hivatalos rangsorolási jel. Gyenge jel, de létező. Két hasonló minőségű oldal között a gyorsabb kerül előrébb.
A Search Console külön Core Web Vitals jelentést ad. Ha ott URL-csoportok pirosak, a Google tudja, hogy az oldalad lassú. Ez nem büntetés, hanem beárazott hátrány.
Üzleti hatás
Itt a valódi tét. A lassú mobil oldalról a látogatók jelentős része elmegy, mielőtt bármit látna. Webshopnál ez közvetlen bevételkiesés.
A CLS külön bosszantó. Ha elmozdul a gomb a kattintás pillanatában, a felhasználó véletlenül máshova kattint. Kosároldalon ez félbehagyott vásárlás.
AI-szempont
A generatív keresők nem mérik a Core Web Vitalst. Ami őket érdekli, az a szerver válaszideje és az, hogy megkapják-e a tartalmat HTML-ben. Egy lassú szerver ugyanakkor mindkettőt rontja: a valós látogatót és az AI-crawlert is.
A nehéz JavaScript-építkezés dupla kárt okoz. Rontja az INP-t, és a tartalmat elrejti a botok elől. Erről bővebben: AI-értelmezhetőség: mit ért egy nyelvi modell az oldaladból.
Technikai példa
A TTFB gyors ellenőrzése parancssorból. Ez az LCP első szakasza, és ez az, amit az AI-crawlerek is éreznek:
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\nTeljes: %{time_total}s\n" https://pelda.hu/
Jó érték 200 ms alatt. 600 ms felett a szerveroldalon van a probléma, nem a frontenden.
Az LCP-kép helyes kezelése. A fetchpriority korán jelzi a böngészőnek, mi a fontos, a width és height pedig megakadályozza a CLS-t:
<link rel="preload" as="image" href="/kepek/hero.avif" fetchpriority="high">
<img src="/kepek/hero.avif"
alt="Termékfotó a nyitóoldalon"
width="1200"
height="600"
fetchpriority="high"
decoding="async">
<img src="/kepek/galeria-3.avif"
alt="Galéria kép"
width="800"
height="600"
loading="lazy"
decoding="async">
A hajtás feletti képen soha ne legyen loading="lazy". A lentebbi képeken viszont mindig legyen.
Saját mérés a böngészőben, a Google hivatalos könyvtárával. Így a valódi látogatóid adatát küldheted a saját analitikádba:
<script type="module">
import { onLCP, onCLS, onINP } from 'https://unpkg.com/web-vitals@4?module';
function kuldes(metrika) {
console.log(metrika.name, metrika.value, metrika.rating);
}
onLCP(kuldes);
onCLS(kuldes);
onINP(kuldes);
</script>
A rating mező értéke good, needs-improvement vagy poor. Pontosan a Google küszöbeit használja.
Gyakori kérdések
Tényleg számít a Core Web Vitals a rangsorolásban?
Igen, de gyenge jelként. A Google megerősítette, hogy rangsorolási tényező, viszont a tartalom relevanciája sokkal nagyobb súlyú. Rossz tartalmat nem ment meg a zöld mérőszám. Hasonló minőségű oldalak között viszont dönthet.
Miért zöld a PageSpeed pontszámom, ha a Search Console pirosat mutat?
Mert két különböző dolgot mérnek. A PageSpeed pontszám laboradat, egy szimulált eszközön készül. A Search Console a valós látogatók CrUX-adatát mutatja, régi telefonokkal és gyenge mobilnettel. A mezei adat a mérvadó.
Mennyi idő alatt látszik a javítás hatása?
Jellemzően 3-4 hét. A CrUX 28 napos gördülő ablakkal dolgozik, tehát a mai javítás csak fokozatosan szorítja ki a régi méréseket. A laboradat azonnal javul, a Search Console jelentés viszont lassan követi.
Nincs CrUX-adatom, ez baj?
Nem. Csak annyit jelent, hogy az oldalad forgalma a Google minimum-küszöbe alatt van. Ilyenkor a Lighthouse laborméréssel és a Chrome DevTools Performance fülével dolgozz. Ugyanazokat a dolgokat kell javítani.
Elég egy cache-plugin a Core Web Vitals javításához?
Nem. A cache főleg a TTFB-t és az LCP-t javítja. A CLS-hez képméretek kellenek, az INP-hez pedig kevesebb JavaScript. Mindhárom mutatót külön kell kezelni.
