A gyorsabb weblapért

Részben egyik Netvibes-os kollegám (elég régi) írását szeretném ajánlani, részben pedig egy kicsit elmélkedni arról, hogy vajon mivel is tehetjük gyorsabbá oldalunk betöltődését. Azt tudjuk, hogy az oldal betöltődése fontos szempont ahhoz, hogy a látogatóink ne lépjenek le rögtön, de fontos áttekinteni a szempontokat is, melyek mentén érdemes optimalizálni.

Két mindenekelőtt: egyrészt nem biztos, hogy minden oldalt optimalizálni kell. Ez nem azt jelenti, hogy nyugodtan tegyünk ki egy 1GB-os PNG képet háttérnek, mert az fasza, hanem azt, hogy általában jól felépített oldalon, normál nagyságú képekkel, szervezéssel nem kell tovább mennünk, és szétoptimalizálni az oldalt. Optimalizálni főként híroldalakat, webalkalmazásokat, stb. kell, amit sokan látogatnak, és ahol a látogatók nem a két szép szemünkért jönnek, és nem hajlandóak kivárni 10 másodpercet.

A másik mindenekelőtt: két része van az optimalizációnak. Az egyik a weblap első betöltődése, a másik pedig a weblap ezutáni betöltődése. A két optimalizáció között a határt a böngésző, illetve a közbeiktatott különböző proxy-k gyorsítótárazása húzza meg.

Vegyük az első oldalbetöltődést. A legfontosabb szempont, hogy minél kisebb adatmennyiséget kelljen a böngészőnek letöltenie, és minél kevesebb fájlt. Nem véletlenül divat a minél kevesebb grafikai elemet tartalmazó, puritán oldal – ugyanis nem csak jobban átlátható lehet valószínűleg egy így felépített design, de jóval gyorsabban is töltődik be. Sokáig a divatnak tudták be a táblázatos oldalszerkezet mellőzését is, azonban a számos érv közül az egyik, hogy a CSS-sel felépített oldalszerkezetet gyorsabban kezdi el megjeleníteni a böngésző. További fontos tipp, hogy a grafikai elemeket, avagy a kis ikonjainkat, grafikus gombok, menük több állapotát a lehetőségek szerint vonjuk össze, és pakoljuk minél kevesebb képbe. Nem csak azt érjük el így, hogy nem kell különböző trükkökkel előtölteni a hover állapotokat, de a kis ikonok egyszerre jelennek meg, a gombok hoverje nem fog villogni, amikor betöltődik a második képe. Fontos az is, hogy a képek összevonása nem csak a szerver felé indított kérések számát csökkenti, de jellemzően az összméretet is.

Az optimalizálás második feladata a különböző cache-ek minél jobb kihasználása. Ennek érdekében a JavaScript és CSS kódjainkat minden esetben különítsük el a HTML-től. Ha a szerver felépítésünk engedi, ezeket külön szerverre is tehetjük, így a böngészők “egyszerre két fájlt töltünk le max. egy szerverről” limitjét is ki tudjuk játszani. Arra figyeljünk, hogy a JavaScriptek domainjét az egyes böngészők különbözőképpen kezelik le, és előfordulhat, hogy az AJAX-os adatlekéréseket blokkolják a domain korlátok miatt.

A JavaScript és CSS fájlokat nem árt tömöríteni sem. A méretcsökkentés kapcsán három dolog jöhet szóba. JavaScriptnél “valódi” tömörítést tudunk elérni úgy, hogy egy JavaScript csomagolót, kicsomagolót használunk, mely az oldal betöltődésekor kicsomagolja, majd eval-lal értelmezi a kicsomagolt JavaScriptet. Egész jó méretcsökkenéseket lehet ezzel elérni, de ne csodálkozzunk, ha az oldalletöltésünk ideje ezzel nem csökken, hanem nő, ugyanis a kicsomagolás szignifikáns időbe is telhet, közben jól leterhelve a böngészőt. Másik tömörítési mód, hogy a felesleges részeket eltávolítjuk a kódokból, értem ezalatt a white space-eket, a megjegyzéseket. CSS esetén összevonásokkal, “white” helyett “#fff” használatával, pontosvesszők elhagyásával is lehet mahinálni. Ezeket sohase csináljuk kézzel, használjunk valamilyen automatizált megoldást. Végül, de nem utolsó sorban, a szerveren kapcsoljuk be a gzip tömörítést. Minden modern böngésző támogatja, de a szerver képes azt is észlelni, ha egy böngésző nem támogatná. Emlékeim szerint egyedül az Internet Explorer 6.0 előtti verzióival volt gond anno, de ezekre még véletlenül se optimalizáljunk ma (értsd: legrosszabba esetben is minimum ötszörös díjért hangos ellenkezések után). A képet kisebbé tételére is vannak jó programok, igyekezzünk értelmes méretekre csökkenteni a képeket úgy, hogy a látható minőségük még nem romlik.

Fontos lehet azt is látni, hogy vannak olyan trükkök, melyek bizony pénzbe kerülnek. Egy különálló statikus tartalmakra optimalizált szerver, egy a Föld különböző szervertermeibe telepített elosztott kiszolgálóhálózat nem az olcsó megoldások sajátja. A kezdeti lépéseket ettől függetlenül megtehetjük, az általam írtak ugyanis csak egy kis időbe kerülnek.

Jó barátunk a Firebug, mely segítségével sokmindent ki tudunk deríteni az oldalról, az optimalizálás kapcsán azt, hogy mi mennyi idő alatt töltődik le, de lehet vele JavaScript teljesítményt is mérni, optimalizálni. Azt ne feledjük, hogy a JavaScript sebesség elég eltérő lehet különböző böngészőkben, és JavaScriptet intenzíven használó oldal esetén IE6, IE7 alatt gyakran ellenőrizzük a sebességet, működést (különben sohasem találjuk meg az egyes hibákat).

Végezetül megint ajánlani szeretném Alex kollegám a bevezetőben említett írását, nálam részletesebben és mélyebben is kifejtett egyes témákat.