Pár hónappal ezelőtt kezdtem beleásni magam a weboldalak technikai jellegű optimalizálásába. Amelynek legfőbb indikátora az volt, hogy kevés dolgot utálok jobban a lassan töltődő oldalnál. A folyamat során egyik legfontosabb mérföldkő a YSlowval történő találkozás volt. Ez a firebugba beépülő extension nagyban megkönnyítette a továbbhaladást a felsorolt direktívák segítségével, azonban konkrét technikai megoldások hiányában kénytelen-kelletlen egy szuperhosszú, de annál tanulságosabb folyamat vette kezdetét…
YSlow ajánlások a css, valamint js fájlokra vetítve
- Fájlok megfelelő bekérése a forráskódban
- HTTP requestek minimalizálása
- Expires header vs. cache control
- Gzip tömörítés
- Minify JS
Css js fájlok kifele!
Aki nem tegnap kezdett bele, bizonyára sejti, hogy ez a szakasz a külső fájlként futtatott js-ek valamint stíluslapok éltetésének lett dedikálva. A dolognak legnagyobb előnye az, hogy az inline scriptekkel és stílusokkal ellentétben a külső fájlokat a böngésző cacheli és így minden request azok méretével rövidül, mind a fájlok mérete, mint a response time figyelembevételével.
Nem olyan régen tanultam azt a szabályt, hogy a javascriptek bekérésének ideális helye pont a </body> felletti sor, ezzel gyorsítva a dokumentum minél előbbi megjelenítését.
<megjegyzés>Van olyan js, amely csak a <head> részbe pakolva működik</megjegyzés>
Minek annyi request?
Leginkább a Joomla scriptet használó oldalakon szoktam elszörnyülködni, hogy az oldal webmestere feltol 5-6 plugint, komponenst a felhasználói élmény érdekében, amelyek egyenként megkérnek minimum egy stílus lapot és gyakran jönnek a js csokrok is, amely komoly másodperces töltést igényelnek. Már szinte nem is weblap manapság, ahol legalább egy lightbox nem fut a képek dögösítésére. Magam részéről a lightbox.css tartalmát rendre belepakolom a normál css legvégére ezzel minimalizálva a requesteket. Hasonlóképpen gyakran összevonhatóak a javascriptek funkciói, de a logikai sorrendet minden esetben érdemes megtartani ha működőképes dolgokra vágyunk.
Expires header vs cache control
A YSlow ajánlása szerint a nem dinamikusan változó fájlok távoli jövőben lejáró headerjével a visszatérő látogatóknak kedvezhetünk.
A js és css valamint egy két további mime type lejáratának meghosszabbítására használjuk az alábbi .htaccess kódot:
<ifModule mod_headers.so>
<FilesMatch "\.(ico|flv|jpg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
</ifModule>
Amennyiben a mod_header nem betöltött Apache modul a szerveren, akkor természetesen nem fog működni a dolog, de kicsit lejjebb majd ezt a dolgot is orvosoljuk.
Gzipre fel!
Az 1.3-as Apache szerveren a mod_gzip, a 2.X verziók esetében már a mod_deflate modulok teszik lehetővé az akár 60-70%-os tömörítési rátát, amelyet a mai modern böngészők minden gond nélkül kezelnek.
<IfModule mod_gzip.c>
mod_gzip_on Yes
AddEncoding gzip .gz
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$
</IfModule>
Mod_deflate .htaccess kódja
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
Természetesen megeshet az is, hogy habár Apache szerveren van a lapunk, mégse elérhető egyik modul sem. Ilyenkor sem szabad szomorkodni, hiszen van még egy esély, amely kicsivel több módosítást igényel, de szerintem 3 perc alatt elkészül vele mindenki.
Első lépésként a js illetve a css fájlokat nevezd át php fájlkiterjesztésűvé majd css esetén a fájl legelejére helyezd ezt a kódot
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{ob_start("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header('Expires: Thu, 15 Apr 2010 20:00:00');}
else ob_start();
?>
javascript esetén ezt
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start();
header("content-type: application/x-javascript");
header('Expires: Thu, 15 Apr 2010 20:00:00');
?>
Egyetlen dolog maradt ezután hátra, mégpedig a link illetve a script tagban a kérés módosítása az új fájlkiterjesztésnek megfelelően.
Minify
Nem másról van szó, mint a szerveren lévő fájlok méretének minimalizálásáról. Számos js illetve css online optimalizáló eszköz fellelhető az Interneten, de személy szerint én a YUI Compressor mellett teszem le a voksom, amely alkalmas mindkét fájltípus tömörítésére. Az eszköz használatát következő posztomban fogom bemutatni.
Magam is használom régóta ezt a FF plugint, de tudtál újat mondani. Nagyon jó post, gratulálok és köszönöm.
Én köszönöm a hozzászólásod!
Jó kis cikk, mint írod, néhány egyszerű lépéssel is lehet a weblapok letöltési sebességén gyorsítani – és ezáltal javítani a használhatóságot.
A Yui Compressor-al még nem barátkoztam meg, várom az írásod.
A cikk hatására én is feldobtam a YSlow plugint és elkezdtem rövidíteni az oldalaimat.
Kapásból találtam egy csomó js-t, ami feleslegesen töltődött be.
Tényleg van értelme, köszönöm!
Vigyázz Kefe! Nagyon rá lehet kattanni 🙂
Köszönöm a cikket, ami számomra nagyon sok információt tartalmazott, mert kb 1 hete azt keresem, hogy a GZIP lehetőséget (cache mellett) hogyan tudom aktiválni feleségem Joomla alapú oldalán. Direkt nem bekapcsolást írtam, mert az már megtörtént a Joomla admin felületen és template beállításokban, de ennek ellenére a gziptest.com mégsem észlelte az oldaltömörítést.
Bocsánat, de ha majd lesz időd, akkor kifejtenéd, hogy mit is jelent az expires header vs cache control, mert sajnos ezt nem tudom értelmezni, mivel hobby szinten csinálom a dolgot.
Válaszod előre is köszönöm!
Cikked végén írtál a felesleges tömörítésekről (css/js). Ezt nem tudom, hogy pontosan mit is jelent, ezért várom ezzel kapcsolatos bejegyzésed. Addig is keresgélek ezzel kapcsolatban a neten.
Szép napot kívánok!
Varga Kornél
Hihetetlen, de igaz! Még nekem is sikerült, a gzip js/css tömörítéswe!
Köszönöm!
De azért egy kérdésem lenne! Az oldalt, hogy tudom tömöríteni gzip-be? Tehát, hogy könnyebben töltse be, oldalam?
Szia Pisti!
Milyen fájlformátumú a lapod?
Szia Zoli!
Nekem, az oldalaim, php alapú, és smarty motorral van működtetve!
Vannak tpl fáljaim, amik gyakorlatilag, a betöltő sablonok, illetve php-fájlok.
Csak abban em vagyok bizonyos, hogy megri-e elvégezni, vajon gyorsul-e majd vele érdemben?
De azért nagyon köszönöm, a válaszod, előre is!