Weboldal sebesség mérésre GTmetrix.

A weboldalak esetében az egyik legfontosabb mutató a weboldal sebessége. Egyes weboldalak esetében egyetlen másodperc több százezer forintnyi bevétel többletet vagy kiesést eredményezhet.

Éppen ezért kiemelten fontos, hogy a weboldalunk mennyi idő alatt tölt be. Sajnos a weboldal sebességét nem mindíg egyszerű meghatározni. Ebben a bejegyzésben megmutatjuk, hogyan lehet használni és értelmezni az egyik legnépszerűbb sebességmérésére használt eszközt: a GTMetrixet.

Vizsgálatok száma

Ahhoz, hogy egy a valósághoz közelálló eredményt kapj, nem elég csupán egyetlen mérést elvégezni. Érdemes több mérést is végezni és a kapott eredményt átlagolni. Amennyiben nagy az eltérés különösen tekintettel kell lenni a leglassabb kapott eredményre.

Vizsgálatok helye

A GTMetrixen több tesztszervert is választhatunk. Mindíg érdemes olyan lokációt választani a teszteléshez, ami a célközönségünkhöz legközlebb helyezkedik el. Amennyiben a weboldal globális kiszolgálásra készült, érdemes több helyről is tesztelni a sebességet.

Érdemes egyébként valamilyen CDN szolgáltatást használni (pl: Cloudflare), amely több CDN Edge szerverre tükrözi a tartalmat és mindíg a látogatóhoz legközelebbi szerverről szolgálja ki a kérést.

Érdemes legalább egy ingyenes fiókot létrehozni GTMetrix-en, hogy több szerver is elérhető legyen, regisztráció nélkül csak a Vancouver-i szervert tudjuk használni.

Vizsgálati célok és módszerek

Általános, hogy a felhasználók csak a weboldal főoldalát vizsgálják. A főoldal sebessége is fontos, de ne feledkezzünk meg az aloldalakról sem. Érdemes tesztelni a termék oldalakat, valamint a post oldalakat is ahhoz, hogy egy teljes képet kapjunk weboldalunk sebességéről.

PageSpeed és YSlow Pontszámok

A két mutatószám kissé különböző szemszögből mutatja meg, hogy az oldalunk felépítése és mechanikája miként befolyásolja a weboldalunk betöltődési idejét.

A pontszámokkal önmagukban nem érdemes foglalkozni, azonban a részletezés mindig tartalmaz pár tippet, hogy a weboldalunkat miként tudjuk gyorsítani. Itt minden esetlegesen felsorolt hibánál találunk egy rövid magyarázatot is, amely segít megoldani az adott problémát.

Fully Loaded Time

A Fully Loaded Time azt mutatja meg, hogy mennyi időre van szükség az oldal teljes betöltődéséhez. Ez egy fontos szám, bár jól közelíti, de ez még nem feltétlenül egyezik azzal, amit egy valódi felhasználó tapasztal az oldal betöltődésekor.

Például ha van egy automatikusan elindított háttérvideó a felhasználó számára sokkal hamarabb betöltődhet az oldal, mint amit a Fully Loaded Time mutat, hiszen az oldal a renderelést követően még tölti a videót.

Total Page Size

Ez a szám elsősorban nem a sebesség miatt lényeges, – bár egyértelműen van összefüggés a sebesség és az oldal mérete között- hanem azért, mert egy látogatónak ekkora adatforgalmat generál (mobil internetkapcsolat esetén nem mindegy, hogy egy oldal 12Mb vagy 600kb).

Természetesen több adatot több ideig is tart letölteni, így ezt az értéket is érdemes minél alacsonyabban tartani.

Requests

Ez az érték mutatja az oldal betöltéséhez szükséges lekérdezések számát. Bár HTTP2 és HTTP3 protokol esetén már kevésbbé lényeges, mint HTTP1 alatt, azonban a gyakorlati tapasztalat azt mutatja, hogy ezt a számot is érdemes alacsonyabban tartani mind a szerveroldali, mind a kliens oldali memória és CPU felhasználás optimalizálása érdekében.

Waterfall

A Waterfall segít megérteni, hogy az erőforrások milyen sorrendben töltődnek be, valamint azt is megmutatja, hogy az egyes erőforrások betöltése mennyi időt vesz igénybe.

