A weboldalak betöltési sebességének mérését új szintre emelte a Google, ezek az adatok ráadásul már a rangsorolási algoritmusnak is részét képezik. Hogyan teszteld, hogyan értelmezd, hogyan javítsd az új mérőszámokat? Most mindent megtudhatsz róla!

Itt a Core Web Vitals: tudj meg mindent az alapvető webes-mutatókról!

Úgy tűnik, 2021 a Google-nél a felhasználóbarát honlapok helyzetbe hozásának éve. Márciusban váltott a keresőóriás teljes mértékben a mobile-first indexelésre, június közepétől pedig az Oldalélmény, azaz Page experience algoritmus elindításával  a Core Web Vitals, azaz magyarul Alapvető webes vitals-mutatók sebességmutatói is rangsorolási tényezőkké váltak. Persze a hír senkit sem kell, hogy villámcsapásként érjen, a Google jó előre bejelentette az újítás érkezését, amely még inkább arra ösztökélheti a lassabb, korszerűtlenebb weblapok tulajdonosait, hogy hatékonyabban optimalizálják oldalaikat. Az oldalélmény-algoritmus augusztus végéig folyamatosan kerül bevezetésre, tehát nem kell azonnal fejvesztett kapkodásba kezdened, de már nem is érdemes tovább halogatni a felkészülést. Vágjunk is bele, lássuk, mit jelent a Core Web Vitals, és mire érdemes odafigyelned!

Mérőszámok a jobb helyezésért

A Google többszáz mérőszámot alkalmaz annak megállapítására, hogy egy-egy weblap mennyire számít felhasználóbarátnak. Ezek közül eddig a biztonságos weboldal, a HTTPS-protokoll, a felugró ablakok és természetesen a mobilbarát megjelenés bírt kiemelt jelentőséggel. Ez azt jelenti, hogy azok a honlapok, amelyek vírusoktól és spamektől védettek, HTTPS-protokollal titkosítják a személyes adatokat, nem tartalmaznak kéretlenül felugró üzeneteket, illetve jól olvashatóak mobileszközökön, már eddig is prioritást élveztek a találati listában az ezekkel a beállításokkal nem élő honlapokkal szemben. E mutatók mellé kerül most bevezetésre a Core Web Vitals.

A sebesség 6 mutatója

A Core Web Vitals rendszer az FCP, SI, LCP, TTI, TBT és CLS nevű mutatók különböző súlyozású figyelembevételével számítja ki a weboldal összesített PageSpeed értékét a nyílt forráskódú Lighthouse elemzőrendszer segítségével. A cél a 100-as skálán legalább 90-es érték elérése. A Lighthouse jelenlegi, 8-as verziója a httparchive.org webes archívum összesített adataival hasonlítja össze a tesztelt weboldal adatait, és a statisztikai adatok megfelelő percentilis értékét adja pontszámul. Egyszerűen fogalmazva ez azt jelenti, hogy ha a legtöbb weboldal átlagértékével azonos valamely vizsgált sebességmutatód, akkor mindössze 50-es pontszámot fogsz kapni, alaposan fel kell kötni tehát azt a bizonyos alsóneműt, ha a hőn áhított 90-es értéket el szeretnéd érni! A sikeres sebességoptimalizálás azonban megtérülő befektetés, hiszen a rangsorolásban szerzett előny mellett méginkább segítheti a weblaptulajdonosokat a felhasználók lemorzsolódásának megakadályozásában, gyors és kiszámítható működésre optimalizálva a weboldalaikat. Lássuk a részleteket!

FCP – First Contentful Paint

Az FCP mutató azt méri, mennyi ideig tart a böngészőnek a kérés elküldése után az első tartalmi elem feldolgozásáig eljutnia. Bár ez a mutató mindössze 10% súllyal kerül figyelembevételre az összpontszám számításánál, mégis kiemelten fontos, hiszen a weboldal összes többi eleme ezt követően kerül csak letöltésre/feldolgozásra, így az összes többi sebességmutatóra is meghatározó hatása van! A sebességet elsősorban a szerver válaszideje határozza meg, fejlesztőként a szerveroldali programkód optimalizálásával, gyorsítótárazással javítható jelentősen. Jelenleg 1,8 mp alatti értékkel lehet bekerülni a zöld tartományba, 3 mp feletti érték pedig kifejezetten rossznak számít.

