CSS minify – combine: zmniejszanie i łączenie plików css w jeden

W tym artykule skupimy się na szybkiej i łatwej implementacji funkcjonalności zmniejszania rozmiaru oraz łączenia wielu plików CSS w jeden.

Jeśli ktoś używa wtyczki do FF: YSlow może łatwo sprawdzić ile zewnętrznych plików css jest dołączanych do strony. Im więcej tym gorzej.
Analizując dokładniej wskazania YSlow możemy zauważyć na co należy zwrócić uwagę odnośnie CSS. Są to m.in:

  • Make fewer HTTP requests – mniej żądań HTTP
  • Avoid CSS expressions – unikanie ostylowania wewnątrz kodu
  • Make JavaScript and CSS external – stworzenie zewnętrznych plików JavaScript oraz CSS
  • Minify JavaScript and CSS – zmniejszenie rozmiaru JavaScript oraz CSS
  • Put CSS at top – dołączenie zewnętrznych arkuszy stylów w nagłówku dokumentu
  • Compress components with gzip – kompresja elementów strony gzip’em
  • Add Expires headers – dodanie nagłówków informujących przeglądarkę o czasie ważności elementów

Co możemy zrobić sami na szybko?

Przede wszystkim ograniczyć ilość żądań. Przeglądarki mają to do siebie, że ograniczają ilość jednoczesnych żądań do jednego serwera. Zatem jeśli przeglądarka ma domyślnie ustawione 4 żądania na serwer, a mamy zewnętrznych elementów na stronie 20, to po rozpoczęciu pobierania pierwszych czterech przeglądarka czeka, aż zostaną pobrane, zanim sięgnie po następne. Jeśli połączymy pliki CSS, JavaScript w jeden zmniejszymy tym ilość niezbędnych do wywołania żądań – dzięki temu przeglądarka szybciej pobierze resztę strony.

Zatem do dzieła!
Tworzymy plik css_cache.php o takiej postaci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
< ?php 
/**
 * Tworzenie pliku cache z pobranych plików css
 * @param	string	$cache_file_name	Nazwa pliku cache
 */
function generateCache($cache_file_name){
    $dir = '.';
    if (is_dir($dir)){
        if ($handle = opendir($dir)) {
            $css_content = '/* Utworzono :'.date('Y-m-d H:i:s').' */';
            while (false !== ($file = readdir($handle))) { 
                if (strtolower(substr(strrchr($file,"."),1)) == 'css'){ 
                    $css_content .= "\n\n".'/* CSS z pliku: '.$file.' */'."\n".preg_replace('/\s+/', ' ', file_get_contents($file));
                }
            }
            closedir($handle);
            file_put_contents($cache_file_name,$css_content);
        }
    }
}
/**
 * Funkcja pobierająca plik cache
 * @param   string  $cache_file_name    Nazwa pliku
 * @param   int $cache_time Czas ważności w sekundach
 * @return unknown_type
 */
function getCache($cache_file_name,$cache_time){
    if (file_exists($cache_file_name)){
        if ($cache_time){ // jest podany termin waznosci cache
            if (filemtime($cache_file_name ) < (time() - $cache_time)) { //cache nieaktualny, pobranie od nowa i utworzenie
                generateCache($cache_file_name);
            }
        }
    }else{// brak cache - utworznie
        generateCache($cache_file_name);
    }
    return file_get_contents($cache_file_name);
}
?>

Następnie użycie plik css.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
< ?php
if(array_key_exists("HTTP_IF_MODIFIED_SINCE",$_SERVER)){
    $if_modified_since = strtotime(preg_replace('/;.*$/','',$_SERVER["HTTP_IF_MODIFIED_SINCE"]));
    if($if_modified_since >= strtotime(filemtime($cache_file_name))){
        header("HTTP/1.0 304 Not Modified");
        exit();
    }
}
/**
 * Nazwa pliku cache
 * @var string
 */
