Mi a GTMETRIX?

A GTMETRIX egy fantasztikus online analizáló eszköz, amely kombinálja a Google Page speed eredményeit a Yslow-val ( Yahoo sebességmérő analítika ).

gtmetrix-plugin

Ennek eredményeképpen tökéletesen le tudja fedni azokat a szempontokat, amelyek fontosak lehetnek a weboldalunk gyorsaságának növelése szempontjából. Mindezek mellett egyértelmű ötleteket és tippeket is ad a rendszer a fejlődésre, jól szemléltetve a weboldalad jelenlegi állapotát. Kimondhatjuk, hogy minden weboldal tulajdonosnak érdemes használni ezt az online felületet.

Lássuk, hogyan is kezdjünk hozzá és mit jelentenek a különböző adatok rajta:

seo1

Elkezdeni rendkívül egyszerű, hiszen nem kell mást tenned mint meglátogatod a gtmetrix.com weboldalt és beírni a beviteli mezőbe a weboldalad url címét. ( figyelj rá, hogy a megfelelő http vagy https előtaggal írd be a pontos eredmény elérése érdekében ) Fontos megjegyezni, hogy régebbi adatokat is gyűjt a weboldaladról, ha ingyenesen regisztrálsz a rendszerükbe. Ezáltal össze tudod hasonlítani, milyen volt és milyen lett, tehát jól nyomon követhetővé válik a weboldal fejlesztése.

Amint beírtad a beviteli mezőbe a weboldalad URL-jét és nyomtál egy enter-t, a rendszer azonnal megkezdi az analizálást és másodperceken belül megkapod az átfogó képet a weboldalad teljesítményéről. De mi is látunk itt valójában?

A kimutatásod három fő szekcióban lesz látható:

  • A bal oldalon láthatod az általános sebességi mutatót, a Pagespeed score-t. ( Google Page speed )
  • Tőle jobbra a Yslow paraméterei lesznek láthatóak. ( Yahoo page speed )
  • Legszélén pedig az oldalad betöltési sebességét fogja megmutatni. ( Page load time )

Mint láthatjátok a mellékelt példán, a rendszer felfedezte, hogy WordPress keretrendszerben működik az oldal, ezáltal érdekes tippeket jelenített meg az optimalizálásra.

Google Page speed

A Google Page speed eredményeit fogod leghamarabb megtekinteni, ezek rendszerezve vannak hatékonyság szerint növekvő sorrendben. ( alapértelmezetten )

google-amp-speed-race-fast-ss-1920

 Látható, hogy azokon a szegmenseken, ahol fejlődnöd kell, tippeket és részletes leírást is kaphatsz, hogyan tudod javítani ezeket az értékeket. Természetesen ezeknek a nagy része igényel programozási ismeretet, de szívesen segítünk az optimalizálásban, hiszen ez a munkánk:)

Összegyűjtöttünk nektek néhány tipikus példát, amely probléma szokott lenni ezeknél a tételeknél:

 

  • Defer parsing of JavaScript: Általános szabály, hogy a különböző Javascripteket ( programokat ) a weboldalad  <head> szekciójában kell elhelyezned. Habár az oldal betöltődése szempontjából előnyösebb ezeket a footeredben elhelyezni.
  • Optimize images: A képek optimalizálása rendkívül fontos. Gondolj bele, ha nagyobb képet töltesz be egy adott aloldalra, akkor a rendszer automatikusan “összenyomja” minden egyes oldal letöltésnél, hogy megfelelő méretben jelenjen meg az oldalon. Törekedj akkora képet használni, amekkora az adott dimenzióba illeszkedik!
  • Minify CSS/Javascript/HTML: “Minifying” annyit tesz, hogy a felesleges karaktereket eltávolítod az oldal kódjából. Ennek természetes velejárója, hogy a fájlok méretét is csökkented, tehát gyorsabb betöltést eredményez.
  • Enable gzip compression: Ez a fajta tömörítési eljárás engedélyezi a szervernek, hogy tömörítve küldje a megjelenítendő tartalmat a böngésződnek. Ezáltal szintén gyorsabb a transfer, így gyorsabb a betöltődés is.

 

Yslow

yslow-score

A Yahoo score tabod a lent említett tételeket tartalmazza. Láthatjátok, hogy jelenleg nem használunk CDN-t, erre fel is hívja az oldal a figyelmünket. Következő cikkünkben egy kicsit bővebb információt adunk a tartalom szállítási hálózatról. ( CDN )

seo2

Lássuk, melyek a tipikus hibák:

  • Add Expires headers – Ez röviden annyit jelent, hogy megmondod a böngésződnek, hogy egy korábban cache-elt tartalmat mennyi ideig tároljon.
  • Make fewer HTTP requests – A lekérések gyakoriságáról szól ez a tétel. Minden háttérkép, kép, effektus és úgy általában minden olyan programra vonatkozik, amelyet lekér a szervertől a böngésződ oldal letöltéskor. Amennyiben ezek különállóként indulnak el egyesével, sokkal lassabb lesz a weboldalad, mintha egybe lenne “kombinálva” az összes és egy adott helyről töltené be.
  • Use a Content Delivery Network (CDN) – Yahoo alapvetően imádja a CDN-t és valóban egy remek technológia, de jól meg kell fontolni a használatát, bizonyos esetekben nem feltétlen szükséges.
  • Reduce DNS lookups – Valószínűleg ez az, amin különösebben nem fogsz tudni javítani. Minden olyan esetben értesítést fogsz kapni erről, ahol 4-nél több domainról érkeznek a lekérdezések az oldaladra. Ez lehet, ha több féle domain nevet használsz ( .hu, .com, .eu ) és ugyanarra a tartalomra mutat, de ugyanúgy lehet a CDN mellékhatása is. 

Konklúzió

Összességében tehát elmondhatjuk, hogy a GTMETRIX használata fontos, hiszen adhat egy irányt, mellyel fejleszthetjük a weboldalunkat. Illetőleg fel tudjuk mérni, miért is lassú az adott esetben. Különösen hasznos lehet, ha megrendelünk egy oldal optimalizáló szolgáltatást ( akár tőlünk, akár mástól ), így tudtuk készíteni egy “előtte” és “utána” kimutatást ezzel mérve a szolgáltatás hatékonyságát.

Köszönjük, hogy elolvastad:)