Akkor most tömörítsünk, vagy ne?

Érdekes tapasztalatok a CSS/JS minify-trenddel kapcsolatban...

Akkor most tömörítsünk, vagy ne?

  • 2013-04-05
  • 3123 megtekintés
  • Szerző: Basa Bence

A minap egy projekt fejlesztése közben ránéztem az oldal által használt CSS stíluslapra (röviden ez az a fájl, ami pl a betűk színét, az egyes dobozok közötti térközt állítja be), és elszörnyedtem, hogy több, mint 700 sora volt.

Igaz, szellősen írtam (tulajdonságok új sorba, definíciók után egy üres sor), de ettől még mindig brutális mennyiségű adatról van szó - gondoltam, lehetne faragni az oldal betöltési sebességén (amivel egyébként semmi gond nem volt, csak a kíváncsiság hajtott.

Weboldal készítés: tömörítsük-e a CSS kódot?

Nekivágtam tehát egy PHP alapú, realtime tömörítő (szakszóval minify) algoritmusnak, ami még a css-ben található kép importálásokra is figyel. Nem kell túlbonyolítani a dolgot, view/css/style.css helyett sys/min/?style.css-t kellett írni, ami fogta a fájlt, letömörítette, és kiadta tömörítve: a felesleges sortöréseket, új sorokat törölte.

Ami viszont meglepett, az a sebességváltozás volt.

A méret valóban csökkent, a betöltés sebesságe (Chrome Developer Tool-s ban nézve) viszont jelentősen megnőtt. Gondoltam arra, hogy a tömörítő algoritmus a ludas, túl sok energiát emészt az on the fly megközelítés, így a kimenetet lementettem egy statikus fájlba, hátha már lesz az eredmény.

Egy pár százalékot lehetett csak javítani, de még így is klasszisokkal lassabb volt, mint a tömörítetlen változat.

Tudom, (messze) nem reprezentatív a mérés, hiszen más oldalakat, más szervereket még nem próbáltam, de egy tesztkörnyezetet létrehoztam ezen az oldalon, így bárki próbálgathatja.

A méréseket az alábbi táblázat foglalja össze (a mérésekhez a Minify könyvtárat használtam, valamivel eredményesebb a saját megoldásomnál - de még mindig lassú):

Fájnév Típus Méret/Tartalom Betöltés/Késleltetés
styles.css Tömörítetlen 137B/8,2KB 131/124 ms
min/f=styles.css Futásidőben tömörített (PHP) 255B/6,0KB 215/208 ms
styles.min.css Statikus, tömörített 137B/6,0KB 172/159 ms

A táblázatba a 10 próbálkozásból elért legalacsonyabb értéket írtam be.
Fontos megjegyezni, hogy a betöltési idő elég nagy szórást mutatott (~200ms, de volt, hogy 1 másodpercet is meghaladta - ezt bele sem érdemes venni a mintába...), és legnagyobb meglepetésemre még a gyorsítótár ürítése után is hasonló eredmények születtek.

Nem készítettem több táblázatot, de JS-re is hasonlóak a tapasztalataim: a jQuery-t néztem meg tömörítve - és anélkül. Lehet persze, hogy a mérési módszerem nem a legmegfelelőbb (bár kézenfekvőnek tűnik), különben miért lenne tele az internet grafikonokkal, ahol a sebességnövekedésről írnak???

Aki rámutat, hol tévedtem, azt meghívom egy sörre.