Egoblog.cz - Petr Kobelka

Minifikace CSS - cesta k lepšímu webu

Optimalizace webu dnes více než kdy dříve hrají velmi významnou roli. V dnešním článku se dozvíme proč a jak provádět minifikaci CSS.


Webdesign | Komentáře (0) | Shlédnuto 2663 × | Vloženo: 12. srpna 2013

Optimalizace webu dnes více než kdy dříve hrají velmi významnou roli. Jak se vyvíjejí vyhledávače, je stále větší potřeba stránky optimalizovat. Vyhledávače na to dost dávají pozor a hádejte, tkerá stránka se umístí lépe? Ta co se načítá 3 sec, nebo ta, která se načítá 30 sec?

O co jde v minifikaci CSS

Cílem tohoto kroku je snížit počet dotazů serveru na CSS soubory. Znáte to, dáte si do stránek několik JQuery pluginů a ktomui Vaše styly pro web a najednou máte 15 souborů = 15 dotazů na server. Tohle jde velice jednoduše optimalizovat. Jen podotýkám, že jde o popis procesu, nikoliv implementace na konkrétní CMS.

2 kroky k úspěchu

Cesta se skládá ze dvou kroků:

  1. sloučení všech souborů do jednoho
  2. minifikace výsledného souboru

Sloučení všech CSS souborů do jednoho

V mém vlastním CMS mám definován výčet CSS souborů, které se spojují pro SCREEN - výstup na web a výčet souborů, které se spoují pro PRINT - styly pro tisk. Pak jednoduše provedu jejich sloučení do 1 (2) souborů, které jsem pojmenoval screen.css a print css.

A hle, z 15 souborů mám 2, to je super ale pořád jsou velké, protoře obsahují mnoho prázdných aredundantních znaků. Co teď s tím? Cesty jsou dvě:

  1. použít minifikátor, např. http://code.google.com/p/minify/
  2. použít něco mnohem jednoduššího:
function minifyCSS($fileName)
{
  $buffer = array();
  $obsah  = file_get_contents($fileName);

  $nahrada = array
  (
    ': '        => ':',
    '; '        => ';',
    "{\n"       => '{',
    "\n{"       => '{',
    ";\n"       => ';',
    " \n"       => "\n",
    "{\r\n"     => '{',
    "{\n\r"     => '{',
    "\r\n{"     => '{',
    "\n\r{"     => '{',
    ";\r\n"     => ';',
    " \r\n"     => "\r\n",
    "\n\n"      => "\n",
    "\r\n\r\n"  => "\r\n",
    ' {'        => '{',
    '{ '        => '{',
    ';}'        => '}',
    ', '        => ',',
    "\t"        => ''
  );

  // linearizace souboru
  $obsah = preg_replace("/\n/", 'NL', $obsah);
  $obsah = preg_replace("/\r/", 'RL', $obsah);

  //odstranime redundantni mezery
  $obsah = preg_replace('/([ ]+)/i', ' ', $obsah);

  //komentar - tato sekvence odstrani viceradkovy komentar
  $obsah = preg_replace('#/\*.*?\*/#s', '', $obsah);

  $obsah = preg_replace('/\v/', '', $obsah);

  $obsah = preg_replace("/(RLNL)+/m", "RLNL", $obsah); // konec komentare
  $obsah = preg_replace("/(NL)+/m", "NL", $obsah); // konec komentare
  $obsah = preg_replace("/NL([ ]+)/m", "NL", $obsah); // konec komentare

  $obsah = strtr($obsah, $nahrada);

  //rekombinace CSS souboru
  $obsah = preg_replace('/RL/', "\r", $obsah);
  $obsah = preg_replace('/NL/', "\n", $obsah);

  $obsah = preg_replace("/(\n)+/ism", "\n", $obsah); // konec komentare
  $obsah = preg_replace("/(\r\n)+/ism", "\r\n", $obsah); // konec komentare

  // provedeme potrebne upravy v CSS souboru
  $obsah = strtr($obsah, $nahrada);
  $obsah = strtr($obsah, $nahrada);

  return $obsah;
}

Funkce bere jako argument cestu se souborem a vráti řetězec, který prošel procesem minifikace.

Já jsem zvolil druhou cestu. Na internetu jsem prostudoval dostupné zdroje a na konec sestavil jednoduchou funkci, která minifikaci provede. Výsledkem je sopubor, který může mít např. o 25 % menší velikost a to už je poznat.

Nějaký přídavek

Naví jsem ve svém CMS nejradší, když se maximum věcí děje automaticky, takže mám nastavený proces, který kontroluje existenci souboru screen.css. V momentě, když chybí, vytvoří jej znovu. To je super, protože mohu cokoliv editovat, smazat aktuální styly a stránka se mi zobrazí s novými prvky.

Podobné články jako "Minifikace CSS - cesta k lepšímu webu"

Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

Oups, žádné komentáře? Buďtě první !!!

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.