Jak zmenšit CSS a JavaScript soubory o 75%?

MyEgo.cz

home foto blogy mywindows.cz kontakt

Jak zmenšit CSS a JavaScript soubory o 75%?

Technologie 31.05.04

Řešení je velice prosté, pokud Váš server podporuje PHP, postačí přejmenovat Váš soubor místo stylesheet.CSS na stylesheet.PHP a na začátku tohoto souboru zapnout GZip kompresi. Třeba následovně:

<?php 
if (function_exists('ob_get_level') && (ob_get_level() > 0)) 
  ob_start("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
header("Expires: ".gmdate("D, d M Y H:i:s",
        time() + 60*60*24*2)." GMT");
?>

následuje CSS stylesheet:

body{...}

Funkce ob_get_level() zajistí, že koncovým zařízením, co GZip kompresi nepodporují, se pošle normální, čistý text. A těm co to podporují se v mém případě místo 15kB pošle 3.5kB, takže cca 25% původní velikosti!

Funkce header("Expires...") udává, že za 2 dny tento CSS soubor expiruje (60 sekund * 60 minut * 24 hodin * 2 dny). Toto je velice vhodné, pokud chcete CSS soubory občas měnit, nemusíte je potom přejmenovávat!

Podobný postup se dá samozřejmě použít i pro JavaScript soubory.. Testováno a plně funkční v Opeře, Mozille, a IE 5x. a vyšším. Je to podstatně lepší způsob, než vše komprimovat a totálně znečitelnit a uspořit jen 10-15%. Toto řešení uspoří 75%.

Komentáře

  1. 1 rony 31.05.04, 02:05:44
    FB

    s tym, ze na prilis male subory je kompresia slonom, co zabija ;-)

  2. 2 Radek Hulán 31.05.04, 02:05:46
    FB

    [1] příliš malé ano, ale dnešní CSS máš málokdy pod 5kB, u komplexního webu spíše nad 10kB :!:

    A tam je komprese navíc tak účinná, že se zmenší jejich velikost na 25% původní velikosti ;)

  3. 3 PePPer 31.05.04, 03:05:17
    FB

    Pokud ale provedete oba zpusoby soucasne usetrite jeste vic.

    Doporucuji nejdriv oklestit vas soubor o nepotrebne znaky a posleze jeste zkomprimovat.

    Zrejme rozdil nebude zas o tolik mensi ale metody jsou dve(ono jich asi bude jeste vic) a daji se kombinovat. Primo to k tomu vybizi.

    Myslim ze porovnavate dva zpusoby ktere byste mel pouzivat soucasne. Zadny z nich neni zastupitelny tim druhym.

  4. 4 dgx 31.05.04, 06:05:48
    FB

    toto už je překonaný způsob. Stránka se totiž zkomprimuje teprve v okamžiku, kdy je celá vygenerovaná.

    Pokud chcete komprimovat průběžně, nastavte v konfiguraci PHP tohle:
    zlib.output_compression=on

  5. 5 Radek Hulán 31.05.04, 06:05:57
    FB

    [4] a jak asi nastavím php.ini na webhostingu? ;) Nenastavím... zlib je samozřejmě fajn, ale musí jej hosting podporovat.

  6. 6 dgx 31.05.04, 07:05:16
    FB

    není to tak dramatické:

    1) zlib je vestavěná součást PHP od verze 4.3.0 (ve starších verzích je třeba podporu aktivovat v php.ini nebo pomocí funkce dl())

    2) parametry php.ini lze ručně nastavit v souboru .htaccess, nebo ještě jednodušší je naspat majlík správci

    A TEĎ TO PODSTATNÉ:
    pokud už hosting provádí kompresi zlib.output_compression, v žádném případě nepoužívejte ob_gzhandler. Proto je lepší situaci ošetřit:

    if (!ini_get('zlib.output_compression')) ob_start("ob_gzhandler");

  7. 7 Radek Hulán 31.05.04, 07:05:33
    FB

    [6] no samozřejmě, zlib a gzip koliduje, ale to se ihned pozná ;)

    Nicméně, v praxi je situace takové, že 90% webhostingů zlib zapnutou standardně NEMÁ. To je FAKT. A potom je toto řešení (zapnutí gzip) velice jednoduché, ne každý má přístup k .htaccess, či je schopen přesvědčit webhosting aby zlib zapnul. Tolik k rozdílu teorie a praxe..

    Dnes je ještě spousta instalací dokonce s PHP < 4.2.0 :|

    Nicméně, s testem na zlib souhlas, minimálně se člověk nebude jednoho ráno divit, až hosting zlib zapne..

    PS: kromě toho tento postup efektně řeší možnost nastavení expirace CSS a JS souborů..

  8. 8 dgx 31.05.04, 08:05:26
    FB

    [7] se vším souhlas.

    k expiraci poznámku: bude to fungovat správně jen za předpokladu, že na serveru i klientovi je správně nastavený čas (a to je ještě méně pravděpodobné než PHP > 4.2.0 :wink:

    Možná by tu pomohlo použít hlavičku:
    Cache-Control: max-age=36000, must-revalidate
    kde se jako hodnota max-age zadává relativní údaj. V praxi to ale nemám otestované

  9. 9 Pavel SPS 01.06.04, 11:06:18
    FB

    [7] no vidis to. A u toho hrozneho Ceskeho hostingu je PHP verze: 4.3.6 :)