SI – Speed Index

Az SI a teljes látható oldalbetöltés idejét méri. Az összes mutató közül ez a legkomplexebb, hiszen mind a weboldal elemeinek letöltési idejét, mind azok feldolgozási idejét figyelembe veszi. Ennek megfelelően leginkább más részterületek javításával fogod tudni ezt a mutatót feljebb tornázni. Súlyozása 10% az összpontszámban.

LCP – Largest Contentful Paint

Az LCP az oldal betöltési sebességébe enged betekintést olyan módon, hogy megmutatja az oldal betöltési folyamatának kezdete és a weblap legnagyobb méretű, görgetés nélkül látható elemének betöltése közötti időt. Az ilyen, nagy méretű elemek legtöbbször a tartalomban megjelenő képek, háttérkép, fejléc, nagyobb kiterjedésű szövegblokk, oldalba ágyazott hirdetés, vagy akár popup elem lehetnek. Magas, 25%-os súlyozással veszi ki részét az összpontszám meghatározásánál, hiszen az első felhasználói élményt a görgetés nélük megjelenő tartalom határozza meg. A jelenlegi Lighthouse pontrendszer szerint érdemes a 2.5 másodperces betöltési határt tartani, de semmiképpen nem menni 4 másodperc fölé. Ami természetesen értető is, hiszen 4 másodperc – ha várakozással telik – örökkévalóságnak tűnhet az egyszeri felhasználó szempontjából, aki ilyenkor türelmét elveszítve könnyen elkattinthat az adott webhelyről.

TTI – Time To Interactive

A TTI mutató azt méri, a weboldal a megnyitástól számítva mennyi idő alatt válik teljes mértékben interaktívvá, azaz az oldalon végezhető felhasználói műveletek, például kattintás, billentyűleütés fogadására. Célja, hogy megakadályozza a sebességpontszám növelésére irányuló olyan trükközéseket, melyek során a látható tartalom ugyan megjelenik a böngészőben, azonban a szkriptek késleltetett letöltése és feldolgozása miatt a weboldallal nem tud műveletet végezni a felhasználó. A mutató 10%-ban járul hozzá az összpontszámhoz. Javítása elsősorban a fő böngészőszál terhelésének csökkentésével, az interaktivitáshoz szükséges szkriptek és más elemek korai letöltésével és gyors feldolgozásával, az ilyen szempontból szükségtelen elemek késleltetett betöltésével oldható meg. Komplexebb weboldalak esetén garantáltan álmatlan órákat fog okozni a front-end fejlesztőknek!

TBT – Total Blocking Time

A TBT a pontszám-gyilkos ezredmásodpercek mérőszáma! Értékét az oldal betöltődése (FCP) és interaktívvá válás (TTI) között eltelt időszakban futó, úgynevezett hosszú folyamatok interakció-blokkoló időtartama határozza meg. A weboldal megjelenését és működését biztosító böngészőfolyamatok közül az 50 ms-ot, azaz 5 századmásodpercet meghaladó futási idejűek számítanak hosszú idejűnek. A TBT értéke az 50 MS-ot meghaladó időtartam alapján kerül kiszámításra, tehát például egy 7 századmásodpercig futó szkript esetén 20 ms lesz az érték. 200 ms alatt minden rendben, 600 ms alatt elfogadható a helyzet, efölött azonban mindenképp törődést igényel a probléma. Ha csak legyintesz az ezredmásodpercek láttán, azt bizony rosszul teszed, mivel az a mutató az összes közül legmagasabb, 30%-os súlyozással járul hozzá az összpontszámhoz! A javítás gyakran feketeöves feladat, de a javascript kódok hatékony felosztása, az elavult függvénykönyvtárak aktualizálása, a betöltési prioritások megfelelő meghatározása nagyban javíthatja a helyzetet.

