Hogyan tesztelhető a weboldal teljesítménye?

Szerző: | okt 18, 2017

pingdom

Ha úgy döntesz, hogy belevágsz a honlapod sebességének javításába, akkor először mindenképpen teszteld le egy vagy több tesztelő eszközön, hogy tisztán lásd, melyek azok a területek, amelyek javításra szorulnak. Ezekből a tesztelő eszközökből mutatom be azokat, amelyeket rendszeresen használok.

Google PageSpeed Insights

pagespeed insights

Link a teszt futtatásához: PageSpeed Insights

A Google tesztelő eszköze, mellyel a weboldal asztali és mobil nézete tesztelhető. A Google a mobilnézet ellenőrzésére, az oldal tetején piros sávban a Mobile Friendly Test-et ajánlja helyette, mellyel ellenőrizhető, hogy a weboldal mobilbarát-e.

A PageSpeed Insights, használata egyszerű, csak be kell írni a weboldal linkjét és az elemzésre kattintani. Amikor lefut a teszt, kapsz egy értéket (0-100-ig van skálázva), valamint egy listát a megoldandó problémákról.

A leggyakrabban ezekkel a problémákkal találkozhatsz:

Optimalizáld a képeket (méretezd át és tömörítsd) – a képek optimalizálását komolyan súlyozza a teszt, ha ezen a téren hiányosságok vannak, jelentősen csökkenti a pontszámot.

Használd ki a böngésző gyorsítótárazását: a gyorsítótárazással azt lehet megadni, hogy az oldal azon elemei, melyek nem változnak állandóan (statikusak), mennyi ideig tárolódjanak a böngésző gyorsítótárában. A gyorsítótárazás azért fontos, mert így a tárolt elemeket, nem kell újra és újra letölteni, amikor megnézed a weboldalt, így gyorsabb lesz a betöltődési sebesség.

Itt szerepelhetnek külső forrásból származó JS fájlok is, például a különféle Google-s termékeké (Google Analytics, Google Adsense), egyes bővítményeké, valamint a közösségi oldalaké (Facebook doboz, like gomb stb.)

Engedélyezd a tömörítést: a Gzip tömörítés segítségével egy szerveren lévő program tömöríti a weboldalt, és ezt a tömörített változatot szolgálja ki, a lekérésekre adott válaszul. A kisebb méret, gyorsabb letöltődést, gyorsabb weboldalt eredményez.

A megjelenítést gátló JavaScript és CSS kizárása a hajtás feletti tartalomban: az oldal hajtás feletti része, a weboldalnak az a része, amely görgetés nélkül is látszik. Itt szokott megjelenni pl. a Google font (betűtípus) linkje, mint betöltődést gátló forrást, valamint a weboldal sablon és a bővítmények JS és CSS fájljai is, ha nincsenek tömörítve és áthelyezve.

JavaScript csökkentése, CSS csökkentése, HTML lekicsinyítése: külön-külön szoktak megjelenni, mint javítandó probléma, de összevontam őket, mert a lényeg mindegyik esetben ugyanaz, csökkenteni kell a fájlok számát és a méretüket.

Rangsorold a látható tartalmat: az oldal hajtás feletti részének megjelenítéséhez további forrásokra van szükség. Erre a problémára többféle megoldási lehetőség van, ilyen a CSS, JS, HTML fájlok és képek méretének csökkentése, a tömörítés bekapcsolása, valamint ha az oldal hajtás feletti részének betöltése prioritást kap.

A szerver válaszidejének csökkentése: ha lassú a szerver válaszideje, akkor a PageSpeed Insights ezt is jelzi, a mért idővel együtt. A lassúság oka, a rosszul sebesség optimalizált weboldal, valamint a lassú szerver egyaránt lehet.

Webpagetest

webpagetest

Link a teszt futtatásához: Webpagetest.org

Nagyon hasznos eszköz, amely plusz információkkal is szolgál a PageSpeed Insights-hoz képest. A teszteléshez be kell másolni a weboldal linkjét, majd pedig választani egy lokációt, Magyarországhoz legközelebb Prága van a felsorolt listában, így én ezt szoktam kiválasztani. A Start Test-re kattintva lefut az elemzés, várni kell néhány másodpercet, eltart egy ideig.

Ha lefutott a teszt, akkor kapsz egy részletes értékelést az első megjelenítésre, valamint az ismétlődő megjelenítésre vonatkozóan is.

Mivel tud többet a Webpagetest, mint a PageSpeed Insights?

  • Mutatja a Time to First Byte (az első byte letöltéséig eltelt idő) értékét: minél kisebb, annál jobb.
  • Méri az oldal betöltődés idejét az első és második letöltés alkalmával is.
  • Jelzi a lekérések számát.
  • Waterfall (vízesés) nézetben mutatja, hogy milyen sorrendben és mennyi idő alatt töltődtek be az oldalt alkotó fájlok.

