Mik azok a Core Web Vitals, és miért számítanak (érthetően)

Lehet, hogy már látta a Google vagy egy marketinges üzenetében: „javítsa a Core Web Vitals értékeit.” Technikai dolognak hangzik, de valójában egyszerű dologról van szó: milyen gyorsan és kényelmesen használható az Ön weboldala. Ez pedig hatással van a Google-helyezésekre is, és arra is, hogy a látogató vásárol-e, vagy továbbáll.

A három szám, amelyről szó van

A Core Web Vitals a weboldal használati élményének három mérhető mutatója, amelyeket a Google a SEO-értékelésnél is figyelembe vesz:

LCP (Largest Contentful Paint) - milyen gyorsan jelenik meg a fő tartalom. Hány másodperc telik el, amíg a látogató meglátja a lényeget (például egy nagy képet vagy címsort). Cél: 2,5 másodpercen belül.

INP (Interaction to Next Paint) - milyen gyorsan reagál az oldal egy kattintásra. Amikor a felhasználó kattint vagy gépel, milyen gyorsan történik valami. A régebbi FID mutatót váltotta fel. Cél: 200 ms-on belül.

CLS (Cumulative Layout Shift) - mennyire „ugrál” a tartalom. Ismerős helyzet: egy gombra szeretne kattintani, és az utolsó pillanatban elmozdul az oldal, mert betöltődött egy hirdetés. Cél: 0,1 alatt.

Miért számít ez

1. A Google figyelembe veszi. A Core Web Vitals az oldalminőség értékelésének része. Egyébként azonos tartalom mellett a gyorsabb weboldal előnyben van.

2. A lassú weboldal ügyfeleket veszít. Minden plusz másodperc betöltési idő csökkenti az esélyét, hogy a látogató marad. Webáruháznál ez közvetlenül megjelenik a bevételben.

3. Hitelesség. A gyors, gördülékeny weboldal profi benyomást kelt. A lassú és ugráló olcsónak hat, függetlenül attól, mennyibe került.

Miért lassú gyakran egy weboldal

A leggyakoribb okok, amelyeket a gyakorlatban látunk:

• Page builderek (Elementor, WPBakery) - kényelmesek, de sok felesleges kódot generálnak.
• Optimalizálatlan képek - egy fényképezőgépes fotó akár 5 MB is lehet; a weboldalon ennek töredéke is elég.
• Túl sok bővítmény, amelyek minden oldalon betöltődnek.
• Lassú vagy olcsó hosting.
• Nincs gyorsítótárazás, és nincsenek modern képformátumok (WebP/AVIF).

Hogyan mérhetők a Core Web Vitals értékek

Több lehetősége is van arra, hogy megtudja, hogyan áll az Ön weboldala:

PageSpeed Insights - a leggyorsabb út. Beírja a weboldal címét, és azonnal látja a Core Web Vitals pontszámot. Zöld = rendben, narancs/piros = van hová fejlődni. A tesztet mobilra is futtassa le, ott az eredmény általában rosszabb. A PageSpeed konkrét optimalizálásokat is javasol.

Search Console (Google Search Console) - ha a weboldala indexelve van, „Core Web Vitals” jelentést kínál valós adatokkal, tényleges felhasználóktól. Ezek field data, nem laboratóriumi tesztek, így jobban tükrözik a valóságot. Nézze a 28 napos átlagot.

Chrome User Experience Report (CrUX) - anonimizált adatok több millió valódi látogatótól. Régió, eszköztípus és kapcsolattípus szerint bontva. Ha tudni szeretné, hogyan látják a weboldalát valódi emberek Európában, a CrUX a forrás.

A lab és a field adatok különbsége: a PageSpeed teszt szabványos környezetben futtatja a weboldalát (laptop teljesítménye, 4G hálózat). A valódi felhasználóknak különböző eszközeik és internetsebességük van. Ezért a field data (Search Console, CrUX) a fontosabb: azt látja, hogyan néz ki a helyzet a gyakorlatban.

Hogyan javíthatók a Core Web Vitals értékek

Ha a PageSpeed Insights vagy a Search Console narancs vagy piros színt mutat, íme a konkrét lépések a javításhoz.

Hogyan javítható az LCP (a tartalom betöltési sebessége)

1. Optimalizálja a képeket. A nyitóoldal nagy képe a lassú LCP leggyakoribb oka. Csökkentse a fájlméretet (tömörítse a JPG/PNG fájlokat), vagy használjon modern formátumot (WebP/AVIF). A webes képeknek nem kell olyan nagy felbontásúnak lenniük, mint a nyomdai anyagoknak, általában 1920x1080 px is elegendő.

2. Rövidítse le az első bájtig eltelt időt (TTFB). Ha a szerver sokáig dolgozza fel a requestet, a gyors tartalom is későn érkezik meg. Ellenőrizze, hogy minőségi hostingja van-e (nem olcsó osztott tárhely). A CDN (Content Delivery Network, például a QUIC.cloud) felgyorsítja a tartalom kiszolgálását, mert a felhasználóhoz közel gyorsítótárazza azt.