$cache_file_name = 'cache_style.css';
/**
 * Czas ważności cache w sekundach
 * 0 - cache bez terminu ważności
 * @var unknown_type
 */
$cache_time = 0;
require_once 'css_cache.php';
header("Content-type: text/css; charset: UTF-8");
header("Pragma: public");
header("Cache-Control: public");
header('Expires: '.gmdate('D, d M Y H:i:s', strtotime('+1 year').' GMT'));
header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($cache_file_name)).' GMT');
ob_start("ob_gzhandler");
echo getCache($cache_file_name,$cache_time);
ob_end_flush();
?>

Krótkie omówienie:
W pliku css_cache.php mamy 2 funkcje: generateCache($cache_file_name) oraz getCache($cache_file_name,$cache_time).
Pierwsza z nich tworzy nam jeden zbiorczy plik cache ze wszystkich plików css znalezionych w katalogu (podanym jako parametr $dir – domyślnie obecny). Pliki oznaczane są komentarzem informującym kiedy i z jakiego pliku został utworzony dany fragment, do tego preg_replace załatwia nam sprawę zbędnych pustych znaków.
Druga z nich pobiera plik cache. Jeśli został podany parametr $cache_time określający ważność cache, funkcja sprawdza, czy plik cache jest jeszcze aktualny. Jeśli plik nie jest aktualny, lub w ogóle nie istnieje jest tworzony na nowo. Następnie funkcja zwraca zawartość takiego skompresowanego pliku.

W pliku css.php mamy prosty przykład wykorzystania. Na początku sprawdzamy, czy wysłany uprzednio plik jest jeszcze aktualny (nagłówki HTTP_IF_MODIFIED_SINCE), jeśli tak – nie robimy nic – zwracamy informację, że plik nie został zmodyfikowany od czasu ostatniej wizyty.
Jeśli jednak plik został zmodyfikowany, bądź jest to pierwsze wejście wysyłane są nagłówki ważności oraz odczytywany jest plik z cache.

Aby wykorzystać system na stronie wystarczy w nagłówku strony podać link do pliku css:

<link rel="stylesheet" type="text/css" href="css.php" />

 

Przeczytaj także

Komentarze: 6

Dodaj komentarz »

 
 
Pomysł na stronę – niszowy sklep kosmetyczny | Kosmetyki
 

[…] wszystko z katalogu ze stylami minimalizując zapytania, unikanie nadmiarowości kodu HTML, CSS minify , stosowanie techniki CSS Rollover z wykorzystaniem CSS Sprites powodujące, że nie pojawia się […]

 

Odpowiedz

 

Zastosowałem powyższe – złączyłem pliki css i działa, ale Validator CSS w3.org niestety wyświetla mi następujący błąd:

Unknown error wrg.w3c.www.http.HttpInvalidValueException: Invalid content type. Nie znaleziono arkusza stylów

. Czy można to jakoś obejść ?

 

Odpowiedz

 

jak wpisać ścieżkę do $dir = ‚.’; bo nie znam się na php a chciałbym zastosować to rozwązanie bo mam aż 5 css i w jakim katalogu muszą być pliki css_cache.php css.php

 

Odpowiedz

     

    Przy tym prostym rozwiązaniu pliki css_cache.php oraz css.php najlepiej jakby były w katalogu głównym strony.

    Co do ustawienia katalogu – najprościej jeśli wszystkie pliki css wrzucisz do jednego katalogu, np /css w katalog głównym witryny i zmodyfikujesz kod funkcji do:

    function generateCache($cache_file_name){
      $dir = realpath(dirname(__FILE__)).'/css/';
     

    Odpowiedz

 

Dodaj komentarz

 
(nie będzie publikowany)
 
 
Komentarz
 
 

Dozwolone tagi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
© 2009 - 2016 Vokiel.com
WordPress Theme by Arcsin modified by Vokiel