Nagłówki Expires i Cache-Control pozwalają określić twórcom strony czy aplikacji internetowej jak długo przeglądarka ma buforować pobrane z serwera dane.
Buforowanie (pamięć podręczna lub cache) to jedna z podstawowych technik optymalizacyjnych przetwarzania danych polegająca na tym, że dane, które znajdują się w pamięci o stosunkowo długim czasie dostępu (a do takich zaliczamy serwer WWW) przenosimy do pamięci o krótszym czasie dostępu (czyli w tym wypadku na lokalny dysk twardy). Technikę tę stosujemy także w przypadku działania Internetu, dzięki temu raz pobrana grafika czy wideo nie jest pobierane z serwera przy każdym wyświetleniu strony na której się one znajdują tylko raz a powtórna konieczność odczytu jest realizowana za pomocą lokalnej pamięci masowej.
W przypadku stron internetowych przechowywanie plików na urządzeniu klienta daje OGROMNĄ poprawę szybkości działania. Dlaczego? Aby to sobie uzmysłowić trzeba mniej-więcej zrozumieć jak działa komunikacja w Internecie.
TTFB i czas pobierania zasobów
Po pierwsze, kiedy klient chce wyświetlić stronę internetową:
- wysyła do serwera DNS zapytanie o adres IP serwera, który ją aktualnie przechowuje. Ten fundamentalny mechanizm działania Internetu pozwala przypisywać do domen różne serwery i posługiwać się nam nazwami typu „mansfeld.pl” a nie „87.98.239.4”.
- Kiedy już przeglądarka otrzyma z serwera DNS „prawdziwy” adres.
- wysyła właściwe zapytanie HTTP – czyli nawiązuje kolejne połączenie i odbiera kod HTML strony WWW.
- Odbiera stronę w postaci HTML z serwera i przy generowaniu strony internetowej natrafia na zasoby zewnętrzne.
- Wysyła kolejne zapytania o każde zdjęcie, plik CSS i JS aż zostaną pobrane wszystkie pliki.
Cały ten proces przebiega przy każdym nawet najmniejszym zasobie na nowo z tą różnicą, że jeżeli odpytujemy o zasoby zamieszczone na tej samej domenie pomijany jest pierwszy punkt. Sama komunikacja w obie strony zabiera sporo czasu (sygnał ma określoną prędkość i ulega w wielu miejscach opóźnieniom). Opóźnienie w tej komunikacji zależy od wielu czynników w tym czasu reakcji serwera. Jest to tak zwany czas TTFB.
Po drugie, pobieranie takich zdjęć jest ograniczone przepustowością łącza. Domyślnie, przeglądarki nie zapisują pobieranych zasobów, po to aby dać możliwość aktualizacji tych zasobów twórcom stron internetowych.
Nagłówki (dyrektywy) Expires i Cache Control sugerują przeglądarce przez jak długi czas nie musi ona sprawdzać czy tak czasem pliki nie uległy zmianie. Dzięki temu pobrane logo, style CSS, fonty i pliki JS przy wizycie na stronie głównej są pobierane na dysk. To powoduje, że odświeżenie lub wyświetlenie podstrony zajmuje dużo mniej czasu niż pierwszorazowe wyświetlenie strony głównej (lub innej podstrony która była odwiedzona jako pierwsza). Przeglądarka pobierając dane z dysku lokalnego oszczędza czas ale przede wszystkim przepustowość łącza, jaka byłaby potrzebna by ponownie pobrać kilobajty a nawet megabajty, które przed chwilą już zostały ściągnięte.
Czym się różni Expires od Cache-Control?
Nagłówek Expires mówi przeglądarce dokładnie kiedy plik wygaśnie i należy pobrać go od nowa. Wartości nagłówka są ostatecznie datą kiedy wygasa plik. Zaleca się aby mechanizm Expires wykorzystywać w celu buforowania statycznych zasobów (pliki graficzne, pliki ze stylami, fonty, pliki JS, XML, JSON).
Nagłówek Cache-Control oferuje więcej możliwości. Informuje za jaki czas (od pobrania) plik wygaśnie i należy pobrać go od nowa. Cache-Control może być dodatkowo wykorzystywany przez CDN (Content Delivery Network) i serwery proxy. Pozwala dostosować czasy w zależności od typu dostępu (np. public). Wartości nagłówka zawierają czas w sekundach kiedy ma wygasnąć plik.
Jak ustawić nagłówki Expires w .htaccess?
Najprostszym sposobem na ustawienie nagłówków Expires jest dodanie dyrektyw do pliku .htaccess:
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 year"
Powyższe przykładowe dyrektywy sugerują aby wszystkie zasoby buforować i nie sprawdzać ich przez okres jednego tygodnia, pliki JPEG przez miesiąc a pliki PNG przez okres jednego roku. Oczywiście, można ustawić więcej typów i ustawić je według uznania. Często wykorzystywane pliki (a szczególnie małe) mogą mieć ustawione – a nawet jest to zalecane – na okres 1 roku:
ExpiresActive On
ExpiresDefault "access plus 1 year"
# Zdjecia
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType image/webp "access 1 year"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 1 year"
ExpiresByType image/icon "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Kod
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/html "access plus 1 year"
ExpiresByType application/xhtml+xml "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
# Multimedia
ExpiresByType audio/ogg "access 1 year"
ExpiresByType video/mp4 "access 1 year"
ExpiresByType video/ogg "access 1 year"
ExpiresByType video/webm "access 1 year"
Dyrektywy można dodać na samym końcu pliku .htaccess
Jak ustawić nagłówki Cache-Control?
Nagłówki Cache-Control można ustawić też w pliku .htaccess
<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
Powyższa instrukcja sugeruje aby przechowywać podane typy plików przez okres jednego roku 365 [dni] * 24 [godzin] * 60 [minut] * 60 [sekund]
Ustawienie terminu wygasania na okres 1 roku pozwoli uzyskać 100 punktów w teście PageSpeed Insights.
Instalacja modułu Expires na serwerze dedykowanym i VPS
Czyste instalacje serwerów mogą nie mieć aktywnego modułu Expires i komendy dodawane do .htaccess mogą nie działać lub powodować błąd. Aby włączyć taki moduł należy wywołać następujące komendy:
sudo a2enmod headers
sudo a2enmod expires
Po wszystkim należy zrestartować Apache:
service apache2 restart
Jeżeli konsola zgłasza problem z locales, „Setting locale failed” wpisz: dpkg-reconfigure locales. Wybierz przykładowo język polski UTF-8 i to wszystko.
Zalety stosowania nagłówków Expires i Cache Control:
- szybsze wczytywanie podstron (w przypadku odwiedzenia więcej niż jednej podstrony) serwisu i wszelkie skutki (w tym lepsze pozycje w wyszukiwarce),
- odciążenie łącza klienta (mniejsze zużycie transferu),
- odciążenie łącza serwera plików (mniejszy koszt działania serwera plików / usługi do przechowywania plików),
- odciążanie serwera HTTP (mniejszy koszt utrzymania aplikacji).
Jak wymusić aktualizację plików?
„Wadą” stosowanie nagłówków Expires i Cache Control jest brak możliwości aktualizacji plików u klientów po pobraniu zasobu.
<link rel="stylesheet" href="style.css">
Jeżeli taki plik zostanie pobrany to przeglądarka nawet nie będzie sprawdzać czy plik uległ zmianie. To spowoduje, że nowa wersja pliku nie będzie mogła dotrzeć do przeglądarki klienta przez pewien czas. Aby to obejść należy dodać lub zmienić do zasobu tzw. ciąg zapytania (ang. query string):
<link rel="stylesheet" href="style.css?v2">
Z perspektywy przeglądarki to zupełnie inny plik. Zostanie pobrany i zapisany w pamięci przeglądarki na nowo.
Podsumowanie
Stosowanie nagłówków Expires i Cache-Control to krytycznie istotny sposób na zwiększenie prędkości wczytywania stron, sklepów i aplikacji internetowych. Jest to technika optymalizacji, której efekty są korzystne zarówno dla serwerów i klientów WWW. Cache-Control będzie przydatny w przypadku większych portali, ponieważ daje więcej możliwości konfiguracyjnych. Należy mieć na uwadze, że cześć z usługodawców hostingu domyślnie włącza nagłówki dla plików statycznych w serwerach swoich klientów.
Źródła
https://tools.ietf.org/html/rfc7234
ToTemat pisze: 
Odpowiedz lub skomentuj