Hogyan működnek a webes vitals-mutatók? Mik azok a webes vitals-mutatók? Webes vitals mutatók definíciója

Webes vitals-mutatók

A webes vitals-mutatók definíciója

A webes vitals-mutatók (vagy alapvető webes vitals-mutatók) a Google által szabványosított mutatók, amelyek segítenek a weboldalak nyújtotta felhasználói élmény felmérésében. Habár a Google ezeket a mutatókat első sorban a webfejlesztőknek szánta, segítségükkel bármelyik webmester ellenőrizheti, hogy milyen felhasználói élményeket kínálnak weboldalai a webhelyre érkező látogatók számára.
A webes vitals-mutatók a felhasználói élmény három legfontosabb összetevőivel foglalkoznak:
•    Az oldal betöltési teljesítménye
•    Az interakciók egyszerűsége
•    Az oldal betöltés közben vizuális stabilitása

Mindhárom mutató a felhasználói élmény azon elemeiről árulkodik, amelyek valamilyen módon befolyásolják a látogatók webhelyen végzett interakcióit. Habár a fejlesztőknek átfogó szemszögből kell foglalkozniuk a felhasználói élménnyel, a webes vitals-mutatók kisebb, átláthatóbb szeletekre osztják fel ezt a területet, ami lehetővé teszi a problémák precízebb azonosítását és megoldását.

Fontos észben tartani, hogy ezek a mutatók nem kínálnak teljes képet egy webhely vagy weboldal nyújtotta felhasználói élményről, de együttesen lényegesen megkönnyítik a különböző összetevők (sebesség, stabilitás, interakciók) hibáinak elhárítását.
 

Az alapvető webes vitals-mutatók

1. Legnagyobb vizuális tartalomválasz (LCP)

A legnagyobb vizuális tartalomválasz (LCP) az az alapvető webes vitals-mutató, amely azt méri meg, hogy mennyi időbe telik a különböző tartalomblokkok megjelenítése a viewportban. A viewport az oldal azon része, ami éppen látható a felhasználó böngészőjében. Tehát az LCP csupán a weboldal hajtás feletti részét érinti – a hajtás alatt elhelyezkedő elemeket (tehát amelyekhez lejjebb kell görgetni) nem veszi figyelembe.
 
Az LCP a következő elemekre figyel:

•    Képek
•    Videók előnézeti képei
•    Háttérképek
•    Blokkszintű szöveges elemek

Az ideális LCP legfeljebb 2,5 másodperc.
 

2. Elrendezés összmozgása (CLS)

Az elrendezés összmozgása (CLS) az az alapvető webes vitals-mutató, amely az oldal elemeinek betöltés közbeni mozgását méri. A CLS érték azt mutatja meg, hogy mekkora kihívást okoz a különböző elemek használata az oldalon, mielőtt az összes elem betöltődne.
Tegyük fel, hogy egy felhasználó egy gombra próbál koppintani az okostelefonján, mielőtt az oldal teljesen betöltődne. Váratlanul egy új elem (pl. egy másik gomb) jelenik meg az oldalon, és lejjebb nyomja azt a gombot, amire a felhasználó eredetileg megpróbált rábökni. Ez meglehetősen bosszantó lehet, például, ha valaki a „Vissza” gombra koppint a „Tovább” helyett.
A CLS több szempontot is figyelembe vesz az oldal vizuális stabilitásának megállapításához:

•    Az elrendezés mozgását
•    Hatási hányad
•    Távolsági hányad

Az ideális CLS értéke legfeljebb 0,1.
 

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

Az első interakciótól számított válaszkésés (FID) az az alapvető webes vitals-mutató, amely megmutatja, hogy mennyire reszponzív egy oldal, a felhasználói interakciók feldolgozása közben – vagyis, hogy mennyit kell várnia a felhasználónak az oldal reakciójára egy kattintást vagy gombnyomást követően.
Fontos észben tartani, hogy ezt a mutatót nehéz mesterséges körülmények között lemérni, mert az igazán pontos adatokat csak a valódi felhasználók interakcióiból lehet összegyűjteni. A FID értéke tehát olyan tényezőktől is függ, amiket semmilyen optimalizálással nem befolyásolhatsz – például, hogy mennyire erős a látogatók internetkapcsolata, mennyire gyors mobileszközt használnak és így tovább.
Az ideális FID értéke legfeljebb 100 ms.
 

Egyéb webes teljesítménymutatók

A fejlesztőknek és webmestereknek további mutatók is a rendelkezésükre állnak a webhelyek teljesítményének felméréséhez. Habár ezek nem számítanak webes vitals-mutatóknak ezek a mutatók segítenek számszerűsíteni az olyan technikai tényezőket, amelyek negatív hatással lehetnek a felhasználói élményre, ezért érdemes szemmel tartani őket.
 

1. Első vizuális tartalomválasz (FCP)

Az első vizuális tartalomválasz azt mutatja meg, hogy mennyi időbe telik egy felhasználó böngészőjének a különböző DOM elemek (képek, SVG fájlok stb.) megjelenítése. Ez a mutató azonosítja a megjelenítést gátló forrásokat, és másodpercekben szokás mérni:

•    0-2 másodperc: zöld (gyors)
•    2-4 másodperc: sárga (közepes)
•    4-nél több másodperc: piros (lassú)
 

2. Sebességindex (SI)

A sebesség a felhasználói élmény egyik legfontosabb tényezője. Ezt jelöli az oldalak sebességindexe, ami egy oldal megjelenítéséhez szükséges átlagos időtartam. Ez a mutató az oldalon található JavaScriptet is figyelembe veszi, és milliszekundumokban szokás mérni:

•    0-4,3 ms: zöld (gyors)
•    4,4-5,8 ms: sárga (közepes)
•    5,8-nál több ms: piros (lassú)
 

3. Interaktivitásig eltelt idő (TTI)

Ennyi időre van szüksége egy weboldal tartalmának, hogy teljes mértékben interaktívvá váljon egy felhasználó számára. A TTI segít azonosítani azokat az oldalakat, amelyeket a JavaScript feleslegesen lelassít. Ezt a mutatót másodpercekben szokás mérni:
•    0-3,8 másodperc: zöld (gyors)
•    3,9-7,3 másodperc: sárga (közepes)
•    7,3-nál több másodperc: piros (lassú)
 

4. Teljes blokkolási idő (TBT)

Ez a mutató segít felmérni, hogy mennyi időbe telik a weboldalnak, hogy reagáljon egy felhasználói műveletre. Szintén figyelembe veszi a JavaScriptet és milliszekundumokban szokás mérni:
•    0-300 ms: zöld (gyors)
•    300-600 ms: sárga (közepes)
•    600-nál több ms: piros (lassú)