Alapvető webes vitals-mutatók: Mire jók az alapvető webes vitals-mutatók, hogyan működnek?

Alapvető webes vitals-mutatók

Az alapvető webes vitals-mutatók definíciója

Az alapvető webes vitals-mutatók azok a Google által bevezetett teljesítménymutatók, amelyek a weboldalak által kínált felhasználói élmény számszerű mérésére szolgálnak.
A Google 2020 májusában jelentette be, hogy az oldalélménnyel kapcsolatos mutatók (az alapvető webes vitals-mutatók) is csatlakoznak majd az organikus rangsorolási szempontok közé. Konkrétabban, a Google terve az volt, hogy algoritmusa az alábbi szempontok alapján vizsgálja és állapítsa meg a felhasználói élmény minőségét:
•    Mobilbarát jelleg
•    A böngészés biztonsága
•    HTTPS protokoll használata
•    A tartalom elérhetősége zavaró felugró ablakok nélkül


A Google 2020 novemberében további három mutatót is bejelentett, amelyek mind az oldalélmény mérésére összpontosítottak – ezek lettek az alapvető webes vitals-mutatók (core web vitals):
•    Legnagyobb vizuális tartalomválasz (Largest Contentful Paint – LCP)
•    Első interakciótól számított válaszkésés (First Input Delay – FID)
•    Elrendezés összmozgása (Cumulative Layout Shift – CLS)

Az alapvető webes vitals-mutatókat 2021 nyarán vezette be a Google egy hosszabb frissítési folyamatban.
 

Az alapvető webes vitals-mutatók szerepe

Az alapvető webes vitals-mutatók a webmesterek és webfejlesztők számára jöttek létre, hogy segítségükkel ellenőrizhessék webhelyeik felhasználói élményét. Ha egy látogató pozitív élményekkel távozik egy webhelyről, akkor szívesebben tér vissza oda, javasolja azt ismerőseinek, és előnyös első benyomás alakul ki benne a márkáról is.
Ezzel szemben, ha egy webhely lassú, nem jelenik meg megfelelően mobileszközökön és összességében kín használni, akkor a legtöbben rövid időn belül távoznak majd róla – és jó eséllyel nem is térnek vissza többet.


Na persze, ez a Google márkájára és tekintélyére is hatással van. Ha a kereső felhasználók az első találatokra kattintva rendszeresen olyan tartalmakkal találkoznak, amik rossz élményeket kínálnak nekik, akkor ez a Google-ra is rossz fényt vet. A Google persze nem szeretné, ha az emberek más keresőmotorokat használnának, hiszen a cég ezzel rengeteg hirdetési bevételtől esne el.


Az alapvető webes vitals-mutatók javításával tehát több esélyed lesz magasabb pozíciókban rangsorolni a Google találatai között.


Az alapvető webes vitals-mutatók tehát olyan teljesítménymutatók, amelyek segítenek megállapítani, hogy milyen színvonalú élményeket kínál webhelyed a felhasználók számára. Ezek a mutatók konkrét számadatokat kínálnak, amelyeket felhasználva jobb felhasználói élményt alakíthatsz ki a látogatóknak.
Az alapvető webes vitals-mutatók azonban nem csak a rangsorolást javítják. Ha a felhasználók elégedettek webhelyed teljesítményével és használatával, akkor több időt töltenek majd rajta, illetve szívesebben végzik majd el a konverziós lépéseket is (rendelés, szobafoglalás, ajánlatkérés stb.)


Fontos persze észben tartani, hogy a Google számára továbbra is a tartalom minősége számít fontosabb szempontnak a rangsorolásnál. Mint ahogy azt a keresőmotor is megemlíti, a „kiváló oldalélmény nem írja felül a kiváló tartalmak jelenlétét”. Ha azonban két tartalom hasonlóan releváns egy kereső felhasználó számára, akkor az az oldal kerül majd magasabb pozícióba, amelyik jobb felhasználói élményt nyújt a látogatóknak.
 

Az alapvető webes vitals-mutatókról részletesen

Weboldalaid alapvető webes vitals-mutatóit a Google Search Console felületén, illetve a Google PageSpeed Insights eszköz segítségével ellenőrizheted. A PageSpeed Insights még hasznos javaslatokat is tesz a különböző mutatók javítására (a „Lehetőségek” szakaszban), amiket érdemes figyelembe venni, hiszen ezek mindig az oldal konkrét problémáira és azok lehetséges megoldásaira mutatnak rá.
 

Legnagyobb vizuális tartalomválasz (LCP)

A legnagyobb vizuális tartalomválasz (Largest Contentful Paint – LCP) az oldal betöltési sebességét méri. Egész pontosan azt mutatja meg, hogy mennyi időre van szükség ahhoz, hogy az oldal legnagyobb tartalomeleme megjelenjen a felhasználó számára azonnal látható („hajtás feletti”) részben. Az LCP nem veszi figyelembe az oldal többi, nem látható részének elemeit.
Az oldal felépítésétől függően ez a legnagyobb tartalomelem lehet például:
•    A cikkhez tartozó kiemelt kép
•    H1 tag (az oldal címe)
•    Egy szöveges bekezdés
•    Egy beillesztett kép
•    Egy beillesztett videó előnézeti képe
•    A háttérben elhelyezett kép


