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

Mire nem tudunk hatással lenni az optimalizálás során?

Sajnos vannak olyan összetevők is, amire nem lehetünk hatással optimalizálás során. Ezekről bővebben IDE KATTINTVA olvashat.

 

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

 

További fontos beállítási lehetőségek Wordpress oldalak esetén:

 

Mire nem tudunk hatással lenni az optimalizálás során?

 

Leverage browser caching


Egészen pontosan azon összetevők (jellemzően CSS és JS fájok) esetében nincs ráhatása, melyek nem a tesztelt domain név alatt érhetőek el (mint például: google.com , connect.facebook.net , stb). Értelemszerűen az optimalizálás során csak a saját szerveren (saját tárhelyen) elérhető összetevőkre tud hatással lenni. Más szerverekről érkező tartalmak esetében nincs mód manipulálásra.

 

 

Inline small JavaScript


Olyan egyszerű, kisebb tartalmu különálló javascript fájlok, melyeket a felület inkább a kódba beírva ajánlana használni. A változtatással megszűnne az adott fájl lekérése (hisz a kód be lenne írva a megjelenő oldalfájlba, nem külön URL-ről lenne az hivatkozva). Ez egy olyan változtatás melyet fejlesztő tud megvalósítani, alapvetően kihatásdal lehet (a helyes) működésre.

 

Add Expires headers


Egészen pontosan azon összetevők esetében nincs ráhatása, melyek nem a tesztelt domain név alatt érhetőek el (mint például: google.com , connect.facebook.net , stb). Értelemszerűen az optimalizálás során csak a saját szerveren (saját tárhelyen) elérhető összetevőkre tud hatással lenni. Más szerverekről érkező tartalmak esetében nincs mód manipulálásra.

 

Make fewer HTTP requests


A HTML, CSS és Javascript fájlok egyszeri tömörítését követően még mindig panaszkodhat a felület arra, hogy túl sok ilyen tartalom kerül meghívásra az oldal betöltődésekor. A bővítmények által kínált tömörítésen túl már csak fejlesztői segítséggel lehet összevonni a fájlokat (sőt, bővítmény kihagyása esetén csak fejlesztővel is elvégezhető ez a művelet).

 

 

Use a Content Delivery Network (CDN)


A mutatók között külön pontozásra kerülnek a "sokáig nem változó tartalmak" kiszolgálásai. Az úgynevezett CDN-szolgáltatások (ilyen pl. a Cloudflare is) arra (is) valóak, hogy a sose/ritkán változó tartalmak egy külön ezekre fenntartott szerverhálózaton legyenek tárolva, s onnan cache-ből kiszolgálva.
Ugyan pont a Cloudflare-nek van magyarországi szerverparkja is (tehát hátrány nem származna ebből a beállításból), mégis csak igazán nagy portáloldalaknál, webshop-oknál ajánljuk ezt a beállítást.

 

Reduce the number of DOM elements


"...a DOM nem más, mint az oldal – általánosabb fogalmazva minden fastruktúra, pl. HTML és XML – szerkezetének programozási felülete." (forrás: webprogramozas.inf.elte.hu )
Ez az érték a weboldal felépítéséből adódik és "jön", erre külön ráhatásunk nincs, fejlesztőknek is rendszerint teljes újraprogramozással, vagy a használt kész rendszer váltásával van lehetősége ezt az értéket redukálni.

 

 

Reduce DNS lookups


Lényegiben a felület arra hívja fel a figyelmet, hogy az ellenőrzött weboldal hány darab különböző domain/aldomain névről hív még be tartalmat, s ez mekkora méretű lekéréseket jelent. A távoli lekérések darabszámára és méretére rendszerint csak funkcióvesztéssel (pl: egykattintásos Facebook-felhasználóval való bejelentkezés eltávolítása) tud hatással lenni a weboldal készítője.

  • gtmetrix, yslow, waterfall, chart, optimalizálás, gyorsítás, cms, sebesség, webpagetest, pagespeed, insight, 508
  • 5 felhasználó találta hasznosnak ezt
Hasznosnak találta ezt a választ?

Kapcsolódó cikkek

Adatbázis tárolómotor átállítása MyISAM_ról InnoDB-re

Több helyen olvasható, hogy ajánlott egyes táblákat MyISAM tárolómotorról InnoDB-re állítani 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ű...

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...

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

Google reCaptcha elhelyezése WordPress oldalon! Hogyan? Kattints ide és megmutatjuk!   Mi az...

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...