A honlapjával minden cég a Google-kereső találati listájának első oldalára akar kerülni, és persze remek felhasználói élményt biztosítani a látogatóknak. Ehhez kulcsfontosságú, hogy a weboldal gyorsan betöltődjön, hosszú várakozás esetén el is kattintanak az érdeklődők. A honlap sebessége rengeteg módon mérhető, de a leginkább bevett módszer egy ingyenes eszköz, a GTmetrics használata.
Az első lépés: a GTmetrics főoldalán megjelenő üres rubrikába kell másolni a honlapunk linkjét, majd a “Test your site” feliratra kattintani.
Ennyi a teendőnk, ezután a GTmetrics 4 lépésben elvégzi a weboldal vizsgálatát, tapasztalatunk szerint maximum egy perc alatt.
A legfontosabb adatokat egy sorban át is nézhetjük. Hogy itt milyen értékeket láthatunk? Íme a válaszok:
GTmetrix Grade
Amerikai stílusú osztályzatot ad egyetlen betűvel, ezzel összességében értékeli a honlap sebességét. Minél közelebb van a betű az ABC-ben az A-hoz, annál jobb az érték. Itt főként a betöltés sebessége és a vizuális megjelenések stabilitása számít. Ezekkel szembesül a látogató is, amikor a weboldalunkra kattint, így a felhasználói élmény osztályzatának is tekinthető.
Performance
Itt százalékosan is megjelenik a sebesség értékelése, ez alapján kapjuk az osztályzatot. Az alábbi értékeket veszi figyelembe:
– First Contentful Paint (FCP): a szövegek, képek és videók betöltési sebessége.
– Speed Index (SI): a főoldal azon részének betöltési sebessége, amelyet először látunk a kattintás után.
– Largest Contentful Paint (LCP): a legnagyobb tartalmi elem betöltési sebessége.
– Time To Interactive (TTI): a betöltés reszponzivitását méri, illetve észleli, hogy meddig tűnik egy oldal interaktívnak, miközben a gyakorlatban (a betöltés miatt) még nem az.
– Total Blocking Time (TBT): az FCP és a TTI közötti időt méri, vagyis azt, hogy mennyi idő telik el a szövegek, vizuális elemek betöltése és a valós interaktivitási lehetőség között.
– Cumulative Layout Shift (CLS): a honlap elemeinek elmozdulását méri a betöltés alatt.
Structure
Itt már nem a sebességet értékeli az oldal, hanem azt, hogy mennyire optimális a honlap felépítése. Ezt a felépítést sok minden ronthatja, mint például a túl sok menü és aloldal, a túl nagy méretű képek és felesleges bővítmények használata.
Web vitals
A “Web Vitals” felirat alatt három érték jelenik meg. Ezeket a “Performance” értékek szempontjainál már kifejtettük.
LCP: Largest Contentful Paint
TBT: Total Blocking Time
CLS: Cumulative Layout Shift
Az LCP és a TBT esetén időeredményt kapunk, a CLS esetében pedig egy értéket, amely 0,01 esetén optimális – ennél magasabb értéknél gond van az elemek elmozdulásával a betöltés során.
Speed Visualization
Itt vizuálisan is át tudjuk tekinteni a legfontosabb értékeket.
A képernyőképpel megjelenő skála végén a “Fully Loaded Time” is megjelenik, így választ kapunk arra a kérdésre is, hogy pontosan mennyi időre van szükség a honlap teljes betöltéséhez.
Top Issues
Itt a leginkább kifogásolható hibák jelennek meg egy címszóval, majd a rubrikájukra kattintva részletes leírás jelenik meg a hibákkal.
Minden ilyen rubrikában megjelenik egy “Learn how to improve this” felirat, ide kattintva tanácsokat kapunk arra, hogy miként javíthatunk az adott értéken.
Page Details
A GTmetrics itt a legfontosabb elemekre bontja a honlap felépítését (pl.: képek, videók, betűtípusok, HTML- és CSS-kódsorok), és mindegyik méretét is meghatározza, illetve azt, hogy milyen arányban határozzák meg a betöltés sebességét.
Performance táblázat
Itt nem csak a 3 kiemelt érték adatai jelennek meg, hanem mind a 6 érték, amelyeket a “Performance” részben felsoroltunk (FCP, SI, LCP, TTI, TBT, CLS).
Structure táblázat
Erre a menüpontra kattintva részleteiben is átnézhetjük, hogy az oldal milyen elemei befolyásolják leginkább az optimális betöltést (pl.: képek mérete, felesleges kódsorok, vizuális elemek formátuma, stb.).
A rendszer minden gyenge érték esetén jelzi, hogy mennyivel lenne jobb a betöltésünk, ha az adott hibát kijavítanánk, és erre természetesen javaslatokkal is szolgál.