CSS és JavaScript tömörítés az AJAX alkalmazások gyorsításához
Kevin Henrikson a Zimbra Collaboration Suite webes irodai alkalmazás blogjában osztja meg olvasóival a Zimbra több mint 2 megabájt méretű JavaScript kódjának elviselhető letöltési méretre csökkentésének módját. A HTTP kérések számának csökkentése érdekében a CSS és JavaScript fájlokat egy állományba fűzik össze, ebből törlik a felesleges szóközöket, újsorokat, megjegyzéseket. Végül tekintettel a fájlok statikus tartalmára előzetesen gzip tömörítik, és így szolgálják ki a látogatók számára.
Kevin megkísérelte ugyanezeket a műveleteket végrehajtani a digg.com honlapjának egy mentésén is, egy erről szóló elemzés kapcsán. Úgy találta, hogy a HTTP kérések számát felére (26-ról 13-ra), a letöltött bájt méretet pedig több mint felére tudta csökkenteni a honlapon.
Hozzá szeretnék ehhez tenni annyit, hogy a modern webalkalmazásokban azért fontos figyelnünk a CSS és JavaScript fájlokra, mert sokszor ezek jelentősen nagyobbak, mint a tényleges HTML tartalom, amit ki kell szolgálni. Ha nem figyelünk oda, hogy legalább gyorsítótárazhatók legyenek ezek a kiegészítő fájlok, akkor a visszatérő látogatóknak is újra és újra le kell tölteniük ezeket.
Ráadásul sokszor a gyorsítótárazhatóság sem elegendő. Ha megfigyeljük, hogy mekkora arányban érkeznek látogatóink a különböző keresőmotoroktól, és ezt összevetjük azzal, hogy mennyi rendszeresen visszatérő látogatónk van, akkor valószínű meg fogunk lepődni azon, hogy a gyorsítótárazhatósági törekvéseink ellenére is látogatóink jelentős hányadának kell majd letöltenie a kiegészítő fájlokat, tekintettel arra, hogy nem a webhelyen belülről érkeznek egy weblapunkra. Ilyenkor is nagyon jól jöhetnek Kevin tanácsai.
■ Kevin megkísérelte ugyanezeket a műveleteket végrehajtani a digg.com honlapjának egy mentésén is, egy erről szóló elemzés kapcsán. Úgy találta, hogy a HTTP kérések számát felére (26-ról 13-ra), a letöltött bájt méretet pedig több mint felére tudta csökkenteni a honlapon.
Hozzá szeretnék ehhez tenni annyit, hogy a modern webalkalmazásokban azért fontos figyelnünk a CSS és JavaScript fájlokra, mert sokszor ezek jelentősen nagyobbak, mint a tényleges HTML tartalom, amit ki kell szolgálni. Ha nem figyelünk oda, hogy legalább gyorsítótárazhatók legyenek ezek a kiegészítő fájlok, akkor a visszatérő látogatóknak is újra és újra le kell tölteniük ezeket.
Ráadásul sokszor a gyorsítótárazhatóság sem elegendő. Ha megfigyeljük, hogy mekkora arányban érkeznek látogatóink a különböző keresőmotoroktól, és ezt összevetjük azzal, hogy mennyi rendszeresen visszatérő látogatónk van, akkor valószínű meg fogunk lepődni azon, hogy a gyorsítótárazhatósági törekvéseink ellenére is látogatóink jelentős hányadának kell majd letöltenie a kiegészítő fájlokat, tekintettel arra, hogy nem a webhelyen belülről érkeznek egy weblapunkra. Ilyenkor is nagyon jól jöhetnek Kevin tanácsai.
Nem megy :(
gzip
bizi
<Nincs cím>
ob_start('ob_gzhandler');
Hogy pontosan hogy van, azt sajna nem tudom fejlből, a PHP Manualban tudtommal van leírás róla.
Azt, hogy előre tömöríteni lehet-e és úgy elhelyezni, abban nem vagyok biztos, de szerintem ha a megfelelő headereket beállítjuk, akkor elvileg menni fog.
A modern böngészők támogatják, nagyon sok oldalon lehet is olvasni alul, hogy GZIP On (pl IPB-ken látom gyakran - helyesen).
gzip
bizi
Accept, ErrorDocument
Lehet, hogy mod_rewrite esetén is ki lehetne ezt sakkozni, ha jól rémlik, el lehet érni a fejlécek tartalmát is a szabályok esetében.
Felhő
gzip
-boogie-
el a kezekkel a PHP-től!
content negotiation
Össze tudni valaki foglalni egy-két mondatban, hogy lehetne ezt használni pl. egy javascript fájl tömörítése során?
egy-két mondatban összefoglalva
thescript.js.gz
Ebből az Apache majd kiválasztja amit kell. Kétféleképpen teheti ezt. A lényeg mindkettőnél, hogy olyan fájlra linkelsz, ami nincs, és az Apache mégis választ egy megfelelőt, mert alternatívák vannak, amiknek azonos az előtagja, mint a link. Tehát ebben az esetben a
thescript
lesz a link célpontja kiterjesztés nélkül.Egyrészt ha a MultiViews kapcsoló be van kapcsolva (ez mappánként állítható), akkor automatikus a nem létező fájlhoz az igényeknek megfelelő választása. Azon múlik, hogy a
mod_mime
felismerje a helyes MIME típusokat a.js
és.js.gz
kiterjesztéshez, és válasszon okosan.Másrészt ha nem akarod az automata felismerést (mondjuk mert lassú, on-the-fly kell elvégezni, de éppen az Apache túráztatását akarod elkerülni), akkor fogod, és létrehozod ezt a type mapet ami létrejönne a MultiViews hatására automatikusan (
thescript.var
néven elmented):URI: thescript.js
Content-type: text/javascript
URI: thescript.js.gz
Content-type: text/javascript
Content-Encoding: x-gzip
Persze ez sem műkökdik magától, mert ehhez meg kell, hogy az
AddHandler type-map .var
be legyen állítva.Nem teszteltem, csak gyorsan válaszoltam, kíváncsian várom az eredményeket. Nem túl bonyolult kipróbálni.