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 ).
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:
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 )
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
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 )
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:)
Leave A Comment