ugrás a tartalomhoz

CSS és JavaScript tömörítés az AJAX alkalmazások gyorsításához

Hojtsy Gábor · 2006. Jan. 29. (V), 12.31
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.
 
1

Nem megy :(

lwpass · 2006. Jan. 30. (H), 10.26
Nalam nem megy sem IE6, sem Mozilla1.5 alatt sem a cikkben emlitett zimbra.com demoja. Amugy maga a megoldas otletes.
2

gzip

bizi · 2006. Jan. 30. (H), 11.08
Ez a gzip tömörítés hogy megy? Apache modul vagy kézzel kell megtenni? Illetve ami fontosabb, minden böngésző tudja kezelni?
bizi
5

<Nincs cím>

saxus · 2006. Jan. 30. (H), 19.58
Lehet Apache-val is tömöríteni, és lehet PHP-vel is tömöríteni a kimenetet:

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).
9

gzip

bizi · 2006. Jan. 31. (K), 17.06
Köszi neked is, meg többieknek is!
bizi
3

Accept, ErrorDocument

Hodicska Gergely · 2006. Jan. 30. (H), 13.17
Mondjuk oké, hogy azok a browserek, amiknek egy ilyen cuccot szánnak, azok tudják a gzippelt tartalmat kezelni, de ezel együtt számomra az lenne egy tiszta megoldás, hogy ezek a fájlok ne legyenek webről közvetlenül elérhetőek, és egy ErrorDocumentre kötött PHP szolgálná ki őket, ami meg tudná nézni, hogy az Accpet fejlécben a böngésző jelzi-e, hogy képes kezelni a tömörített tartalmat. Persze a feltételes HTTP kéréseket megfelelően kezelné.

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ő
4

gzip

Bártházi András · 2006. Jan. 30. (H), 16.42
Azt hiszem, van olyan Apache config lehetőség, hogy csak akkor küldje gzip-pel a fájlokat, ha a kliens is úgy gondolja. Az teljesen mindegy ilyenkor, hogy van-e rewrite.

-boogie-
6

el a kezekkel a PHP-től!

Hojtsy Gábor · 2006. Jan. 30. (H), 20.29
Nem kell ide kérem PHP, a lényeg, hogy a webszerver mindenre képes. A kulcsszó: content negotiation. Az Apache nemcsak nyelvet vagy dokumentum típust tud választani igény szerint, hanem tömörített vagy nem tömörített fájlt is ki tud szolgálni a kliens képességeinek megfelelően. Innen kezdve annyit kell tenned, hogy egy mappába teszed a gzipes és a nem gzipes fájlt, és a böngésző mindig azt fogja visszakapni, amit kezelni tud. Az egész módszernek ugye az is fontos eleme, hogy ne kelljen a PHP-nek ezzel (se) foglalkoznia, akár egy másik kisebb igényű webszerver szoftver is képes lehet kiszolgálni, ha ezt a választást támogatja.
7

content negotiation

Anonymous · 2006. Jan. 30. (H), 22.20
Sziasztok.
Ö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?
8

egy-két mondatban összefoglalva

Hojtsy Gábor · 2006. Jan. 30. (H), 23.08
Két fájl kell:

thescript.js
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

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.