posztok

kommentek
google keresőoptimalizálás
Zoli kísérleti erőlködéseinek laboratóriuma a keresőoptimalizálás és webfejlesztés fáradalmait boncolgatva

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

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.

Mod_gzip .htaccess kódja

<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

This thing has 9 Comments

  1. Posted 2008 December 3 at 8:26 pm | Permalink

    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.

  2. Bagi Zoltán
    Posted 2008 December 3 at 8:50 pm | Permalink

    Én köszönöm a hozzászólásod!

  3. Posted 2008 December 28 at 5:39 pm | Permalink

    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.

  4. Posted 2009 February 23 at 11:02 am | Permalink

    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!

  5. Bagi Zoltán
    Posted 2009 February 23 at 11:10 am | Permalink

    Vigyázz Kefe! Nagyon rá lehet kattanni 🙂

  6. Posted 2009 August 28 at 2:09 pm | Permalink

    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

  7. Posted 2010 June 4 at 4:00 pm | Permalink

    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?

  8. Bagi Zoltán
    Posted 2010 June 9 at 6:03 am | Permalink

    Szia Pisti!

    Milyen fájlformátumú a lapod?

  9. Posted 2010 June 20 at 3:42 pm | Permalink

    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!