CLS – Cumulative Layout Shift

A CLS-érték azt mutatja meg, hogy betöltés során mennyire marad stabil az oldal, azaz a betöltődés során elmozdulnak-e a különböző képi vagy szöveges elemek. Ez a felhasználói élmény szempontjából rendkívül fontos kritérium, hiszen sok honlap böngészésekor előfordul, hogy a kívánt tartalmi elem már betöltődött, a felhasználó egyből rá is kattint, de időközben például egy reklám kerül a helyére, így az nyílik meg. A Google itt az elmozdulás mértéke alapján állapítja meg a mérőszámot, amely ideális esetben 0.1 alatt marad, de nem tanácsos meghaladnia a 0.25-ot. 15% súlyozással a harmadik legmeghatározóbb elem az összpontszám számításánál. Javítása az oldalon megjelenő elemek pozíciójának és méretének a megjelenítés előtti definiálásával lehetséges.

Hogyan tesztelheted weboldalad Core Web Vitals értékeit?

A legegyszerűbb, ha a Google PageSpeed Insights weboldalára beírod weboldalad címét, pár másodperc múlva már láthatod is az eredményt. Fontos tudni, hogy mobileszközökre és asztali számítógépre eltérő pontszámot kapnak a weboldalak, hiszen a különböző eszközökön eltérhet a weboldal megjelenése, és a mobileszközök gyakran lassabban is működnek a desktop számítógépeknél. Ha a weblapodat sokan látogatják asztali számítógépről, érdemes ezt a pontszámot is magasan tartanod a jó felhasználói élmény érdekében, a Google a rangsorolásnál azonban a mobile-first irányelvnek megfelelően a mobil pontszámot fogja figyelembe venni, tehát csak akkor lehetsz nyugodt, ha mobilon is jól teljesít a weboldalad! Emellett azt sem árt tudni, hogy a weblapok eltérő elrendezésű oldalai, például kezdőlap, webshop kategória-, és termékoldalak, cikkek, blogbejegyzések és egyéb tartalomtípusok más és más oldalelrendezésre épülnek, tehát ezek mindegyikére érdemes ellenőrizni a pontszámot, nem elég csak a kezdőoldalra. Ha igazán alapos akarsz lenni, akkor a fontosabb aloldalaidnál ellenőrizz néhány igazán content-heavy, azaz tartalomban – például nagyméretű képekben, beágyazott videókban, stb. – gazdag aloldalt is, mivel ezek az átlagnál mindig rosszabbul teljesítenek a sebességteszteken.

A PageSpeed tesztoldalon a felső blokkban több értékelést is találsz. Ezek közül a Tesztadatok blokk tartalmazza az aktuális vizsgálat pillanatnyi eredményeit. A közelmúlt egyik leghasznosabb újdonsága, a Számológép megjelenítése link, melyre kattintva végre mutatónként láthatjuk, melyik részterület milyen mértékben befolyásolja weboldalunk esetében az összpontszámot, ráadásul az adatok a súlyozást is figyelembe vevő, könnyen értelmezhető kördiagram formájában is megjelennek. Az itt megjelenő értékek tesztről tesztre akár jelentős eltéréseket is mutathatnak, azonban ezeket a számokat a Google nem veszi figyelembe a weboldalad értékelésénél, kizárólag számodra nyújtanak pillanatnyi információt weboldalad aktuális állapotáról és a javasolt javítási lehetőségekről.

A Google azonban a Chrome böngészőt használó, valós felhasználóknál mért, 28 napi összesített sebességadatok alapján határozza meg weboldalad besorolását. A Mező adatai blokkban akkor jelenik meg érték, ha az aktuálisan vizsgált URL-ről elegendő statisztikai adattal rendelkezik a Google az elmúlt 28 napból. A legfontosabb azonban az Origin summary blokk, ez tartalmazza ugyanis a teljes webhelyed különböző adatainak összesített értékét. Ha itt azt látod, hogy a webhely megfelel az Alapvető webes mutatók értékelésének, akkor minden rendben – bár a kedvező besorolás hosszabb távú fenntartása érdekében ez esetben is érdemes lehet az esetleg gyengébben teljesítő aloldalak értékeit feljebb tornázni. Ha azonban a webhely nem felel meg, akkor fel kell kutatni a gyenge teljesítés okait és el kell hárítani őket, hiába jelenik meg esetleg magas pontszám az aktuálisan vizsgált aloldalnál!