A Google szerint az LCP 2,5 másodperc alatt számít jónak, míg 2,5 és 4 másodperc között javításra szorul. A 4 másodpercnél hosszabb LCP súlyos problémát jelent, és minél előbb javítani kell.

Az LCP többek között az alábbi módszerekkel javítható (attól függően, hogy milyen problémák lassítják az elem betöltését):
•    Távolítsd el a harmadik felektől származó felesleges szkripteket
•    Válts gyorsabb webtárhelyre
•    Használj CDN-t
•    Használj gyorsítótárazást
•    Használj lusta betöltést
•    Tömörítsd a képfájlokat, és ne használj a szükségesnél nagyobb felbontású képeket
•    Egyszerűsítsd és minifikáld a webhely forráskódját
 

Első interakciótól számított válaszkésés (FID)

Az első interakciótól számított válaszkésés (First Input Delay – FID) azt méri, hogy mennyi időre van szükség ahhoz, hogy az oldal interaktívvá váljon. Egész pontosan azt mutatja meg, hogy mennyi idő telik el egy felhasználói interakció (kattintás, koppintás, elhúzás stb.) és az oldal válasza között.

Az interaktivitás itt lényegében az oldal reszponzivitását jelenti. Minél többet kell várnia a felhasználónak arra, hogy történjen valami egy kattintás vagy koppintás után, annál kényelmetlenebb és kellemetlenebb lesz az oldal használata.
A Google szerint a FID legfeljebb 100 milliszekundumig (ms) számít jónak. Az oldalnak a felhasználókon keresztül begyűjtött tesztek 75%-ában meg kell felelnie ehhez a kritériumnak, méghozzá asztali és mobilos böngészés esetében is.

Az FID többek között az alábbi módszerekkel javítható:
•    Minimalizáld, vagy késleltesd a JavaScript lefuttatását, mert az oldal mindaddig használhatatlan lesz a felhasználók számára, amíg a JS szkriptek le nem futnak.
•    Távolítsd el a nem létfontosságú szkripteket, amiknek az előtt kell betölteniük, hogy a felhasználó elkezdhetné használni az oldalt.
•    Használj gyorsítótárazást a látogatók böngészőjében.
 

Elrendezés összmozgása (CLS)

Az elrendezés összmozgása (Cumulative Layout Shift – CLS) az oldal betöltés közbeni vizuális stabilitására utal. Azt figyeli meg, hogy az oldal mekkora részei és milyen mértékben rendeződnek át, mielőtt az összes elem betöltődne az oldalon.

Talán veled is előfordult már, hogy megpróbáltál rányomni egy gombra egy webhelyen, de véletlenül valami másra kattintottál vagy koppintottál, mert váratlanul átrendeződtek az oldal elemei. Az ilyen mozgások rendkívül bosszantók lehetnek, főleg, ha az ember véletlenül kitörli a gondosan összeválogatott terméklistáját a helyett, hogy megrendelné azt (vagy épp fordítva). Szintén súlyosan csorbítja a felhasználói élményt, ha a látogató véletlenül egy olyan hirdetésre kattint rá, ami váratlanul egy másik oldalra irányítja át.

Webmesterként vagy webdesignerként fontos, hogy az elrendezés összmozgását ne csak szintetikus tesztek, hanem valódi felhasználói interakciók alapján is felmérd. A tesztkörnyezetben például nem biztos, hogy betöltődnek azok a hirdetések, amelyekkel a látogatók a publikus webhelyen találkozhatnak, tehát a teszt során mindig kapsz majd valódi eredményeket.

A CLS-t a hatási hányad és a távolsági hányad szorzata határozza meg:
•    Hatási hányad: Ekkora százalékban mozdul el a viewport
•    Távolsági hányad: A mozgás távolsága osztva a viewport magasságával


Egyes esetekben az is előfordulhat, hogy néhány másodperc alatt többször is megváltozik az oldal elrendezése. Ha ez történik az oldal betöltése során, akkor a CLS a legnagyobb ilyen mozgás mértékét veszi figyelembe.

A Google szerint a 0,1 alatti CLS pontszám számít jónak, és akárcsak az FID-nél, az oldalnak a felhasználókon keresztül gyűjtött tesztek 75%-án kell átesnie, hogy megfeleljen az elvárásoknak (mind mobileszközökön, mind pedig asztali webhelyeken).
 

A CLS többek között az alábbi módszerekkel javítható:

•    Állítsd be minden médiaelem (képek, GIF-ek stb.) méreteit, hogy a böngészők előre tudják, hogy mekkora helyet kell kihagyniuk számukra az oldalon.
•    Jelölj ki külön területeket a hirdetéseknek, hogy ne jelenjenek meg hirtelen a betöltés közben.
•    Mellőzd a felugró ablakok és bannerek használatát, amelyek eltolhatják a tartalmat a betöltés során.