(7 perc olvasás)
Mi az a Core Web Vitals (CWV)?
A CWV a felhasználói élmény (oldalélmény) fő szempontjait számszerűsítő adatokból álló rangsorolási rendszer, ami az internetes felület használhatóságát értékeli. Lehetőséget ad arra, hogy még fittebbé optimalizáld mobilbarát oldalad.
A Core Web Vitals fő szempontjai
Három adatot vesz figyelembe elsősorban:
- Betöltés - Largest Contentful Paint (LCP).
- Interaktivitás -First Input Delay (FID).
- Vizuális stabilitás - Cumulative Layout Shift (CLS).
Ezeket az értékeket a már meglévő rangsorolási értékekkel – például reszponzivitás, SSL tanúsítvány (https-protokoll), biztonságos böngészés, tolakodó/
Miért pont a mobil?
Az oldalélmény javítása érdekében tett erőfeszítések és fejlesztések logikusan arra a platformra vannak kihegyezve – elsősorban -, amin leginkább elérhetők a felhasználók. Mivel ez jelenleg a mobiltelefon/
A jó oldalélmény természetesen nem írja felül a minőségi és releváns tartalmat. Ha viszont több oldal is hasonló tartalommal rendelkezik, azt, hogy:
- a felhasználó melyiken fog több időt eltölteni,
- melyikkel lép majd interakcióba,
- végül melyiken fog vásárolni - az oldalélmény alapján fogja eldönteni.
Részletesebben a Core Web Vitals elemeiről
Ha az oldalad megfelel a CWV-értékelésen, a felhasználók 24% -kal kisebb eséllyel hagyják el a felületedet.
Largest Contentful Paint (LCP)
A betöltés sebessége alapján értékeli a felhasználói élményt, mégpedig az alapján, hogy mennyi időbe telik, amíg az adott oldal legnagyobb kép vagy szövegblokkja teljes egészében láthatóvá válik a nézetablakban.
Az LCP mérőszám esetében a cél az, hogy 2,5 sec alatt tartsuk a betöltési időt az össz oldalszám 75%-ánál.
Egy adott oldal lehetséges LCP csomópontjai:
- <img> elemek,
- <image> elemek egy <svg> (vektorgrafikus fájl) html tagen belül,
- <video> elemek plakátképei,
- a háttérképek CSS funkcióval töltődnek be,
- szöveges csomópontok a blokkszintű elemekben.
A rossz LCP érték lehetséges okai:
- Lassú szerver válaszidő
- A fejlesztő felé adj hibajegyet, ő a szerver optimalizálásával kiküszöböli ezt a problémát.
- Megjelenést blokkoló JavaScript és CSS
- A renderelést lassítja a CSS, ezért eleve blokkoló erőforrásként kezelendő, például a CSS fájl minimalizálásával.
- A JavaScript fájlok méretének csökkentése, például tömörítéssel javítja a renderelés idejét.
- A JS kicsinyítése magába foglalja a szükségtelen szóközök és kódok eltávolítását.
- Ahogy a CSS esetében a JavaScripteket is érdemes szisztematikusan, egy tömörítő plugin telepítésével és aktiválásával csökkenteni.
- Túl nagy képek
First Input Delay (FID)
A FID a fő szálaktivitás mérésének módja. Mielőtt az oldalon található elemek reagálni tudnának a felhasználói interakciókra, a fő szál folyamatban lévő feladatait el kell végezni. Az FID tehát az adott oldalnak a felhasználó beviteli kísérleteire adott reakcióidejét méri. A cél, hogy ezt az értéket <=100 msec értéken tartsuk az oldalak 75%-án.
Az FID a következő oldal elemeket érinti:
- Szövegmezők
- Jelölőnégyzetek
- Rádiógombok
- Legördülő menü/
kiválasztás - Belső és külső linkek
A rossz FID javítása:
- A harmadik féltől származó szkriptek betöltésének letiltása.
- a JavaScript végrehajtási idejének csökkentése.
- az interakciós készenlét optimalizálásával lehet javítani az FID értékén.
Cumulative Layout Shift (CLS)
A CLS az egyetlen mutató a háromból, amit nem időben mérnek. Két mérőszám, az Impact- és Distant Fraction szorzatával állapítható meg.
IF
- Az oldal egyik eleme a nézetablak X%-át teszi ki a betöltés kezdetekor, de utána ennek csak egy kisebb hányadát: például 50% és 15%.
- A két százalékos értéket összeadja a rendszer, ami esetünkben 65%,
- amelyet tizedes értékként lát a kereső motorja: 0,65.
DF
- Azt mutatja meg, hogy a betöltés során az eredeti pozíciójához képest milyen távolságra helyezkedik el az adott elem. (A fent említett 15%-os, azaz 0,15-ös érték.)
A CLS ennek a két értéknek a szorzatából áll össze.
A Core Web Vitals kiszámolja helyetted a CLS értékét, neked csupán az a dolgod, hogy a weboldalad minden vizuális, dinamikus és egyéb érintett elemét optimalizáld. Cél: Az oldalbetöltések 75% -án a CLS-számított mutatója > 0,10.
Mi okozza a rossz CLS értéket?
- A rosszul, vagy egyáltalán nem paraméterezett képek.
- Igen, a képoptimalizálás egy olyan problémakör, ami mindig visszatér, de jó hír, hogy ha szem előtt tartod, akkor jelentős előrelépést érhetsz el vele.
- Rosszul paraméterezett saját beágyazások, például videók, űrlapok, hírlevél feliratkozó sablonok.
- Képeken és a videoelemeken mindig szerepeltesd a szélesség és a magasság méretét.
- Dinamikusan beágyazott, külső forrásból származó tartalmak, például Youtube videók.
- Ha hirdetésekről van szó, határozd meg előre, hogy mekkora a legnagyobb méret, amit az oldalad harmadik féltől behúzhat, és soha ne az oldal tetején jelenjenek meg a hirdetések.
- Képelemeket és dinamikus tartalmakat sose illessz-, ágyazz be a hajtás (sortörés) fölötti részre.
- FOIT (felvillanó láthatatlan szövegek) és FOUT (felvillanó stílus nélküli szövegek) hibát okozó betűtípusok.
- A betűtípusok – és kritikus erőforrások - előzetes betöltése megakadályozza, hogy a később betöltődő betűtípus felvillanást és újraírást eredményezzen.
- Az előzetes betöltés html parancssora szó szerint megmondja a böngészőnek, hogy az adott tartalmat hamarabb szeretnéd betöltetni vele, mint ahogy azt ő egyébként felfedezné.
A Core Web Vitals jövője
Már most tudható, hogy a Google évente frissíteni kívánja az oldal élmény összetevőket figyelő algoritmusokat.
Ez hozzásegíti a technikai keresőoptimalizálással foglalkozó szakembereket ahhoz, hogy időben reagáljanak a változásokra:
- A ciklikusan ismétlődő diagnosztika és analízis,
- a hibajegyek feldolgozása,
- és a megoldások folyamatos implementálása
a weboldalt érintő jövőbeni beruházások és fejlesztések tekintetében mindenképpen előnyt jelentenek minden weboldal tulajdonos számára.
A Core Web Vitals tehát nem egy elvont fogalom, sokkal inkább egy kézzelfogható eredményt nyújtó rendszer. Minden, a weboldalad fejlesztésébe fektetett időt, pénzt és energiát megtérít pusztán azzal, hogy megmutatja hol a hiba, és a kezedbe adja a megoldást.
Tartalommarketing és SEO szakértő
