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" /> |
[…] 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ę […]
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:
. Czy można to jakoś obejść ?
Zastosuj maskowanie adresu i zamień style.php na style.css.
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
Przy tym prostym rozwiązaniu pliki
css_cache.php
orazcss.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:Dzieki za pomoc ale u mnie niestety nie działa. Powgrywalem wszystko tak jak opisano, usunałem z kodu strony linki do css a dodałem link do css.php no i strona nie działa patrz http://www.biurobit.com/test/antyspam.php