3. Halassza el a nem kötelező JavaScripteket. A nehéz szkriptek, amelyek rögtön az elején töltődnek be, blokkolják a tartalmat. Ha egy szkriptre nincs szükség a megjelenítéshez, halassza el a defer vagy az async attribútummal.

4. Kerülje a loading="lazy" használatát az LCP képen. Az LCP képet gyorsan kell betölteni. Ha lazy jelölést kapott, csak lassabb lesz.

Hogyan javítható az INP (reakció a kattintásra)

1. Csökkentse a JavaScript mennyiségét. A sok JavaScript hosszabb parsingot és fordítást jelent. A böngészőnek az összes JS-t be kell olvasnia és le kell fordítania, mielőtt biztonságosan futtatni tudja a kódját. Ha sok bővítménye van, ellenőrizze, hogy valóban mindegyikre szüksége van-e.

2. Bontsa kisebbekre a hosszú feladatokat. Ha egy szkript egyszerre sok munkát végez, az egész JavaScript thread blokkolódik, és az oldal nem reagál a kattintásokra. Használja a setTimeout vagy a requestAnimationFrame függvényt a munka kisebb darabokra bontásához.

3. Optimalizálja az event handlereket. Ha kattintásra történik valami (például számítás vagy DOM-módosítás), végezze el a lehető leggyorsabban. Kerülje a DOM felesleges újraszámolását közvetlenül egy CSS-módosítás után.

4. Ellenőrizze, hány bővítményt futtat. A bővítmények hasznosak, de minden bővítmény = újabb JavaScript. Van bővítménye analitikára, felugró ablakokra, értékelésekre... mindegyik a háttérben fut és dolgozik. Ha 15-nél több bővítménye van, az már probléma.

Hogyan javítható a CLS (a tartalom stabilitása)

1. Adjon méreteket a képeknek. Rendeljen width és height attribútumot vagy CSS aspect-ratio tulajdonságot minden képhez. A böngésző így előre tudja, mekkora helyet foglal a kép, és nem keletkezik tartalomeltolódás.

2. Foglaljon helyet a dinamikus tartalomnak. Ha az oldalra csak betöltés közben kerül tartalom (hirdetések, videók, widgetek), állítson be minimális magasságot (min-height) vagy aspect-ratio értéket a konténerre. Így a később betöltődő tartalom nem tol el minden mást.

3. Kerülje a tartalmat eltoló animációkat. Az olyan tulajdonságok animálása, mint a top, a left vagy a box-shadow, újrarajzolást és eltolódást okoz. Helyette használja a transform tulajdonságot, amely a többi tartalom befolyásolása nélkül változtatja meg a pozíciót.

4. Figyeljen a betűtípusokra. Ha a webes betűtípus lassan töltődik be, a böngésző először egy tartalék betűtípust (System Font) jelenít meg, majd amikor a webes betűtípus betöltődik, az egész szöveg nagyobb vagy kisebb lesz. Az esettől függően állítsa be a font-display: optional vagy a font-display: swap értéket.

Core Web Vitals és WordPress

Sok WordPress weboldal page builderrel készül (Elementor, WPBakery, Divi). Ezek az eszközök kényelmesek, hiszen mindent grafikus felületen lehet kattintgatni, de ennek a minőség az ára: sok felesleges JavaScriptet és CSS-t generálnak, ami rontja a Core Web Vitals értékeket. Ha a weboldala Elementorban készült, és piros pontszámot lát, az gyakran a page builderhez kötődik, nem az Ön tartalmához.

A leggyorsabb WordPress weboldalak (amelyek zöldet érnek el a PageSpeedben) page builder nélkül készülnek, tiszta kóddal és saját témával. Ez az oka annak is, hogy sok régi weboldalt Elementorról tiszta WordPressre költöztetnek: a teljesítmény további optimalizálás nélkül is visszatér.

Ha a weboldalát az alapoktól mi építjük, a Core Web Vitals értékekkel kezdettől számolunk. Ha meglévő weboldala gyengébb eredményeket mutat, a keresőoptimalizálás a Core Web Vitals problémák elemzését és javítását is magában foglalja.

Mit lehet tenni

Egy része gyorsan megoldható (képoptimalizálás, gyorsítótár), más része viszont beavatkozást igényel abba, ahogyan a weboldal fel van építve. Mi a weboldalakat az alapoktól a teljesítményre összpontosítva építjük, a page builderek felesleges ballasztja nélkül. Ha pedig meglévő, lassú weboldala van, a keresőoptimalizálás keretében meg tudjuk találni, mi fékezi, és ki tudjuk javítani.

Szeretné tudni, mi lassítja a weboldalát? Írjon nekünk, megnézzük, és konkrétan megmondjuk, min érdemes javítani.