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.
Ha tetszett, amit itt olvastál egy link elhelyezésével segíthetsz a népszerűsítésében.
Egyszerűen másold ki az alábbi kódot, majd illeszd be weblapod forráskódjába.
Így fog kinézni: Css és javascript optimalizálás YSlow módra
Ezeket is olvashatod:
This thing has 5 Comments
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