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

alapvető webes vitals-mutatók

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

Az alapvető webes vitals-mutatók (core web vitals) arra három internetes teljesítménymutatóra utal, amelyeket a Google egy webhely böngészési élményének felmérésére használ. A keresőmotor többek között ezeket a szempontokat is figyelembe veszi a találatok rangsorolásakor.

Az alapvető webes vitals-mutatók a következők:

• Legnagyobb vizuális tartalomválasz (largest contentful paint, LCP): Az oldal betöltési sebességét méri
• Első interakciótól számított válaszkésés (first input delay, FID): Az oldal interaktivitását méri
• Elrendezés összmozgása (lumulative layout shift, CLS): Az oldal betöltés közbeni vizuális stabilitását méri

Az alapvető webes-vitals mutatók története

Habár weboldalak betöltési sebessége már rég óta fontos SEO szempontnak számított, a Google 2020-ban bejelentette, hogy az alapvető webes vitals-mutatók 2021-ben a rangsoroló algoritmus részévé válnak majd. Ez volt a Google oldalélmény-frissítése.

A bejelentésből megtudtuk, hogy az alapvető webes vitals-mutatók az oldalélmény-jelekhez tartoznak majd, amelyek rangsorolási szempontoknak számítanak. Hasonló jelek a HTTPS használata, a mobilbarát jelleg, illetve a felugró ablakok és egyéb zavaró elemek hiánya. A frissítés azokat a webhelyeket igyekezett megjutalmazni, amelyek jó felhasználói élményt kínálnak látogatóik számára.

Mi közük az alapvető webes vitals-mutatóknak a SEO-hoz?

A keresőmotorok speciális robotokat használnak a webhelyek elemzésére. Ezek a robotok fedezik fel az új tartalmakat az interneten és állapítják meg, hogy mikről szólnak. A keresőmotorok ez alapján döntik majd el, hogy milyen keresésre jelenítsék meg a tartalmakat találatokként. A Google robotjai többek között az éppen elemzett weboldal teljesítményét is mérik.

Mivel a Google hétpecsétes titokként őrzi algoritmusai működését, senki sem tudja, hogy pontosan mennyire befolyásolják a SEO-t az alapvető webes vitals-mutatók. Annyi azonban biztos, hogy az LCP, FID és CLS jelentős hatással vannak a rangsorolásra. Több esettanulmány is bizonyítja, hogy ezen mutatókkal együtt a tartalmak pozíciói is változnak.

De hogy működik ez a gyakorlatban? Tegyük fel, hogy a Google-nak választania kell, hogy „A” vagy „B” oldalt jelenítse meg az első találatként egy keresésre. Mindkét oldal egy-egy tekintélyes webhelyen található, illetve precíz és megbízható információkat kínál az adott témáról. Amennyiben minden egyéb szempontból megegyeznek, az a tartalom kerül ki győztesként a párbajból, amelyik:

• Gyorsabban tölt be (LCP)
• Hamarabb válik használhatóvá a betöltés során (FID)
• Kevésbé változtatja az elrendezését, mielőtt minden elem betöltene rajta (CLS)

Természetesen ez a példa figyelmen kívül hagyja, hogy a keresőmotorok működése sokkal összetettebb ennél, de jól szemlélteti az alapvető webes-vitals mutatók rangsorolásban betöltött szerepét.

Miért veszi figyelembe a Google a teljesítményt a rangsoroláshoz?

A Google és más keresőmotorok nem csupán olyan találatokat szeretnének biztosítani keresőik számára, amelyek a legjobb információkat kínálják, hanem olyanokat, amelyek erre minél gyorsabban képesek. Ha a Google rendszeresen olyan találatokat sorolna fel az embereknek, amik nem kínálnak megfelelő felhasználói élményt (pl. lassúak), akkor egyre kevesebben használnák a kereséseikhez.

Persze minden nagyobb keresőmotor hasonlóképpen gondolkodik, és rangsorolásukban komoly súlyozást is kapnak a teljesítménymutatók.

Az alapvető webes vitals-mutatókról bővebben

Legnagyobb vizuális tartalomválasz (LCP)

A legnagyobb vizuális tartalomválasz (LCP) azt méri, hogy mennyi időbe telik betölteni az oldal legnagyobb tartalomelemét. Ez általában egy nagyobb kép vagy hosszabb bekezdés.

A Google irányelvei szerint egy legfeljebb 2,5 másodperces LCP már „Jó” besorolást érdemel, de persze minél gyorsabb, annál jobb.

Fontos szem előtt tartani, hogy az LCP nem azt méri, hogy mennyi ideig tart a teljes oldal betöltése, viszont jól tükrözi az oldal általános betöltési sebességét. Mivel a legnagyobb elem általában a fő tartalom, ennek betöltési ideje lényegében azt mutatja meg, hogy a felhasználó mikortól érzékeli „betöltöttnek” az oldalt.

