Core Web Vitals (CWV): A Google Sebesség-Mérlege
Már nem elég, ha 'gyorsnak tűnik' az oldal. A Google mérnökien pontos metrikák (LCP, CLS, INP) alapján rangsorolja a weboldalad felhasználói élményét.
Éveken keresztül a weboldalak sebességét egyetlen egyszerű mutatóval jellemeztük: 'Mennyi idő alatt tölt be az oldal?'. A Google 2021-ben azonban paradigmaváltást hozott a SEO és a webfejlesztés világában a Core Web Vitals (CWV) metrikák bevezetésével. A Google felismerte, hogy a teljes betöltési idő önmagában nem írja le a felhasználói élményt (UX). Lehet, hogy egy oldal 'késznek' tűnik, de ha rákattintasz egy gombra, nem történik semmi, vagy olvasás közben a szöveg hirtelen elugrik egy utólag betöltődő reklám miatt.
A Core Web Vitals három speciális, felhasználó-központú mutatóból áll, amelyek a vizuális betöltést, az interaktivitást és a vizuális stabilitást mérik. Ezek az értékek közvetlen (bár nem egyedüli) hatással vannak a keresőoptimalizálási (SEO) helyezésekre. Az ElysiumGlobal fejlesztési gyakorlatában a frontend kódolás már az első naptól kezdve ezeknek a metrikáknak a 'zöld zónában' tartására fókuszál.
LCP (Largest Contentful Paint): A látható sebesség
Az LCP azt méri, hogy mennyi idő telik el, mire a weboldal legnagyobb, fő tartalmi eleme (ez lehet egy Hero-kép, egy videó, vagy a H1-es főcím) teljesen megjelenik a képernyőn. A Google elvárása szerint ennek 2.5 másodpercen belül meg kell történnie. A frontend megoldás: a fő képet soha nem szabad 'Lusta betöltésre' (Lazy Load) állítani, a betűtípusokat elő kell tölteni (Preload), és a szerver válaszidejét (TTFB) minimálisra kell csökkenteni.
CLS (Cumulative Layout Shift): A vizuális stabilitás
Volt már olyan, hogy rá akartál kattintani egy gombra a telefonodon, de az utolsó pillanatban betöltött egy kép felül, a gomb lejjebb ugrott, és te valami egészen másra kattintottál? Ezt méri a CLS (a tartalom ugrálása). A kiváló UX érdekében ennek az értéknek 0.1 alatt kell lennie. A fejlesztői megoldás roppant egyszerű, de sokan elrontják: minden képnek, videónak és iframe-nek (pl. YouTube beágyazás) már a HTML kódban előre meg kell adni a pontos szélességi és magassági attribútumait (`width` és `height`), így a böngésző előre 'lefoglalja' nekik a helyet, és a szöveg nem ugrik arrébb.
INP (Interaction to Next Paint): Az interaktivitás mérése
2024 márciusában az INP váltotta le a korábbi FID (First Input Delay) metrikát. Az INP azt a késedelmet méri, ami egy felhasználói interakció (kattintás egy gombra, billentyűzet lenyomása) és a képernyőn megjelenő vizuális válasz között telik el. A cél a 200 milliszekundum alatti érték. Ha az INP magas, az azt jelenti, hogy a böngésző processzora le van terhelve a háttérben futó nehéz JavaScript kódokkal (főleg third-party scriptek, mint a Facebook Pixel). A megoldás a JavaScript végrehajtás optimalizálása, a feladatok feldarabolása és az aszinkron futtatás (Web Workers használata).
Gyakori kérdések – Core Web Vitals frontend szemmel
Hol tudom ellenőrizni a saját weboldalam CWV értékeit?
A legpontosabb képet a Google Search Console (GSC) ‘Core Web Vitals’ jelentése adja, mivel ez valós felhasználói adatokon (CrUX – Chrome User Experience Report) alapul. Az azonnali, laboratóriumi tesztelésre (pl. fejlesztés közben) a Google PageSpeed Insights a hivatalos eszköz.
A zöld PageSpeed pontszám garantálja az első helyet a Google-ben?
Nem. A Core Web Vitals egy úgynevezett ‘Tie-breaker’ (döntetlen-törő) rangsorolási tényező. A kiváló minőségű, releváns tartalom (SEO, E-E-A-T) és a jó linkprofil továbbra is fontosabb. Azonban ha két oldal tartalma azonos minőségű, a gyorsabb, jobb UX mutatókkal (zöld CWV) rendelkező fog előrébb kerülni.
A weboldal-építők (Elementor, Divi) rontják a CWV értékeket?
Régebben (a sok felesleges DIV generálása miatt) komoly problémát jelentettek a Page Builderek az LCP és INP terén. A modern frissítésekkel (pl. Elementor Flexbox Container) a helyzet sokat javult, de egy egyedi fejlesztésű (Custom Theme) frontend továbbra is mindig sokkal tisztább, ‘zöldebb’ kód-alapot és jobb CWV mutatókat garantál.
Büntet a Google a piros sebesség-metrikák miatt?
Ne veszíts forgalmat a technikai hibák miatt. A technológiai audit során pontosan meghatározzuk, mi okozza a CLS vagy az INP problémákat, és kijavítjuk a kódodat.