TAAT — CSS&JSS

CSS&JSS

CSS&JSS to sposób na zmniejszenie rozmiaru plików CSS i JavaScript. Pozwala zaoszczędzić nawet 80% transferu i znacznie redukuje czas ładowania strony.

Jak to działa?

Cache

Przeglądarka prosi o wyświetlenie pliku CSS lub JS.
mod_rewrite przekierowywuje zapytanie do pliku skompresowanego, przechowywanego na dysku.
Jeśli skompresowany plik nie istnieje, w zależności od wybranych opcji, następuje:
- wyświetlenie nieskompresowanej wersji
- wyświetlenie nieskompresowanej wersji i zapisanie jej do cache
- wyświetlenie skompresowanej wersji
- wyświetlenie skompresowanej wersji i zapisanie jej do cache

Krótko mówiąc, CSS&JSS jest odpowiedzialny za utworzenie skompresowanej wersji i serwowanie jej zamiast oryginalnej, nieskompresowanej.

Kompresja

Do kompresji plików CSS wykorzystywane są sprawdzone rozwiązania OpenSource:

CSSTidy — klasa do kompresji plików CSS
JSMin — klasa do kompresji plików JavaScript
Dean Edwards’ packer — kompresor kodu JavaScript (o jeszcze lepszej wydajności niż JSMin)

Skompresowane w ten sposób pliki CSS i JavaScript w dalszym ciągu pozostają zwykłymi plikami tekstowymi, ale usuwane są z nich niepotrzebne znaki (komentarze, spacje, znaki następnej linii). Zerknij w źródła tej strony, aby zobaczyć jak wyglądają pliki zmniejszone w ten sposób.

gzip

Pliki mogą zostać skompresowane przy pomocy gzip, który jest najskuteczniejszym sposobem na zmniejszenie rozmiaru pliku tekstowego. Niestety, nie wszystkie przeglądarki obsługują pliki skompresowane w ten sposób. Dlatego CSS&JSS tworzy i serwuje dwie wersje cache: przy użyciu gzip i skompresowaną przy użyciu bibliotek. Oprócz tego, wersja nieskompresowana w dalszym ciągu pozostaje na dysku, dzięki czemu pliki źródłowe można w łatwy sposób edytować.

Minusem kompresji gzip jest to, że przeglądarka potrzebuje dodatkowego czasu na rozpakowanie pliku. Trzeba znaleźć złoty środek pomiędzy rozmiarem pliku a czasem oczekiwania na dekompresję. Przy większości typowych plików CSS i JS czasy są niezauważalne dla użytkownika.

Czasami zdarza się tak, że skompresowany plik wynikowy jest większy niż źródłowy. W takim przypadku serwowana jest wersja nieskompresowana.

Dodatkowo, przy użyciu zaawansowanych opcji, można ustawić progową wielkość plików które mają być kompresowane (np. tylko te powyżej 5KB).

mod_headers

Jeśli na serwerze można korzystać z modułu Apache o nazwie mod_headers, można użyć opcji zmieniających nagłówki wysyłane przez serwer aby jeszcze lepiej wykorzystać cache przeglądarki:

usunięcie nagłówków ETags
usunięcie nagłówków Last-modified
ustawienie nagłówków Expires na odległą wartość (bardzo długi czas cache)
dodanie nagłówków Cache-control

Dodatkowe zalety

Możliwość definiowania stałych plikach CSS, np.

/* kolory użyte na stronie */
$kolor_glowny: #cc4411;
$cien: lightgray;
/* menu */
#nav a {color: $kolor_glowny;
border_bottom: $cien;
}

Możliwość automatycznego dołączenia kodu resetującego arkusze (reset Erica Meyera, resetowanie globalne za pomocą gwiazdki lub własny kod).
Możliwość dodania dowolnego kodu CSS na początku lub końcu wszystkich arkuszy.
Arkusze importowane za pomocą @import mogą być połączone w cache z głównym plikiem

Instalacja

Pobierz CSS&JSS.
Rozpakuj i wgraj cały katalog na serwer (nie musisz wgrywać podkatalogu doc)
Utwórz folder, w którym będą przechowywane pliki cache (np. o nazwie cache)
Nadaj temu folderowi prawa do zapisu
Uruchom z przeglądarki instalator, plik install.php, np. example.com/cssjss/admin/install.php
Instalator tworzy pliki:
- w przypadku użycia opcji gzip:
  - wewnątrz katalogu cache: folder o nazwie gzip
  - wewnątrz katalogu gzip: foldery o nazwach css i js
  - wewnątrz katalogów css i js: pliki o nazwie .htaccess informujące, że pliki w tym folderze są skompresowane