Az LCP elődje az FMP volt (first meaningful paint), ami azt mérte, hogy mennyi időbe telik az oldal fő tartalmának, hogy láthatóvá váljon. A Google végül megbízhatatlannak ítélte meg ezt a mutatót, és manapság már egyetlen mérőeszközében sem használja.

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) azt méri, hogy mennyi időre van szüksége a weboldalnak, hogy reagáljon a felhasználó első interakciójára (pl. egy kattintásra). Másképpen megfogalmazva a FID mutatja meg, hogy mennyit kell várnia a felhasználónak, hogy történjen valami, miután kattint az oldalon.

A Google 100 ms vagy gyorsabb FID értéket tekint „jónak”.

Tegyük fel, hogy egy felhasználó megérkezik egy oldalra. Az oldal tetején egy jobbra-balra léptethető galériát talál, és rákattint a jobb oldalra mutató nyílra, hogy a következő képre lépjen. A FID ilyenkor azt méri, hogy mennyi idő telik el a kattintás és a következő kép betöltésének kezdete között.

Az első interakciótól számított válaszkésés tehát nem azt méri, hogy mennyi idő alatt történik meg az adott esemény (tehát pl., hogy meddig tart betölteni a következő képet a galériában). A FID azt méri, hogy mennyi idő telik el, mielőtt a böngésző elkezdi teljesíteni a kérést.

A FID egy valós körülmények között mért mutató, tehát nem olyasmi, amit a Google feltételez vagy mesterséges körülmények között mérne. Ilyen mesterséges „labormutatók” például a total blocking time (TBT) és a Time to Interactive (TTI). A TBT azt méri, hogy mennyi idő telik el az első vizuális tartalomválasz (FCP) és a TTI között. Az FCP azt méri, hogy mennyi idő telik el egy elem betöltésének kezdete és befejezése között. A TTI azt méri, hogy mennyi időbe telik egy elemnek, hogy betöltöttnek tűnjön és használhatóvá váljon a felhasználó számára.

A TBT és a TTI nem számítanak alapvető webes-vitals mutatóknak.

Elrendezés összmozgása (CLS)

Az elrendezés összmozgása (CLS) azt méri, hogy mennyire „ugrál” egy oldal elrendezése, miközben betöltődik. Egész pontosan a legnagyobb összmozgását figyeli meg az oldalon. A Google szerint a legnagyobb jónak tekinthető CLS érték 0,1.

Az elrendezése mozgása vagy változása lényegében azt jelenti, hogy mennyire mozdulnak el az elemek az oldalon (vízszintesen és/vagy függőlegesen) abból a pozícióból, amiben elsőként megjelentek. Összmozgásnak tekinthető azon elmozdulások összessége, amelyek egy másodpercen belül történnek. Egy összmozgás akár 5 másodperc hosszú is lehet, és bármennyi elmozdulásból állhat.

Tegyük fel, hogy a felhasználó megérkezik az előbb említett galériás oldalra, és megpróbál rákattintani a jobb oldalra mutató nyílra. Azonban rögtön a kattintás előtt a galéria lejjebb ugrik az oldalon, például mert megjelenik felette egy fejléckép. Ilyenkor az illető nem oda kattint, ahová eredetileg szeretett volna. Ez persze nagyon bosszantó lehet, és súlyosan rontja a felhasználói élményt.

A Google a következő egyenlettel számítja ki a CLS-t:

A hatási hányad azt mutatja meg, hogy a képernyő hány százaléka változik meg egy elmozduláskor. A távolsági hányad azt, hogy a képernyő hány százalékában mozdul el egy elem.

Ha például egy weboldal egy 400 képpont magas kijelzőn jelenik meg, és ebből 200 képpont elmozdul egy elem betöltésekor, akkor a hatási hányad 200/400, azaz 50%. Ha ez az új elem egy másik elemet is eltol valamilyen irányba 50 képponttal, akkor a hatási hányad 50/400, azaz 12,5%.

A teljes CLS kiszámításához ezt a két százalékértéket kell összeszorozni egymással:

Ha ez a legnagyobb összmozgás az oldalon, akkor a CLS = 0,0625.

Habár ez nem tökéletes (ideális esetben 0 lenne), még mindig elfogadható, hiszen a Google szerint 0,1 vagy annál kisebb CLS számít jó értéknek.

Hogyan mérheted az alapvető webes vitals-mutatókat

Ezeket a teljesítménymutatókat többféle ingyenes eszközzel is mérheted, amelyeket a Google biztosít:

• Chrome UX Report (CrUX): A CrUX valódi, Chrome felhasználóktól gyűjtött adatokat kínál, tehát a webhelytulajdonosok láthatják, hogy milyen felhasználói élményt kínál webhelyük a látogatók számára.
• Google Lighthouse: Ez az ingyenes eszköz mesterséges körülmények között mért eredményeket kínál az alapvető webes vitals-mutatókról. Legegyszerűbben a Chrome vagy más Chromium alapú böngésző fejlesztői eszközei között érhető el.
• Google PageSpeed Insights: Ez az online teszt a CrUX és a Lighthouse által kínált adatokat (és egyéb mutatókat) egyesíti egyetlen részletes jelentésben. A teszt hasznos tanácsokat is ad az adott oldal felgyorsításához.
• Google Search Console: A Search Console felületén található alapvető webes-vitals mutatók jelentés egy általad kezelt webhelyről jelenít meg adatokat, részben a CrUX alapján.

Hogyan javítsd alapvető webes-vitals mutatóidat

Az első vizuális tartalomválasz (LCP) javítása

• Használj tartalomelosztó hálózatot: A CDN-ek gyorsítótárba helyezik a tartalmat a világ különböző pontjain található szervereken, hogy a közeli felhasználók gyorsabban hozzáférhessenek ezekhez.
• Optimalizáld képeidet: Sok weboldalon a képek számítanak a legnagyobb tartalomelemeknek. A képek fájlméretének csökkentésével jelentősen felgyorsíthatod oldalaid betöltését.
• Használj lusta betöltést: A lusta betöltés azt jelenti, hogy egy oldal elemei csak akkor kerülnek betöltésre, amikor egy felhasználónak szüksége van rájuk. Ez szintén sokat javíthat az oldal sebességén, de ne vidd túlzásba, mert egy bizonyos pontot már árthatsz vele az LCP-nek. A Google éppen ezért azt javasolja, hogy a lusta betöltést csak az oldal hajtás alatti részén használd, azaz azokon a képeken, amikhez a felhasználónak görgetnie kell.

Az első interakciótól számított válaszkésés (FID) javítása

• Csökkentsd a JavaScript fájlok méretét: Az összetett forráskódot használó dinamikus webhelyek beviteli késést okozhatnak, mert a böngészőnek meg kell várnia, hogy a teljes forráskód betöltődjön, mielőtt lefuthatna. A JavaScript minifikációja segíthet ebben.
• Készíts statikus weboldalakat: A statikus HTML weboldalak sokkal gyorsabban töltődnek be, mint a dinamikusok, főleg, ha egy gyors CDN-en tárolják őket.
• Távolítsd el a felesleges eszközöket és kódrészleteket: A webhelyen használt beépülő modulok és extra szkriptek szintén lassíthatják az oldalak működését. Gondolkodj el rajta, hogy mire van ténylegesen szükséged és mit tudnál mellőzni közülük.

Az elrendezés összmozgásának (CLS) javítása

• Csökkentsd a harmadik felektől származó elemek számát: A harmadik felektől származó elemek más szerverekről kerülnek betöltésre, és így nem feltétlenül ugyan akkor jelennek majd meg, mint „saját” elemeid. Ez elmozdulásokhoz vezethet, ezért érdemes minimalizálni a külső felektől származó elemeket webhelyeden.
• Jelölj ki helyet a beágyazott tartalmaknak: Bizonyos belépő elemekre (pl. hirdetésekre) mindenképpen szükség van egy webhely működéséhez, ezért ezektől nem lehet véglegesen megszabadulni. Érdemes helyet hagyni ezeknek az elemeknek az oldal szerkezetében, hogy ne mozdítsák el az elrendezést, ha csak késleltetve képesek megjelenni.
• Ügyelj rá, hogy a képek az ideális méretükben jelenjenek meg: Ez nem ugyan az, mint a konkrét képfájlok méretének optimalizálása. Az asztali számítógépek, okostelefonok és táblagépek mind eltérő méretű képeket igényelnek, mert más és más méretű kijelzőkön jelenítik meg a tartalmakat. Ha egy böngésző először a nagy, asztali képet tölti be, és utána kénytelen az optimalizált mobilos verziót lekérni, akkor ez jelentős összmozgást eredményezhet. Biztosítsd tehát, hogy rögtön a megfelelő elemek jelenjenek meg oldalaidon.
• Állítsd be a képek és videók méreteit: A magasság (height) és szélesség (width) tulajdonságok szabják meg a böngészők számára, hogy pontosan mekkora területet foglaljanak le egy kép vagy videó számára az oldalon, mielőtt az betöltődne.
• Használj CSS technikákat: Többféle CSS módszerrel is megszabhatod egy nagyobb elem képarányait.

Milyen egyéb teljesítménymutatókra érdemes figyelni?

Habár első körben határozottan a három alapvető webes vitals-mutatót (LCP, FID, CLS) érdemes optimalizálni, a Google más teljesítménymutatókat is figyelembe vesz az oldalak elemzésekor.

A first contentful paint (FCP), DOMContentLoaded (DCL) time to interactive (TTI) és time to first byte (TTFB) nem járulnak hozzá olyan mértékben a SEO-hoz, mint az LCP, FID és CLS, de segíthetnek felfedezni az alapvető mutatókat is érintő problémákat.