Az alapvető webes vitális (Core Web Vitals) mutatók alatt olyan méréseket értünk, mely összességében a weboldal használhatóságát és a felhasználói élményt mutatják. Négy nagy témakör van: sebesség (performance), hozzáférhetőség (accessibility), legjobb fejlesztői szokások, praktikák (best practices), keresőoptimalizálás (SEO).

Ezen ajánlásoknak való egységes megfelelés adja azt a böngészési élményt a felhasználónak, ami minőségi érzést és ezzel együtt biztonságot is jelent számára. Végeredményben több kattintás, jobb konverziós ráta, több megrendelés érhető el egy olyan oldallal, ami megfelel a vitális paramétereknek, mint azzal, ami egyáltalán nem.

A jelentés nagyon szakmai, de konkrét problémákra, konkrét megoldásokat javasol, mely nagy segítség a fejlesztőknek. Szerencsére számokkal és színekkel egyértelmű visszajelzést ad ahhoz, hogy weboldal tulajdonosok is tudják ha fejleszteni kell a weboldalukon. Zöld, ha rendben van, sárga, ha fejlesztésre szorul, piros az egyáltalán nem felel meg. Jelen írás célja az, hogy weboldal tulajdonosoknak is legyen egy fogalmi képük arról mit is láthatnak itt.

Mérés indítása

Többféleképpen futtathatjuk le a Lighthouse reportot. Google Chrome böngészővel, a Google Measure page quality oldalon, vagy a Google PageSpeed Insights használatával (ez gyakorlatilag a lighthouse report sebesség mérése, csak kiegészítve a Google Chrome böngészők által küldött adatokkal, de egy átlag magyar céges weboldalnál ez a hozzáadott érték nem nagyon látszik, mert egy bizonyos oldalmegtekintés után egészíti ki a jelentést a Google.)

Lighthouse report futtatása

Google Chrome böngésző használatával, privát böngésző ablakban (CTRL+SHIFT+N) navigáljunk a mérni kívánt weboldalra, majd a mérést az F12 gomb lenyomásával és a megjelenő fejlesztői ablakon a Lighthouse tabon a “Generate report” gombra kattintva futtathatjuk.

Google Measure page quality

A https://web.dev/measure/ weboldalon a bevitelimezőbe be kell írni a mérni kívánt weboldal címét, majd a “run audit” gombra kattintani.

Google PageSpeed Insights

A https://pagespeed.web.dev/ weboldalon a bevitelimezőbe be kell írni a mérni kívánt weboldal címét, majd a “run audit” gombra kattintani.

Sebesség

Erre a mérésre teljes mértékben igaz, hogy egy mérés nem mérés. A weboldal megjelenítésekor a kiszolgáló szerver vagy szerverek bizonyos program kódokat és fájlokat gyorsítótárba helyeznek, mely egyes része a memóriában, más a fizikai meghajtóban van. A gyorsító tár pár perc alatt elévül, ezért főleg ritkábban látogatott weboldalakon az első mérés közben a kiszolgáló szervereknek újra fel kell azt tölteniük, ezért a mérést érdemes 2-3 alkalommal lefuttatni kielemzés mielőtt.

Fontos továbbá kiemelni, hogy az interneten kering, hogy hány másodperces oldalbetöltésnél hány vásárlót veszít, ami részben igaz is lehet bizonyos esetekben, viszont ennél a mérésnél az oldalbetöltési sebességet 3G-s mobilinternet kapcsolattal mérik, ami ma már - főleg a vásárlóképes felhasználókat nézve - nem tekinthető átlagnak.

Az adatok vizsgálatakor 4 mérőszámra érdemes rápillantani:

First Contentful Paint

Ennyi idő telik el, amíg a felhasználó már valami értelmezhető szöveget lát a weboldalon.

Time to Interactive

Ez az az időmennyiség, ami ahhoz kell, hogy a látogató már tudja is használni az oldalt - kattinthatók a gombok.

Largest Contentful Paint

Ennyi időbe került, míg a legnagyobb elem az oldalon - lehet ez kép vagy szöveg - teljesen láthatóvá válik.

Cumulative Layout Shift

Betöltéskor és a weboldal használatakor mennyire jellemző, hogy az oldal ugrál fel, le. Nagyon fontos mérés, mert ezt a google külön nézi, amikor a weboldalakat rangsorolja.

Túl nagy kép kis helyen!

Lejjebb görgetve a lehetőségek felsorolásánál találkozhatunk olyan megjegyzéssel, hogy alkalmazzon helyesen méretezett képeket (Properly size images). Sok weboldal esetén itt lehet lefaragni a legtöbbet az adatforgalomból, mert gyakran előfordul, hogy egy kis dobozba egy teljes képernyő méretű kép kerül, pl blog lista oldalon a cikk főképe méretezés nélkül, de az is probléma ha mobilon az asztali gépre szánt képet jeleníti meg a weboldal.

Hozzáférhetőség

Ami itt fontos az, hogy a háttér és a szöveg megfelelő kontraszttal különüljön el, és ha szolgáltat a weboldal képernyőolvasók számára különleges információt, akkor azt helyesen tegye. Valamint a linkeknek legyen értelmes szövege és a képek alternatív szövege.

Legjobb szokások, praktikák

Na itt érdemes még nyitva tartani a szemet, mert olyan információk kerülnek itt napvilágra, mint például ha a weboldal tartalmaz olyan előre megírt javascript kódokat, melyek biztonsági kockázatot jelentenek és hogy van-e javascript hiba az oldalon. Ez utóbbi bizonytalan funkcionalitást vagy nem megfelelő megjelenést eredményez. Mindkettő kritikus probléma akár lehetetlenné is teheti a konverziót (kapcsolatfelvételt, megrendelést).

SEO

Az érték, amit érdemes 100/100ra felhozni. Itt az alapvető keresőoptimalizálási megoldások meglétét ellenőrizhetjük, bővebb SEO elemzésre nem megfelelő ez az eszköz, de ezen megfelelések nélkül hiába a jó SEO stratégia.

Összegzés

Ezeken után talán nem kérdés, hogy egy weboldal audit során, miért játszik fontos szerepet az alapvető vitális mutatók elemzése. Legyen szó új weboldal készítéséről, meglévő tovább fejlesztéséről, de nagy visszafordulási arány és a vártnál rosszabb konverziós számok esetén is érdemes erre a jelentésre ránézni. Weboldal tulajdonosként tisztán láthatja, ha valami probléma van, weboldal fejlesztője részletes tájékoztatást kap a hiba elhárításához.