A Waterfall nem csak a betöltési sorrendet, vagy időt mutatja, hanem különböző színekkel azt is, hogy a betöltés egyes szakaszai mennyi időt vesznek igénybe. Ennek segítségével tovább optimalizálható a betöltési sebesség, például láthatjuk, ha egy kép túl nagy és lassan töltődik be, vagy, hogy melyik CSS/JS lassítja a megjelenést.

A Waterfall további előnye, hogy pirossal jelöli, ha egy kérésre hibás válasz jön. Ez lehet 4xx, vagy 5xx hiba, de ezek azon túl, hogy lassítják a betöltődést, azt is jelezhetik, hogy valami nem működik megfelelően az oldalon. Ezenkívül amennyire csak lehet le kell csökkentenünk az átirányítások számát is, ezt is külön jelzi a grafikon.

Connecting (kapcsolódás):
A grafikon cián, világos- és sötétzöld része azt az időt mutatja, ameddig a böngésző kapcsolódik a szerverhez. Ez jellemzően rövid időt vesz igénybe, ha mégsem akkor az azt jelenti, hogy a szerver nincs megfelelően beállítva, vagy túlterhelt.

A ciánkék rész mutatja a DNS feloldáshoz szükséges időt
A világoszöld a kapcsolódást a szerverhez
A sötétzöld rész pedig az SSL kapcsolódás

Waiting (várakozás)
A grafikon lila része mutatja a kérés kiszolgálásához szükséges időt. Ez az a pont, amikor a szerver már megkapta a kérést, de még nem kezdte el küldeni a választ, hanem az ahhoz szükséges műveleteket hajtja végre. Ezt az időt gyorsítótárazással drasztikusan csökkenthetjük, anélkül azonban akár 1-2mp is lehet.

Receiving (letöltés)
A szürke rész mutatja azt az időt, amíg az adott tartalom letöltődik a szerverről a böngészőbe. Jellemzően akkor magas, ha a szerver messze van a tesztszervertől, vagy ha lassú a kapcsolat (ez ugye szerver probléma)

Blocking (blokkolás)
A bézs színű rész mutatja azt az időt, amikor a böngésző sorbaállította a kapcsolatot, de még nem küldte el a szervernek. HTTP1 protokolon gyakran előfordul, mivel itt viszonylag alacsonyan van maximalizálva az egyidejű lekérések száma.

Ezenkívül, mivel a böngésző a betűtípusokat utolsóként tölti be, itt is láthatunk hosszabb bézs részeket, de ezzel nincs különösebb teendő.

Timings

A Timings rész a legérdekesebb számunkra, mivel ez mutatja meg, hogy a felhasználónak milyen gyorsan töltött be az oldal. Míg a Fully Loaded Time az oldal teljes betöltési idejét mutatja, a Timings fül alatt megtaláljuk a First Contentful Paint idejét, ez az a pillanat, amikor a felhasználó már látja nagyjából az oldalt. Felhasználói élmény szempontjából ez egy fontos érték, ennyi idő telik el aközött amikor a felhasználó beírta a weboldal címét, vagy átkattintott és meglátja az oldalt.

A funkcionalitás szempontjából az Onload érték a fontos, ez az a pillanat, amikor az oldal már gyakorlatilag renderelődött, betöltöttek a betűtípusok is, a képek láthatóak lettek.

First Contentful Paint

Onload

Fully Loaded

Videó

Amennyiben engedélyezzük a videó készítését is, a betöltődés folyamata videón is nyomonkövethető, így láthatjuk ezek a számok mit jelentenek a gyakorlatban. A lejátszó jobb alsó sarkában érdemes a sebességet 1/4-re csökkenteni, hogy jobban nyomonkövethető legyen amit látunk.

Swift Performance-al egyszerűbb

Nincs szükség programozóra vagy szakemberre. Csupán egyetlen kattintással akár 440%-al is tudod gyorsítani az oldaladat. Nincs szükséged külön fizetős képoptimalizáló pluginra sem, hiszen a Swift Performance ingyen és korlátlan mennyiségben optimalizálja a JPEG és PNG kepidet is.

Swift Performance letöltése