TAAT Technologie Cyfrowe

CSS&JSS

Switch to English language

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

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:

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:

Dodatkowe zalety

Instalacja

  1. Pobierz CSS&JSS.
  2. Rozpakuj i wgraj cały katalog na serwer (nie musisz wgrywać podkatalogu doc)
  3. Utwórz folder, w którym będą przechowywane pliki cache (np. o nazwie cache)
  4. Nadaj temu folderowi prawa do zapisu
  5. Uruchom z przeglądarki instalator, plik install.php, np. example.com/cssjss/admin/install.php
  6. 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.

  7. 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
Login i hasło, które zostaną użyte do zabezpieczenia katalogu administratora
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ć

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!

RSS ?