- w przypadku użycia opcji mod_headers:
  - wewnątrz katalogu cache: plik .htaccess modyfikujący nagłówki
  - wewnątrz katalogu cache/gzip/css/ i cache/gzip/js/: pliki .htaccess modyfikujące nagłówki
Instalator nie zmienia żadnych plików znajdujących się poza folderem cache.
Instalator generuje treści plików, które musisz wkleić:
- Treść pliku config.php (ustawienia katalogów)
- Treść głównego pliku .htaccess (ustawienia przekierowań do cache i przyjazne adresy dla administratora CSS&JSS)
- Treści plików .htaccess i .htpasswd do zabezpieczenia katalogu administratora hasłem

Opcje instalatora

Admin

Directories

Nazwy katalogów. W zależności od konfiguracji Twojego serwera, możesz wybrać odpowiednie nazwy folderów. Aby wszystko działało jak należy, te ścieżki muszą być podane prawidłowo.

Compression options

Opcje kompresji:

use CSSTidy: Czy kompresować pliki CSS przy użyciu CSSTidy?
use packer: Czy kompresować pliki JS przy użyciu Packera?
use JSMin: Czy kompresować pliki JS przy użyciu JSMin?
use gzip: Czy używać kompresji gzip?

Redirection options

Opcje przekierowania. Co zrobić w przypadku kiedy cache jeszcze nie istnieje?

[PHP always] Serve uncompressed and DO NOT write it to cache: Wyślij za pomocą PHP nieskompresowaną wersję i nie zapisuj jej do cache. Następne wywołanie też zostanie obsłużone przez PHP w ten sam sposób.
[PHP always] Serve compressed and DO NOT write it to cache: Wyślij za pomocą PHP skompresowaną wersję i nie zapisuj jej do cache. Następne wywołanie też zostanie obsłużone przez PHP w ten sam sposób.
[PHP always] Serve source (no Constants and Includes): Wyślij za pomocą PHP plik źródłowy (bez zamieniania stałych CSS i @import). Następne wywołanie też zostanie obsłużone przez PHP w ten sam sposób.
[PHP once] AutoPublish uncompressed (Serve uncompressed and write it to cache): Wyślij za pomocą PHP nieskompresowaną wersję i zapisz ją do cache. Następne wywołanie zostanie obsłużone przez cache, nie przez PHP.
[PHP once] AutoPublish compressed (Serve compressed and write it to cache): Wyślij za pomocą PHP skompresowaną wersję i zapisz ją do cache. Następne wywołanie zostanie obsłużone przez cache, nie przez PHP.

Opcje automatycznej publikacji są bardzo wygodne, ale nie masz możliwości wcześniejszego sprawdzenia, czy pliki zostały skompresowane prawidłowo. Takie rozwiązanie najbardziej przydatne jest na serwerze roboczym.

mod_headers

Opcje nagłówków HTTP.

remove ETag: Usuwa nagłówki Etag
remove Last-Modified: Usuwa nagłówki Last-modified
add cache control: Dodaje nagłówki zarządzające cache
far future Expires: Ustawia nagłówki Expires na odległy w czasie (np. plik CSS jest pobierany raz na rok). Używając tej opcji nie możesz zaserwować zmienionego pliku. Jeśli chcesz go zmienić, musisz serwować z inną nazwą (możesz ją podmienić np. z pomocą mod_rewrite).

Jak używać

Aby wygenerować skompresowaną wersję pliku do cache, przejdź do adresu /cssjss/publish/plik.css
Aby wygenerować skompresowaną wersję pliku do cache i zapisać w cache pod inną nazwą, przejdź do adresu /cssjss/publish/plik.css/as/plik2.css
Aby wygenerować skompresowane wersje dla wszystkich plików CSS i JS przejdź do adresu /cssjss/publish/all
Aby wyczyścić cache dla danego pliku, przejdź do adresu /cssjss/flush/plik.css
Aby wyczyścić cache dla wszystkich plików, przejdź do adresu /cssjss/flush/all
Aby zobaczyć wersję developerską (skompresowaną + statystyki, bez zapisu do cache) przejdź do adresu cssjss/dev/plik.css
Aby zaktualizować nagłówki Expires o NN miesięcy od dziś, przejdź do adresu cssjss/admin/admin.php?expires=NN

Zaawansowane opcje konfiguracyjne znajdziesz w dokumentacji klasy CSSJSS.

Uwagi

To dopiero wersja alfa. Była testowana dopiero na około 20 żywych serwisach. Wykonaj kopie zapasowe swoich plików przed instalacją.

JSMin i packer wymagają prawidłowo pisanego kodu JS. Upewnij się, że pliki, które kompresujesz są zgodne z JSLint.

Nawigacja

Ciekawe? Subskrybuj kanał RSS bo będzie więcej!