Kategória archívum: technikai

Hogyan értelmezzük a GTmetrixet?

Hogyan használd a GTMetrixet weboldalad sebességének mérésére?

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
Optimalizáld a képeidet

Ha képek optimalizálása akkor Swift Performance!

Ha képek optimalizálása akkor is Swift Performance!

Egy kép többet mond ezer szónál, éppen ezért használunk nagyfelbontású, jó minőségű képeket weboldalunkon. Egy részletgazdag képnek a segítségével oldalunk látogatóiban pozitív benyomást tudunk kelteni. Ugyanakkor, ha a nagyfelbontású képek miatt az oldal lassan tölt be, akkor az egész a visszájára fordul és a látogató időelött visszafordul.

A képek méretének az optimalizálása régebben egy igazán pepcselős munka volt, hiszen el kellett találni azt az ideális egyensúlyt, amikor a kép felbontása még nem zavaróan alacsony, de az oldal betöltődése sem lassú. Általában minden tekintetben egy félmegoldás született. A képfelbontása maximum közepes volt, így a vizuális élmény sem volt áttörő, és az oldal betöltődése sem volt kimagaslóan gyors.

A techniaki fejlődésnek köszönhetően ez a probléma mára már megszünt. Speciális bővítmények képesek, akár 300%-al is csökkenteni a képek méretét, hogy az egyáltalán nem ront annak a minőségen. Azok a bővítények, amelyek erre képesek szinte minden esetben fizetősek. Sajnos a legtöbb cache plugin sem tartalmaz képoptimalizáló kiegészítést, pedig a weboldal optimalizálás egyik fontos pillére lenne.

Swift Performance beépített képoptimalizálóval!

De a Swift Performance IGEN! Nem csak egy cache plugint kapsz – amennyiben minket választasz – hanem egy olyan képoptimalizálót is, aminek a segítségével korlátan számban tudod a JPEG és PNG képeidet optimalizálni. Jelenleg a bővítmények piacán kétféle képoptimalizáló plugint találunk. Az ingyenest, amivel a képek átdolgozása kifejezetten időigényes és tudjuk, hogy az idő pénz. Illetve a fizetőset, amivel lényegesen gyorsabban, ugyanakkor drágábban tudjuk ezt a munkát elvégezni. A Swift Performance egyik előnye a sok közül, hogy egy fizetős bővítmény minden előnyét ingyen biztosítjuk, korlátozások nélkül.

Példák a egy-egy kép optimalizálására.

1 591  Kb

505 Kb

459 Kb

107 Kb

A Swift Perfroamance cache plugin egyetlen kattintással telepíthető

Telepítés egyetlen kattintással

Swift Performance telepítése egyetlen kattintással

A WordPress felhasználók többsége nem rendelkezik megfelelő programozási tudással ahhoz, hogy saját maga tudja, teljes biztonsággal az oldalát optimalizálni. Ilyenkor tökéletes megoldás egy cache plugin, ami elvégzi a munkát helyette. Ahogy a korábbi cikkünkben írtuk a Swift Performance-t már több, mint 10.000 választották, így elmondhatjuk, hogy egy megbízható, sokak által kitesztelt és többszörösen bizonyított bővítményről van szó.

A legtöbb cache plugin ideális beállítása még így is problémás lehet egy laikus ember számára. Ezzel ellentétben az áltagos WordPress felhasználókhoz igazodva a Swift Performance telepítővarázslójával mindössze egyetlen kattintással akár 440%-al gyorsabb oldalt tudunk létrehozni.

Egy kattintás, sok ezer művelet…

Miután a bővítményt feltelepítettük nincs más dolgunk, mint rákattintani az autokonfigurálásra. Ezzel a kattintással el is kezdődik a folyamat. A plugin megvizsgálja az oldalt, értékeli a kapott információkat és megtalálja a lehető legjobb konfigurációt.

Ez az egy kattintás sok órányi munkától kíméli meg a programozót, sőt, még olyanokat is optimalizálunk, amire talán más nem is gondolt volna.

A beépített és ingyenes képoptimalizálónak köszönhetően korlátlan számú JPEG és PNG képet tudunk, akár minőségromlás nélkül optimalizálni, amivel további értékes másodperceket nyerhetünk az oldal betöltésekor.

Amennyiben egy bevált, gyors és biztos megoldást szeretnél WordPress oldalad gyorsítására, akkor válaszd Te is a magyar fejlesztésű, nemzetközileg is elismert Swift Perfromance plugint.