Ostatnio z ciekawości zajrzałem do aplikacji PageSpeed Insight (PSI). Wynik mojej strony o Krecie oscylował w okolicy 75 punktów dla tradycyjnych przeglądarek dla komputerów i 61 punktów dla urządzeń mobilnych. Postanowiłem przyjrzeć się jaki element miał największy wpływ na osiągnięty wyniki. Okazało się że największym czynnikiem wpływającym negatywnie na punktację było pominięcie ustawienia maksymalnego wieku (daty wygaśnięcia) dla większości statycznych zasobów wykorzystywanych na stronie. W moim przypadku obejmowało to wszystkie pliki graficzne, js i css. Postanowiłem przeszukać internet pod kątem znalezienia sposobu na dołączenia do nagłówków tych elementów odpowiedniej wartości max-age.

Oczywiście wykonanie takiego zadania jest możliwe na poziomie odpowiedniej konfiguracji serwera. Jednak w przypadku zdecydowanej większości hostingów, zrealizowanie takiego zadania nie jest możliwe. W przypadku typowego wirtualnego hostingu jedynym sensownym rozwiązaniem jest wykorzystanie dobrodziejstwa pliku konfiguracyjnego .htaccess serwera Apache dla danego podkatalogu.

Poniżej znajdziecie odpowiedni kod dzięki któremu apache do każdego nagłówka określonego pliku doda deklarację wieku danego pliku:

<IfModule mod_headers.c>
 <FilesMatch "\.(jpg|jpeg|png|gif|swf|JPG)$">
 Header set Cache-Control "max-age=4838400, public"
 </FilesMatch>
 <FilesMatch "\.(css|js)$">
 Header set Cache-Control "max-age=4838400, private"
 </FilesMatch>
 </IfModule>

W zasobach internetu znajdziecie inne podobnego rodzaju rozwiązania, warto jednak zwrócić uwagę, że w przypadku plików typu css i js Cache-Control musi mieć atrybut Private a nie Public. W przeciwnym wypadku aplikacja PSI w dalszym ciągu będzie wykazywać Wam te pliki jako takie, które nie mają określonej żywotności.

Pewnie niektórzy z Was zrodzi się pytanie: Czy te zmiany mają wpływ tylko i wyłącznie na punktację w PSI?

Oczywiście wprowadzanie tych zmian tylko i wyłącznie w celu uzyskania lepszego wyniku nie ma większego sensu (poza satysfakcją). Zdecydowanie ważniejszą korzyścią jest to, że dzięki tym zmianom Apache instruuje przeglądarkę, aby w pierwszej kolejności starała się ładować pobierane zasoby z lokalnego dysku komputera użytkownika, a nie z sieci. Oczywiście przy pierwszym wywołaniu danego elementu (np. obrazka jpg) musi on zostać pobrany, jednak każde kolejne wywołanie tego elementu będzie powodowało odwołanie do pliku znajdującego się w cache przeglądarki. Zdecydowanie skraca to czas ładowania się stron, oraz zmniejsza ilość danych przesyłanych między serwerem a komputerem użytkownika.

A jak zmieniło to wynik uzyskiwany przez moją stronę w PSI? Poniżej znajdziecie zrzut:

Jak widać naprawdę niezły skok :).

Znaczniki: .htaccess, apache, PHP, programowanie