A Core Web Vitals a Google által használt, felhasználói élményhez kapcsolódó mérőszámok egy csoportja. Azt próbálják megragadni, hogy egy weboldal mennyire gyorsan jeleníti meg a fő tartalmat, milyen gyorsan reagál a felhasználói műveletekre, illetve mennyire stabil a megjelenése.
A három jelenlegi Core Web Vitals mutató:
- LCP (Largest Contentful Paint): a fő tartalom betöltődésének sebessége;
- INP (Interaction to Next Paint): az oldal interakciókra adott válaszideje;
- CLS (Cumulative Layout Shift): a váratlan vizuális elmozdulások mértéke.
A Core Web Vitals tehát nem egyszerűen azt jelenti, hogy „gyors-e az oldal”. Három különböző felhasználói élményt vizsgál.
Mi a Core Web Vitals?
A Core Web Vitals olyan teljesítménymutatók, amelyek a weboldalak felhasználói élményének bizonyos, mérhető aspektusait írják le.
A három mutató három különböző kérdésre keresi a választ:
Megjelenik-e gyorsan a lényeg?
→ LCP
Gyorsan reagál-e az oldal arra, amit a felhasználó csinál?
→ INP
Stabil marad-e közben az oldal elrendezése?
→ CLS
Ez azért fontos, mert egy oldal attól még nem feltétlenül kellemesen használható, hogy összességében gyorsan betöltődik. Lehet például gyors az első megjelenés, miközben egy gomb késve reagál, vagy egy később betöltődő elem eltolja a már látható tartalmat.
A Core Web Vitals ezért nem egyetlen „sebességpontszám”, hanem több különböző szempontot mérő rendszer.
LCP – Largest Contentful Paint
Az LCP azt méri, hogy mennyi idő alatt jelenik meg a felhasználó számára a fő tartalmi elem.
Ez gyakran egy nagy kép, egy címsorhoz kapcsolódó blokk vagy más jelentős, a képernyőn látható elem.
Egyszerűen megfogalmazva:
Mikor érzékelhető úgy, hogy az oldal fő tartalma már megjelent?
Ha egy weboldal első látásra üresnek tűnik, majd csak később jelenik meg a fő kép vagy a legfontosabb tartalom, a felhasználó lassúnak érzékelheti az oldalt.
Az LCP-t többek között befolyásolhatja:
- a szerver válaszideje;
- a fő tartalomhoz szükséges erőforrások betöltése;
- a képek mérete és formátuma;
- a CSS és JavaScript feldolgozása;
- a böngészőben történő renderelés.
Ezért egy rossz LCP-érték mögött nem feltétlenül „a nagy kép” áll. A teljes betöltési folyamatot érdemes vizsgálni.
INP – Interaction to Next Paint
Az INP azt vizsgálja, hogy az oldal mennyire gyorsan reagál a felhasználó interakcióira.
Ilyen interakció lehet például:
- egy gombra kattintás;
- egy menü megnyitása;
- egy űrlap használata;
- egy vezérlőelem aktiválása.
A kérdés itt nem az, hogy mikor töltődött be az oldal, hanem az, hogy mi történik azután, hogy a felhasználó csinál valamit.
Egy oldal tehát lehet első ránézésre gyors, mégis kellemetlenül lassú használat közben, ha egy kattintás után érezhető késéssel történik meg a következő vizuális változás.
Az INP-t különösen befolyásolhatja a böngészőben futó JavaScript mennyisége és az, hogy ezek a feladatok mennyire terhelik a fő szálat.
Ezért a JavaScript-optimalizálás nem pusztán „sebességoptimalizálás”: a túl sok vagy rosszul működő kliensoldali kód az interakciók gyorsaságát is ronthatja.
CLS – Cumulative Layout Shift
A CLS a váratlan vizuális elmozdulásokat méri.
Talán ez a legkönnyebben elképzelhető probléma.
Például:
- megjelenik egy gomb;
- a felhasználó éppen rákattintana;
- közben betöltődik egy kép vagy hirdetés;
- az oldal tartalma elmozdul;
- a felhasználó végül egy teljesen másik elemre kattint.
Ez nem feltétlenül lassú oldalbetöltés, mégis rossz felhasználói élmény.
A CLS problémáit okozhatja például, ha a böngésző előre nem tudja, mekkora helyet kell fenntartania egy képnek, vagy ha később töltődő elemek megváltoztatják az oldal elrendezését.
A megoldás egyik alapelve ezért az, hogy a böngésző számára előre kiszámítható legyen az elemek helyigénye.
Mit jelentenek ezek a gyakorlatban?
A három mutatót érdemes nem technikai rövidítésként, hanem felhasználói élményként értelmezni.
| Mutató | Gyakorlati kérdés |
|---|---|
| LCP | Milyen gyorsan jelenik meg a fő tartalom? |
| INP | Milyen gyorsan reagál az oldal a felhasználóra? |
| CLS | Stabil marad-e közben az oldal elrendezése? |
Ez egyben azt is megmutatja, miért nem érdemes egyetlen sebességszám alapján megítélni egy webhelyet.
Egy weboldalnak lehet jó az LCP-je, miközben az INP problémás. Vagy gyorsan reagálhat a kattintásokra, miközben az oldal elemei betöltés közben folyamatosan elmozdulnak.
Hogyan javíthatók a Core Web Vitals értékek?
A javítás mindig attól függ, melyik mutatóval és milyen technikai okkal van probléma.
LCP javítása
Érdemes megvizsgálni többek között:
- a szerver válaszidejét;
- a fő tartalomhoz tartozó képeket;
- a képek méretét és formátumát;
- a kritikus CSS-t és JavaScriptet;
- a gyorsítótárazást;
- a renderelést késleltető erőforrásokat.
INP javítása
Itt elsősorban az oldal interaktív működését érdemes vizsgálni:
- túl sok JavaScript fut-e;
- vannak-e hosszú JavaScript-feladatok;
- szükséges-e minden betöltött script;
- nem terheli-e valamelyik plugin vagy külső szolgáltatás indokolatlanul a böngészőt;
- optimalizálható-e az eseménykezelés.
CLS javítása
A vizuális stabilitás javításához többek között:
- érdemes előre helyet biztosítani a képeknek és más dinamikus elemeknek;
- kerülni kell a tartalom váratlan átrendezését;
- ellenőrizni kell a betöltés közben megjelenő hirdetéseket, bannereket és egyéb külső elemeket;
- meg kell vizsgálni az oldal betöltési sorrendjét.
Hol ellenőrizhető a Core Web Vitals?
A Core Web Vitals értékei több eszközzel is vizsgálhatók. A Google Search Console külön Core Web Vitals jelentést biztosít, ahol a Google által gyűjtött valós felhasználói adatok alapján lehet problémás URL-eket és URL-csoportokat azonosítani.
A PageSpeed Insights pedig egy adott oldal teljesítményének vizsgálatára használható, és a laboratóriumi mérés mellett rendelkezésre álló valós felhasználói adatokat is megjelenítheti.
Fontos különbség, hogy a laboratóriumi mérés és a valós felhasználói adatok nem ugyanazt jelentik. Egy fejlesztői környezetben jól teljesítő oldal a tényleges látogatók különböző eszközei, hálózatai és használati körülményei miatt más eredményeket is produkálhat.
A Core Web Vitals nem önálló SEO-cél
A Core Web Vitals optimalizálása fontos része lehet egy webhely technikai fejlesztésének, de nem érdemes úgy tekinteni rá, mint egyetlen SEO-versenyre, ahol a lehető legmagasabb pontszámot kell elérni.
A jó felhasználói élményhez a teljes webhely számít: a hasznos tartalom, a keresési szándék megfelelő kiszolgálása, a navigáció, a mobilos használhatóság, a technikai működés és természetesen a teljesítmény is.
A Core Web Vitals abban segít, hogy a teljesítmény és a felhasználói élmény bizonyos részeit mérhetőbbé és diagnosztizálhatóbbá tegyük.
Ha tehát egy webhely Core Web Vitals problémát jelez, a következő kérdés nem az, hogy „hogyan szerezzünk jobb pontszámot?”, hanem az, hogy mi okozza a problémát, és milyen felhasználói élményt ront?
A következő lépés ehhez a webhely teljesítményének technikai vizsgálata: milyen képek, JavaScript-ek, CSS-ek, pluginok, tárhely- vagy külső erőforrások lassíthatják az oldalt.