Kör diagrammal mutatja, hogyan oszlik meg a lekérések száma az egyes fájltípusok között, szintén ilyen nézetben látható az egyes fájltípusok mérete az oldal teljes méretéhez viszonyítva.

Az eredményt A-tól F-ig skálázva értékeli az oldal, ahol A a legjobb, F a legrosszabb érték. Információt kaphatsz a Gzip tömörítésről, a képek gyorsítótárazásáról, a statikus elemek gyorsítótárazásáról is. Ha rákattintasz a Betűre, akkor egy listát is láthatsz a problémás fájlokról.

GTmetrix

gtmetrix

Link a teszt futtatásához: GTmetrix

A Webpagetest-hez hasonló külföldi tesztelő oldal, tud mindent, amit az előbbi honlap. Az oldal külseje kicsit más, az értékelés százalékosan és betűvel egyszerre történik. A GTmetrix kétféle eredményt mutat a PageSpeed Score-t és a YSlow Score-t. Mindkét esetben minél magasabb a %, annál jobb. Az A-A, A-B, B-A, B-B, igazán jó eredmény.

Ha a PageSpeed vagy a YSlow fülekre kattintasz meg tudod nézni, milyen komponensekből tevődik össze az adott pontszám. A vizsgált komponenseknél, a kis lefele mutató nyílra klikkelve, elolvashatod melyik fájlokkal kell foglalkoznod a jobb eredményért. Ha a „What’s this mean?”-re mutatsz a felugró ablakban megjelenik egy magyarázó szöveg a Read more pedig a megoldási javaslat oldalára visz.

A Waterfall fül itt is a Webpagetesthez hasonló vízesés nézetre visz, ahol egymás alatt szerepelnek a fájlok a betöltési idővel együtt. Az oldal előnye, hogy a Compare gomb segítségével, összehasonlítható a tesztelt oldalt, más oldallal. Ez lehet a saját weboldalad egy másik oldala, vagy akár a konkurencia weboldala is.

Pingdom

pingdom

Link a teszt futtatásához: Pingdom.com

Nagyon egyszerű felépítésű tesztelő oldal, a tesztelésnél Stockholmot érdemes kiválasztani, mint egyetlen európai lehetőséget.

A teszt után kapsz egy zanzásított eredményt (Summary), mely tartalmazza, hogy milyen besorolásba esik az oldal a szerzett pontok alapján, mennyi idő alatt töltődik be a weboldal, mekkora az oldal mérete, hány lekérés szükséges a betöltéshez, és hogy az eredménye alapján gyorsabb-e vagy lassabb, mint a pingdom.com-on tesztelt weboldalak adott százaléka.

Lefelé gördítve találod a részletes eredményt mely a GTmetrix-hez hasonló külsejű. Az ez alatt lévő egyes dobozok szintén hasznos információkat tartalmaznak.

  • Content size by content type – Tartalom mérete típus szerint
  • Request by content type – Lekérések száma tartalom típus szerint
  • Content size by domain – Tartalom mérete domain szerint (külső forrásoknál érdekes lehet)
  • Request by domain – Lekérések száma domain szerint
  • Végül pedig az elmaradhatatlan vízesés nézet, és egy kis magyarázat a weboldal használatához.

SEOceros

seoceros

Link a teszt futtatásához: SEOceros

Magyar nyelvű oldal, amely nemcsak a sebesség optimalizáláshoz, hanem a keresőoptimalizáláshoz is segítséget nyújt.

A teszt első fele a tesztelt honlap asztali gépen, mobiltelefonon és táblagépen való megjelenését, optimalizálását vizsgálja.

Ezt követi a weboldal SEO szempontból való vizsgálata, ahol az eredmény mellett, magyarázatot, ajánlásokat is olvashatsz, miért fontos az adott tényező megoldása.

A SEOceros vizsgálja a meta adatokat, az oldal tartalmát, a fejlécek struktúráját, a képek alt címkézését, a keresőbarát linkeket, a külső és belső linkeket, az url átirányításokat és így tovább.

A teszt utolsó része a sebesség optimalizálás elemzésére terjed ki, mely vizsgálja a szervert, a megjelenítést gátló forrásokat, a JS, CSS fájlokat, a tömörítést és a gyorsítótárazást is.

A teszt az oldal tetején és végén is ír egy pontszámot, a SEOceros 0-tól 100-ig pontoz. Én a 90pont feletti értékre törekszem, ez kis odafigyeléssel teljesíthető feladat.

Archívum

Copy link