- júniusától a Google organikus rangsorolási tényezőként is figyelembe veszi a weboldal által nyújtott felhasználói élményt, amit az Alapvető Webes Vitals mutatókon (angolul Core Web Vitals) keresztül mér.
De mik is ezek az Alapvető Webes Vitals mutatók és mit mérnek pontosan? Erről fog szólni ez a blogbejegyzés, és emellett még az alábbiakra is kitérünk:
- Core Web Vitals jelentése
- Alapvető Webes Vitals mutatók szerepe a keresőoptimalizálásban
- A három Core Web Vitals mutató jelentése és értelmezése
- Alapvető Webes Vitals mutatók mérése Google Search Console-ban és egyéb eszközökben
- Google Core Web Vitals mutatók javításának technikái, best practice-ek, amiket érdemes követni
Tartalomjegyzék
Core Web Vitals jelentése
A Core Web Vitals (rövidítve CWV), magyarul Alapvető Webes vitals-mutatók egy adott oldal felhasználói élménnyel kapcsolatos teljesítményére ad mutatószámokat valós használati adatok alapján.
Három ilyen Core Web Vitals mutatót ad meg és mér a weboldalainkon a Google. A mutatók részletesebb magyarázatára és mérésére, valamint az elérni kívánt ideális szintekre még részletesebben ki fogunk térni, most csak nagyon röviden bemutatjuk őket:
1. Legnagyobb vizuális tartalomválasz (angolul Largest Contentful Paint, rövidítve LCP)
A Legnagyobb vizuális tartalomválasz (angolul Largest Contentful Paint) Webes vitals-mutató azt méri, hogy milyen gyorsan tölt be a legnagyobb vizuális tartalom az oldalon.
Ez azért fontos, mert ez alapján látja a felhasználó, hogy a weboldal betöltődés alatt van. Ez az a Core Web Vitals mutató, ami leginkább az oldal sebességével kapcsolatos.
2. Első interakciótól számított válaszkésés (angolul First Input Delay, rövidítve FID)
Az Első interakciótól számított válaszkésés (First Input Delay) az az idő, ami egy linkre vagy gombra kattintás és a böngésző válasza között eltelik, ez gyakorlatilag a weboldal interaktivitását méri.
Szintén rossz felhasználói élményhez vezet, ha a weboldalunk nem reagál elég gyorsan az egyes felhasználói interakciókra. Hasonló javításokat kell végeznünk mint az LCP esetén, ha javítani szeretnénk az ezzel kapcsolatos teljesítményét az oldalunknak.
3. Elrendezés összmozgása (angolul Cumulative Layout Shift, CLS)
Végül a harmadik CWV mutató az Elrendezés összmozgása, vagy angolul Cumulative Layout Shift, CLS), ami kevésbé az oldal betöltődési sebességével kapcsolatos, hanem a vizuális stabilitással, azaz azt méri, hogy a weboldal betöltődése és használata közben mennyire fordul elő, hogy oldalelemek váratlanul elmozognak.
Ezeket az elmozgásokat, amiket általában a hirdetések esetén tapasztalhatunk, szintén kerülni kell, hiszen tényleg elég bosszantó és rossz felhasználó élményhez vezet, ha az oldalon lévő tartalmak böngészés közben ugrálnak, és például emiatt kattintunk olyan hirdetésekre, amik amúgy nem relevánsak számunkra.
És nemcsak azt tudjuk, hogy ezek fontos mutatók, hanem a Google meg is mutatja, hogy valós felhasználó adatok alapján a honlapunk oldalai hogyan teljesítenek ezekben a mutatókban. Ennek részleteire a Google Search Console-os fejezetben térünk ki.
De előtte még röviden kitérünk arra, hogy miért olyan fontos a Core Web Vitals mutatók figyelése és rossz értékek esetén weboldalunk javítása.
Alapvető Webes Vitals mutatók szerepe a SEO-ban
A Google már régóta próbálja a webfejlesztőket, dizájnereket és a SEO szakértőket abba az irányba terelni, hogy minél jobb felhasználói élmény nyújtására törekedjenek az oldal megépítésénél.
Hiszen egyrészt az Google célja is az, hogy olyan weboldalakra tereljenek forgalmat a Google-ről, ahol aztán a felhasználó jó user experience-ben részesül, hiszen akkor a következő keresés alkalmával is a Google fogja használni a felhasználó.
Valamint a jó felhasználói élmény a weboldal tulajdonosának is jó, mivel az általában magasabb konverziós arányhoz vezet.
Ahogy a Core Web Vitalst bemutató bejegyzésükben is leírják, bizonyos a felhasználói élményhez kapcsolódó tényezők, mint a weboldal sebessége és a mobilos használhatóság, és a https megléte már korábban is megerősített rangsorolási tényező volt.
Ezekhez csatlakoznak most a Core Web Vitals page experience mutatói is, ahogy az alábbi angol ábrán is látható:
Tehát mostantól törekedni kell arra, hogy az alapvető webes vitals mutatók esetén is minél jobb eredményt érjünk el, hiszen egy Google rangsorolási tényezőről van szó.
Ugyanakkor két dolgot ki kell emelni:
1. Core Web Vitals mutatók hasonlítása a versenytársainkhoz
Ezeket a webes vitals mutatókat mindig a versenytársainkhoz érdemes hasonlítani.
Azaz egy sok képet, videót, javascript kódot tartalmazó webshopnak értelemszerűen sokkal nehezebb tökéletes pontszámot elérni, mint egy egyszerű HTML alapú blognak. De egy webshop esetén a mi SEO versenytársunk nem egy blog lesz, hanem az a webshop, aki valószínűleg hasonló módon egy komplexebb tech stacken fut (és hasonló technikai problémákkal szembesülhet).
Ha nem is tudunk minden Core Web Vitals mutató benchmarknak megfelelni, arra törekedjünk, hogy legalább olyan teljesítményt érjünk el, mint a legfőbb organikus versenytársaink, és akkor abban biztosak lehetünk, hogy nem a CWV miatt fogunk rosszul teljesíteni organikus forgalomban.
2. Az Alapvető Webes Vitals-mutatók csak az egyik SEO rangsorolási tényező a sok közül
Ha nem nagyon szörnyű az oldalunk, akkor attól még hogy a weboldalunk nem szerepel példásan az Alapvető Webes Vitals mutatók mérése szerint, még szerezhetünk egy csomó organikus látogatót.
Megfordítva, csak azért mert nagyon jó felhasználói élményt nyújtunk a usereknek, például nagyon gyorsan betölt a weboldal, attól még nem fogunk sok organikus látogató szerezni Google-ból.
A sok organikus forgalomhoz a keresőoptimalizálás egyéb részterületeire is fókuszálni kell, úgy mint:
- SEO optimalizált tartalomgyártás
- linképítés
- technikai SEO egyéb területei.
Core Web Vitals riport Google Search Console-ban
Ha ellenőrizni szeretnénk, hogy hogyan állunk a Core Web Vitals egyes mutatószámait illetően, hol van szükség javításra, akkor ezt nagyon egyszerűen megtehetjük Google Search Consoleban.
Nyissuk meg a Google Search Console-t, majd ahogy a képen látható, a baloldali menüsávban lévő Alapvető Webes Vitals-mutatók riportra kell kattintani.
Ahogy látható a Core Web Vitalst külön vizsgálja asztali gép és mobil gép esetén.
Ha kapnak elegendő organikus forgalmat a weboldalaink, akkor itt a Google valós felhasználói adatok alapján mutatja meg, hogy hogyan teljesítünk az Alapvető Webes Vitals mutatókat tekintve.
Mint látható, jelen esetben mind asztali mind pedig mobil esetén teljesítjük a Core Web Vitals által támaszott követelményeket, és az oldalaink Jó felhasználói élményt mutatnak.
Ha nem ez a helyzet, és szeretnénk látni, hogy mely oldallal vannak problémák, akkor a ’Jelentés megnyitása ’ gombra kattintva láthatjuk, hogy milyen oldal esetén konkrétan milyen CWV mutatóban teljesítünk rosszul.
Amit fontos megjegyezni, hogy a Google Search Console az egyes oldalak Core Web Vitals teljesítményét az elmúlt 28 napos átlaga alapján határozza meg, így arra nem igazán használható, hogy az oldalak javításai, fejlesztései után ellenőrizzük, hogy mennyire volt sikeres a Core Web Vitals mutatók javítására készült fejlesztések.
Core Web Vitals mutatók vizsgálata
Tehát ha még nagyon kevés forgalmat kapnak az oldalaink és a Google Search Console-ban nem tudjuk meg nézni a web vitals mutatók teljesítményét vagy pedig egy nagyobb fejlesztési csomagot valósítottunk meg, ami a Core Web Vitals mutatók javítását célozza, akkor egy másik eszközt kell arra használnunk, hogy tudjuk nézni, hogy az oldalunk az adott pillanatban hogyan teljesít a webes vitals mutatókat tekintve.
Ehhez a legjobb eszköz most szerintem a Google Page Speed Insights tool-ja, ami immáron nemcsak a weboldal betöltődési sebességről ad információkat, hanem a Core Web Vitals mutatószámokról is.
Mindössze annyi a dolgunk, hogy megadjuk azt az URL-t, amit vizsgálni szeretnénk, és a Google eszköze kidobja, hogy az adott oldal hogyan teljesít az adott lekérés során a CWV mutatókat tekintve.
Valamint az egyes diagnosztikai és javításokkal kapcsolatos részeknél azt is megmutatja, hogy a javítás vagy optimalizáció, melyik Core Web Vitals mutatóra lenne pozitív hatással.
Ha nagyon sok oldalunk van, és minden oldalra szeretnék a Core Web Vitals mutatókat auditálni, akkor az manuális módon nagyon nehézkes, mert egyesével kell az URL-eket bemásolni a PSI-be.
Ilyen esetben a Screaming Froggal érdemes folytatni, amennyiben van prémium licenc-ünk, a screaming frogot össze tudjuk közni a Page Speed Insights API-jával, és a Core Web Vitals elemzést az weboldal összes URL-jére el tudjuk végezni egy egyszerű crawl futtatásával, ahogy a képen is látható:
Core Web Vitals elemei
De akkor nézzük meg részletesebben azon, hogy mit mutat meg pontosan a három Core Web Vitals mutatószám:
LCP (Largest Contentful Paint):
Az LCP azaz a legnagyobb vizuális tartalomválasz azt méri, hogy a legnagyobb elem az oldalon mennyi idő alatt tölt be.
Ez általában egy kép, az oldal címe H1-ben, de akár egy bekezdés is lehet (lásd lent), minden oldalnál más lesz. Többféleképpen meg lehet nézni, hogy mi számít az LCP elemnek az adott oldalon, a legegyszerűbb, ha a már bemutatott Page Speed Insights-ban elemezzük az oldalt, akkor a Diagnosztika részen meg fogja mutatja a Page Speed Insights, hogy melyik eleme az oldalnak az LCP.
Mint minden Alapvető Webes Vitals mutatónál, itt is három besorolást ad a Google az adott oldal LCP-t illető teljesítményében.
Mint a képen látható, ha a legnagyobb vizuális tartalom 2,5 másodperc alatt tölt be, akkor ’Jó’ teljesítményünk, ha 4 és 2,5 mp között van, akkor „Fejlesztendő’, ha 4 másodperc feletti a betöltési idő, akkor „Rossz”-ul teljesít az adott oldal LCP mutató szempontjából.
A cikk legvégén osztunk meg arra vonatkozóan technikákat és követendő legjobb gyakorlatokat, amik segíteni fogják, hogy jól teljesítsünk az LCP mutatóval is.
First Input Delay (FID)
A First Input Delay, azaz az Első interakciótól számított válaszkésés azt méri, hogy mennyire gyorsan reagál az oldal, ha egy gombra, form mezőbe vagy linkre kattintunk.
Ha egy gombra kattintunk, és nem történik semmi, akkor ez elég rossz felhasználói élmény, rosszabb esetben még a felhasználó azt hiszi, hogy az adott gomb nem működik, és elhagyja az oldalt.
Az LCP-hez képest ezért itt sokkal rövidebb időintervallumokat ad meg a Google:
Ahogy látható, 100 milliszekundom alatt szükséges az oldalt betölteni, ha Jó értékelést akarunk elérni, és 300 milliszekundom felett a Google szerint rosszul teljesít az oldal a FID Core Web Vitals mutatót tekintve.
Csak úgy mint az LCP kapcsán, a cikk végén osztunk meg technikákat, amivel a FID-et is felgyorsíthatjuk.
Cumulative Layout Shift (CLS)
Végül a harmadik alapvető webes vitals-mutató a Cumulative Layout Shift, vagy magyarul Elrendezés összmozgása, ami az oldal vizuális stabilitását méri, azaz, hogy az elemek mennyire mozognak el kiszámíthatatlan módon.
Az előzőleg bemutatott webes vitals mutatókkal szemben ez nem az oldal betöltődésével kapcsolatos feltétlenül, így a Google az oldal betöltődése után is méri, amikor megállapítja field adatok alapján, hogy egy oldal hogyan teljesít a CLS-t illetően.
Ha CLS-ben akarunk jól teljesíteni, akkor 0,1-es érték alatt kell lennünk, ha viszont 0,25 felett vagyunk, akkor érdemes az oldalt jobban megvizsgálni, mert problémák vannak az oldal vizuális stabilitásával.
Hogy pontosan ez a CLS érték hogyan jön ki, és mely oldal elemek esetében van probléma a vizuális stablitiással azt legkönnyebben a Page Speed Insights eszköz segítségével tudjuk megtenni.
Csak úgy mint az LCP esetén a PSI riport Diagnosztika részén fogunk egy ’Kerülje a CLS’ javaslatot látni, ha azt lenyitjuk, akkor konkréten fogjuk látni, hogy az oldal mely elemei problémásak Cumulative Layout Shift szempontjából.
Core Web Vitals mutatók javítása és optimalizációja
Ahogy már említettem, végezetül pár tippet megosztanék, hogy miket tegyünk ahhoz, hogy jól szerepeljünk az alapvető webes vitals mutatószámokat tekintve.
Az alábbiakat saját tapasztalatból írom, mert pont ezen az oldalon is rosszul szerepeltünk a Core Web Vitals-zel, majd többek között pár lenti javítást implementálva, ahogy látható, már a Google Search Console szerint is „zöldek” vagyunk, azaz jól teljesítünk a CWV mutatóit illetően.
Ugye a lenti tippeket, javításai javaslatokat nemcsak azért érdemes javítani, mert egy megerősített Google rangsorolási tényező a Core Web Vitals mutatószámokban való teljesítményünk.
Hanem azért is, mert ezzel a felhasználói élményt is javítani fogjuk, ami általában a konverziós arány növeléséhez is hozzá járulhat.
Van egy külön cikkben, ahol ebben a felhasználó élménnyel és weboldalbetöltődési sebesség javításával kapcsolatos technikákba részletesebben belemegyek, így itt most csak pár technikát fogok megemlíteni, amivel a három webes vitals mutatókat lehet javítani.
Ha az egyes technikák részleteire jobban kíváncsi vagy, akkor olvasd el ezt a cikket:
- Technikák a weboldal betöltődési sebességének javítása (szerkesztés alatt)
LCP javítása
Az alábbi technikákat, optimalizációs javaslatokat érdemes figyelembe venni, amennyiben a Largest Contentful Paint-et szeretnénk javítani az oldalaink esetén.
- Gyorsabb hosting szolgáltatóra váltás
- Caching implementálása az oldalon
- Nagy képek tömörítése feltöltés előtt vagy után
- Lazyloading technika implementálása a képekre és videókra
- CDN használata (különösen akkor ha a weboldal sok nemzetközi forgalmat kap)
- CSS minimalizálása
- Nem használt CSS törlése
- JavaScript fájlok minimalizálása
- Nem használt JS fájlok törlése
- Szükséges JS fájlok aszinkronikus betöltése
Amennyiben WordPress vagy hasonló CMS-en futó weboldalunk van, akkor vannak plugin-ok vagy más CMS-nél app-ok, amik segítenek ezeket a fenti optimalizációs lépéseket megtenni.
Ha saját fejlesztésű weboldalunk van, akkor küldjük el a fejlesztőinknek az alábbi angol cikket az LCP optimalizálásáról: https://web.dev/optimize-lcp/
FID javítása
Ahogy feljebb említettük a First Input Delay (FID) a weboldal interaktivitásának gyorsaságát méri.
Mivel általában a weboldalak interaktív funkciói Javascript kódok révén működnek, ezért ha az FID metrikán szeretnénk javítani, akkor a weboldal Javascript kódjainak optimalizálásával kell foglalkozni.
Az LCP fejezetben említett best practice-ek és különösen JS-szel kapcsolatos optimalizációk az FID gyorsításában is segíthetnek. Ha további technikai részletekre vagy kíváncsi, akkor ezt a Google guide-ot ajánljuk hozzá:
CLS javítása
A Cumulative Layout Shift (CLS) ahogy már említettük a weboldal vizuális stabilitását méri, azaz azt, hogy mennyire mozognak el az elemek az oldalon az oldal betöltődés közben.
Leggyakrabban azoknál az oldalaknál jelentkezhet, ahol sok a hirdetés az oldalon, amik betöltődésükkor elmozgatják a többi elemet is az oldalon. Emellett a CLS növekedéséhez vezethet, ha a képeknél, videóknál, beágyzatott tartalmaknál, iframe-eknél nincsenek a dimenziók megadva.
Ezek a problémák könnyen orvosolhatók, ha definiáljuk a dimenziókat az egyes elemeknél. További tanácsok ebben a cikkben olvashatók: https://web.dev/optimize-cls/