Jak zmniejszyć liczbę zapytań HTTP przez łączenie i cache’owanie skryptów JavaScript oraz plików CSS

W czasach, gdy skrypty JavaScript i arkusze CSS są umieszczane w wielu zewnętrznych plikach, a łącznie nierzadko zajmują ponad 300 kilobajtów, warto skorzystać z prostego skryptu, aby zmniejszyć znacznie liczbę zapytań HTTP i tym samym odciążyć serwer.

Spis treści:

Założenia
Wczytanie i połączenie plików
Kompresja
Cache
Wynik końcowy
Testy szybkości

Skrypt wczyta wszystkie podane pliki z kodem, połączy w jeden, a następnie zwróci do strony głównej. Dodatkowo, usunięte zostaną wszystkie białe znaki. Spowoduje to, że zamiast kilkudziesięciu, pozostaną tylko dwa zapytania HTTP (dla CSS i JS) i około 15% mniej przesyłanych danych.

Dzięki temu zaoszczędzimy całkiem dużo czasu podczas ładowania strony, a po zastosowaniu cache’owania skrypt stanie się praktycznie „niezauważalny” dla serwera.

Założenia

Aby oddzielić poszczególne typy plików od siebie, należy założyć dwa foldery.

/css na arkusze stylów,
/scripts na pliki JavaScript.

Dodatkowo, wewnątrz scripts umieścimy folder tmp na pliki cache. Aby adres wyglądał elegancko, a także by już na samym początku odfiltrować zapytania, które mogą próbować wczytać niepożądane pliki, napiszemy prostą regułę mod_rewrite, dzięki czemu skrypt będzie dostępny pod adresem merge/typ/plik1;plik2;plik_n.
Podstawową zawartość pliku .htaccess będą stanowił tylko dwie linie kodu.

RewriteEngine on
RewriteRule ^merge/(js|css)+/([a-zA-Z0-9;\.]+)$ merge.php?typ=$1&files=$2 [L]

Oczywiście, jeśli taki plik już istnieje na serwerze, należy uważać, aby go nie nadpisać – niektóre klienty FTP nie wyświetlają stosownego ostrzeżenia o jego obecności. W takim wypadku należy do istniejącego już pliku dodać tylko drugą linię kodu.

Wczytanie i połączenie plików

W tym momencie jesteśmy gotowi do uruchomienia szkieletu skryptu, który oferuje już podstawową funkcjonalność, czyli łączenie plików.

Zaczynamy od sprawdzenia po raz kolejny czy poprzez $_GET do skryptu nie wkradną się niechciane dane. Eliminujemy więc inne typy niż .js i .css, a następnie usuwamy z listy plików znaki inne niż litery, cyfry i średnik. Kolejne linie to generowanie adresu do pliku tymczasowego (nie jest na razie wykorzystywane) oraz „rozbicie” ciągu plików oddzielonych średnikami, na tablicę z ich nazwami.

Następnie, w zależności od ustalonego typu plików, wysyłany jest odpowiedni nagłówek, a także ustalane są pewne zmienne, oznaczające ścieżkę dostępu oraz rozszerzenie.

Po tej czynności skrypt w pętli foreach sprawdza, czy dany plik istnieje, a jeśli tak – wczytuje go do zmiennej $output, dorzucając w komentarzu jego nazwę. Na koniec cała zmienna $output jest zwracana do treści pliku, z adnotacją o wielkości całego gotowego kodu.

<?php
if ($_GET['typ']!="js" && $_GET['typ']!="css") {
die("Błąd");
}

$files = preg_replace("/[^0-9a-zA-Z;\.]/", "", $_GET['files']);
$cacheFile = "scripts/tmp/".md5($_GET['typ'] .$files).".tmp";
$files = explode(";", $files);

if ($_GET['typ']=="js") {
Header ("Content-type: text/javascript");
$path="./scripts/";
$ext = ".js";
}else if ($_GET['typ']=="css") {
Header ("Content-type: text/css");
$path="./css/";
$ext = ".css";
}

foreach ($files as $file) {
if (file_exists($path.$file.$ext)) {
$output.= "/*plik ".$file.$ext."*/\n";
$output.= file_get_contents($path.$file.$ext)."\n\n";
}
}
echo $output;
echo strlen($output)." bytes";
?>

W efekcie – po wrzuceniu pliku ze skryptem, pliku .htaccess oraz kilku przygotowanych plików .css do odpowiedniego folderu na serwerze i odpaleniu skryptu poprzez adres: http://twojserwer.pl/merge/css/plik1;plik2;plik3 (koniecznie bez rozszerzeń) – na ekranie powinniśmy uzyskać efekt podobny do poniższego – oczywiście treść strony będzie zależała od przygotowanych przez Ciebie arkuszów CSS.

«poprzednia 1 2 3 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

7 skomentuj »

Komentarze

#1 Jan Koprowski^® 2009-09-21 07:45:17 0
Świetny artykuł. Najbardziej podoba mi się proste pokazanie jak to faktcznie działa i jaki daje efekt.

Wiele równie ciekawych, prostych technik można oglądać na stronie stworzonej z inicjatywy Google "Make the web faster".
IP: 192.198.151.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.21 Safari/532.0
#2 AdamB 2009-09-21 08:50:00 0
Koncept dobry, ale wykonanie niekoniecznie. Takie łączenie plików z kompresją lepiej jest zrobić raz i zapisać wynik do pliku. Całość robimy podczas deployingu, a serwer produkcyjny po prostu ma jeden statyczny plik do wysłania. W przypadku Apache kompresję gzip mamy gratis.
IP: 89.79.248.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.2) Gecko/20090803 Ubuntu/9.04 (jaunty) Shiretoko/3.5.2
#3 partyy 2009-09-21 11:42:30 0
Popracujcie nad wyświetlaniem kodu php, css, html itp w artykułach, bo odechciewa go przeglądać ;p
IP: 79.162.217.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 GTB5 (.NET CLR 3.5.30729) Creative ZENcast v1.01.06
#4 koderka 2009-09-29 19:30:37 0
Do porównywania wartości bezpieczniej jest używać === oraz !==, jako że np. (0 == 'js') daje... true. Najlepiej nabyć takiego nawyku i odstępować od zwyczaju tylko, jeśli rzeczywiście chodzi o porównanie, gdzie typ nie ma znaczenia i powyższe zachowanie jest porządane.

preg_replace("//", ... to krócej: preg_replace("//i", ... I czy backslash jest celowo na liście znaków? Kropka w to i tak zwyczajna kropka, nie wildcard, i backslasha nie potrzebuje.
IP: 87.206.112.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
#5 koderka 2009-09-29 19:32:09 0
Zeżarło zawartość preg_replace :) Chodzi oczywiście o zastąpienie a-zA-Z samym a-z i dodanie flagi i.
IP: 87.206.112.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
#6 vojski^® 2010-01-28 01:13:21 0
Fajny artykuł. Pozostając w temacie, ciekawe propozycje od deweloperów Yahoo:

http://developer.yahoo.com/performance/rules.html
IP: 150.254.240.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
#7 lolek 2010-02-09 09:34:37 0
minify ... (!)
IP: 81.15.208.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.