A gyengén teljesítő aloldalak felkutatásában a Google Search Console Oldallal kapcsolatos élmény és Alapvető webes vitals-mutatók, valamit a Google Analytics Viselkedés/Webhelysebesség jelentései is sokat segíthetnek.

Ha a Google PageSpeed távoli szervere helyett a saját böngésződ és internetkapcsolatod segítségével szeretnéd tesztelni webhelyed sebességét, akkor a Chrome böngésző fejlesztői eszközei között is megtalálod a lokális tesztek futtatására alkalmas Lighthouse-integrációt. Ezeken kívül jónéhány hasznos eszközzel tesztelhető a weboldalak betöltési sebessége, az általuk adott metrikák azonban hasznosságuktól függetlenül semmilyen összefüggésben nem állnak a Google által figyelembe vett mutatókkal.

Mitől produkálhat rossz sebességértékeket a weboldalad?

Egy oldal elemeinek lassú betöltésének, rossz reakcióidejének vagy instabilitásának több oka is lehet. A nem megfelelő LCP-értéket okozhatja többek között a szerver lassú válaszideje, a renderelést blokkoló JavaScript és CSS, valamint az, ha egyszerűen csak túl nagy méretűek a betöltendő fájlok.

Általánosságban elmondható, hogy egy weboldal akkor reagál lassan egy kérésre, ha a böngésző főszála más feladat miatt nem tud a válaszolni a felhasználónak. A rossz FID-érték oka ennek megfelelően sokszor a rosszul optimalizált JavaScriptben keresendő. A szám javításához többek között érdemes a hosszan futó feladatokat kisebb egységekre bontani, a kevésbé fontos szkripteket késleltetve, vagy a háttérben betölteni, futtatni.

Egy honlapnak alacsony lehet a CLS-értéke, ha a betöltendő képek vagy hirdetések mérete nincs meghatározva, ha különböző oldalelemek egyszerre töltődnek be, illetve ha új DOM-elemek dinamikusan kerülnek hozzáadásra az oldalra, elmozdítva a korábban már megjelenített elemeket. Amennyiben mindezt el szeretnéd kerülni, határozd meg a beágyazott képek és videók pontos méretét, és úgy tervezd meg az oldalt, hogy új elemek minden esetben csak a már betöltődött elemek alá kerülhessenek.

Elégedett látogató = több konverzió

Az online marketing szempontjából a vásárlóra gyakorolt első benyomás kiemelkedően fontos. Az alapvető webes mutatók abban próbálnak segíteni, hogy jó optimalizációval a lehető legjobb első benyomást érhesd el. A Google organikus találati listáján szereplő előkelő helyezésekkel, illetve a vásárlókat hatékonyan megcélzó, frappáns szövegekkel megírt Google Ads vagy Facebook kampányokkal hatékonyan lehet érdeklődőket és potenciális vásárlókat bevonni. A marketinged sikerességében rendkívül fontos, hogy előbbieket sikerül-e elgondolkodtatni termékeidről vagy szolgáltatásaidról, illetve hogy azokat, akik valóban vásárolni akarnak, sikerül-e meggyőzni az általad kínáltak elsőrangú minőségéről. Ilyenkor minden pillanat számít, és nem szabad, hogy egy lassan működő weboldal elbizonytalanítsa őket. Az alapvető webes mutatók olyan hiányosságokra mutathatnak rá egy-egy honlapon, amelyek javítása biztosan megéri a ráfordítást.

Segítségre van szükséged weboldalad, webáruházad keresőoptimalizálásával kapcsolatban?
Keresd szakértő csapatunkat!