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:
- A "wc-ajax=" és az xmlrpc kezelése a processzorhasználat csökkentéséért
- admin-ajax.php és wp-cron processzor-használatának csökkentése
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.