Hogyan gyorsíthatom, optimalizálhatom weboldalamat? - gtmetrix

Hogyan gyorsíthatom, optimalizálhatom weboldalamat? (GtMetrix)

Ha gyakran találkozik az 508-as hibával vagy szeretné weboldalát gyorsabban betölteni látogatói számára, akkor mindenképp érdemes optimalizálást végezni weboldalán.

Optimalizálásra az alábbi oldalak együttes használatát ajánljuk:

  • gtmetrix.com (gtmetrix)
  • pagespeedinsight.com (google)
  • tools.pingdom.com (pingdom)
  • webpagetest.org (webpagetest)
A listából kiemelten rendszerint a gtmetrix.com oldalt szoktuk ajánlani ügyfeleink részére, mivel a rendszer részletesen bemutatja, hogy milyen értékeket szükséges javítani, s pontosan mik okozzák az egyes értékek alacsony pontszámát, illetve a lassulást.


Ezenfelül úgynevezett "waterfall chart" is elérhető, ahol követhető az oldal betöltődésekor kiszolgált lekérések betöltődési ideje, így tetten érhető a lassulás oka, esetlegesen egy probléma forrása.


GtMetrix.com értékek ismertetése
Az alábbi listánkban szeretnénk a gtmetrix weboldalán ismertetett értékek egy részét részletesebben bemutatni, hogy az optimalizálás sokkal gördülékenyebb legyen.

PAGESPEED értékek

Optimize images 
Képek optimalizálása szükséges, minőségromlás nélkül (ebben segíthet pl a tinypng vagy tinyjpg oldal is), ugyanis méretük indokolatlanul nagy a megjelenítési területhez képest.

Minify CSS
A CSS fájlok (stíluslapok) tömörítésére lenne szükség. Rendszerint ilyenkor a felesleges megjegyzések, enterek és sortörések kerülnek ki a fájlból.

Minify Javascript
A javascript fájlok (funkciók) tömörítésére lenne szükség. Rendszerint ilyenkor a felesleges megjegyzések, enterek és sortörések kerülnek ki a fájlból.

Minify HTML
A HTML fájlok (weboldal megjelenítésséhez szükséges fájlok) tömörítésére lenne szükség. Rendszerint ilyenkor a felesleges megjegyzések, enterek és sortörések kerülnek ki a fájlból.

Remove query strings from static resources
A böngészők nem tudnak lejáratot adni olyan fájloknak, melynek nevében a "?" karakter megtalálható, illetve azok nem is cache-elhetőek. Ezen fájlok darabszámát szükséges a lehető legkevesebbre csökkenteni.

Enable gzip compression
GZIP tömörítés engedélyezése. Az engedélyezésről rendszerünkben itt tudhat meg többet: gzip engedélyezés.

Enable Keep-Alive 
Kepp-Alive engedélyezését/tiltását (tehát valamely parancsát) hiányolja a rendszer, .htaccess-ben megadható.

Leverage browser caching 
Tulajdonképpen az ExpireHeader .htaccess-ben való alkalmazásáról szól ez a bejegyzés, így az expireHeader-ek beállításával ez a hiba is megszűnhet.

Avoid landing page redirects 
Itt az a probléma, hogy a végső domain, amelyen a tartalom található például a https://www.valami.hu, azonban több domainről is vannak elérhető tartalmak az oldalon (http://valami.hu, https://valami.hu), melyek kiszolgálása is körülményesebb a több lekérés miatt. Egységesíteni szükséges az oldalon található és az adatbázisban található URL-eket.

Serve resources from a consistent URL 
Azonos képek/fájlok csak egy URL-ről kerüljenek kiszolgálásra, a duplikációk legyenek javítva.

YSLOW értékek

Use a Content Delivery Network (CDN) 
Bármely CDN-szolgáltató (Cloudflare, Amazon AWS stb.) alkalmazását igényelné a rendszer a statikus tartalmak kiszolgálásához.

Make fewer HTTP requests
A lehető legkevesebb HTTP lekérésre szükséges csökkenteni az éppen itt szereplő darabszámot. Ezek rendszerint tömörítéssel (minify-olással) javíthatóak, számuk így könnyedén csökkenthető.

Add Expires headers 
.htaccess-ben az ExpireHeaders értékek definiálása szükséges.

Minify JavaScript and CSS 
CSS és JS fájlok tömörítése. Erre bővítmények is léteznek a használt rendszertől függően, illetve egyes weboldalak is elvégzik ezt a css/js fájl feltöltését követően.

Compress components with gzip
GZIP tömörítés engedélyezése. Az engedélyezésről rendszerünkben itt tudhat meg többet: gzip engedélyezés.

Avoid HTTP 404 (Not Found) error
Lehetőség szerint a weboldal 404-es hibaoldalait javítani szükséges úgy, hogy ne legyen elérhetetlen tartalom a weboldalban.

Use cookie-free domains 
Legkönnyebben CDN-szolgáltatóval kezelhető ez az érték. Statikus tartalmak kiszolgálását külön elérésre írná elő a felület (ez nem minden esetben szükséges, sőt, alapvetően szükségtelen átlagos üzemeltetők számára).

Configure entity tags (ETags)
A HTTP protokoll része az ETag, melyet .htaccess-ben lehet konfigurálni.

Miért ajánlott még a PagespeedInsight?
A rendszert a Google biztosítja, így saját szemszögéből vizsgálja az ellenőrzött oldalakat.


Pro:
- részletesen ismerteti az ajánlások általános megoldását
- Google saját szemszögéből ellenőriz
- asztali és oktelefonos megjelenítést is vizsgál

Kontra:
- a "szerver válaszidő" érték rendszerint fals, mert a google saját oldalainál sem teljesül a 200 ms-es betöltődés
- nem ad tényleges ajánlatokat a problémák megoldására, nem jelöli meg minden esetben a problémás komponenseket

Miért ajánlott még a Pingdom?
Látványos, több országból is lekérhető ellenőrzés, mely könnyen emészthető képekkel szemlélteti az oldal felépítését


Pro:
- könnyen értelmezhető képekkel magyarázza az oldal összetételét

Kontra:
- sokszor túlterhelt, így néha fals adatokat szolgáltat
- tényleges megoldásokat kevésbé kínál, inkább összegzésre jó

Miért ajánlott még a Webpagetest?
A rendszer a weboldalunk összetevőinek betöltődését segít részletesen vizsgálni.



Pro:
- több országból, több böngészőre tesztelve is indítható ellenőrzés
- profi, részletes információ minden betöltődő komponensre

Kontra:
- az úgynevezett "waterfall-chart"-on kívűl más segítséget nem biztosít
  • 1 felhasználó találta hasznosnak ezt
Hasznosnak találta ezt a választ?

Kapcsolódó cikkek

Imagemagick használható-e a szerveren?

Az imagemagick lehetőség nem minden szerverünkön érthető el.A /usr/bin/convert az elérési úton...

Alkalmazás telepítő használata (Softaculous Apps Installer)

Gyors Wordpress telepítés pár kattintással? Lehetséges! Tárhelyeink mindegyikén elérhető a...

Hogyan előzzem meg weboldalam hackelését, hogyan javítsam ki feltört oldalamat?

A weboldalak típusai rendszerint két részre oszthatóak felépítés szempontjából: népszerű...

Wordpress debug.log bekapcsolása

Sajnos könnyen előfordulhat, hogy egy hibás komponens telepítésekor weboldalának működésében...

Captcha védelem, azaz biztonsági kód a honlapra

Mi az hogy Captcha? A Captcha egy olyan teszt, ami képes megkülönböztetni a honlapokat...