Wykorzystaj pamięć podręczną przeglądarki

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że odpowiedź serwera nie zawiera wyraźnych nagłówków zapisywania w pamięci podręcznej lub że zasoby mogą być zapisywane w pamięci podręcznej tylko na krótki czas.

Omówienie

Zapisywanie zasobów statycznych w pamięci podręcznej przeglądarki może pomóc zaoszczędzić czas użytkownika wielokrotnie odwiedzającego daną witrynę. Nagłówki zapisywania w pamięci podręcznej powinny dotyczyć wszystkich zasobów statycznych, które można zapisać, a nie tylko ich niewielkich podzbiorów (np. obrazów). Zasoby, które można zapisać w pamięci podręcznej to pliki JS i CSS, pliki obrazów oraz inne pliki zawierające obiekty binarne (multimedia, pliki PDF itp.). Kod HTML nie jest statyczny i nie powinien być domyślnie uwzględniany w zapisywaniu w pamięci podręcznej. Zastanów się, jaka polityka zapisywania w pamięci podręcznej będzie odpowiednia dla kodu HTML Twojej witryny.

Zalecenia

Włącz funkcję zapisywania materiałów z Twojego serwera w pamięci podręcznej przeglądarki. Czas przechowywania zasobów statycznych w pamięci podręcznej powinien wynosić co najmniej tydzień. Zasoby zewnętrzne, takie jak reklamy czy widżety, powinny być przechowywane w pamięci podręcznej co najmniej jeden dzień. Dla wszystkich zasobów zapisywanych w pamięci podręcznej zalecamy następujące ustawienia:

  • Ustaw wartość Expires na co najmniej tydzień, a najlepiej na rok w przód. (Preferujemy ustawienie Expires zamiast Cache-Control: max-age, ponieważ jest częściej obsługiwane). Nie ustawiaj wartości dłuższej niż rok w przód, ponieważ będzie to naruszeniem wytycznych RFC.
  • Jeżeli wiesz dokładnie, kiedy dane zasoby się zmienią, możesz ustawić krótszy okres ważności. Jeżeli jednak wiesz tylko, że „wkrótce mogą się zmienić”, ale bez konkretów, ustaw długi okres ważności i użyj odcisku cyfrowego w URL-u (technika opisana poniżej).

Nagłówki Expires i Cache-Control: max-age

Określają one okres, w którym przeglądarka może używać zasobów zapisanych w pamięci podręcznej bez sprawdzania, czy na serwerze WWW nie znajduje się nowa wersja. Są to „silne nagłówki zapisywania w pamięci podręcznej” i obowiązują bezwarunkowo. Gdy zostaną ustawione, po pobraniu zasobu przeglądarka nie będzie wysyłała żądań GET do upływu terminu ich ważności, osiągnięcia przez nie maksymalnego wieku bądź do czasu opróżnienia pamięci podręcznej przez użytkownika.

Nagłówki Last-Modifed i ETag

Te nagłówki określają sposób decydowania przez przeglądarkę, czy pliki są takie same, na potrzeby zapisania w pamięci podręcznej. W przypadku nagłówka Last-Modified takim wyznacznikiem jest data. W przypadku nagłówka ETag wskazówką może być dowolna wartość jednoznacznie identyfikująca zasób (standardowo stosowane są wersje pliku i identyfikatory numeryczne zawartości). Last-Modified to „słaby” nagłówek, ponieważ przeglądarka określa, czy pobrać dany element z pamięci podręcznej czy nie w oparciu o mechanizmy heurystyczne.

Te nagłówki pozwalają przeglądarce skutecznie aktualizować zasoby zapisane w pamięci podręcznej poprzez wysyłanie warunkowych żądań GET, gdy użytkownik wyraźnie ponownie załaduje stronę. Warunkowe żądania GET nie zwracają pełnej odpowiedzi, jeżeli zasób na serwerze się nie zmienił, i z tego względu charakteryzują się krótszym czasem oczekiwania niż pełne żądanie GET.

Których nagłówków zapisywania w pamięci podręcznej powinienem użyć?

Ważne jest, by określić jeden z nagłówków Expires i Cache-Control max-age, oraz jeden z Last-Modified i ETag, w odniesieniu do wszystkich zasobów, które można zapisać w pamięci podręcznej. Nie ma potrzeby określać zarówno nagłówka Expires, jak i Cache-Control: max-age, albo i Last-Modified, i ETag.

Stosowanie odcisku cyfrowego w URL-u

W przypadku zasobów, które rzadko się zmieniają, można ustawić zapisywanie w pamięci podręcznej przeglądarki na okres do zmiany zasobu na serwerze, kiedy to serwer poinformuje przeglądarkę o dostępnej nowej wersji. W tym celu można nadać każdej wersji zasobu niepowtarzalny URL. Załóżmy na przykład, że mamy zasób o nazwie „moj_arkusz_stylow.css.” Możemy zmienić nazwę pliku na „moj_arkusz_stylow_odcisk_cyfrowy.css”. Gdy zasób się zmieni, zmieni się również jego odcisk cyfrowy, a w konsekwencji także jego URL. Zmiana URL-a wymusi na przeglądarce ponowne pobranie zasobu. Odcisk cyfrowy pozwala ustawić długi okres ważności nawet w przypadku zasobów, które zmieniają się częściej.

Popularnym sposobem zastosowania odcisku cyfrowego jest dodanie 128-bitowej szesnastkowej wartości numerycznej kodującej identyfikator zawartości pliku.

Inna strategia polega na tworzeniu katalogów z nowymi wersjami aplikacji i umieszczaniu wszystkich zasobów każdej wersji w odpowiednim wersjonowanym katalogu. Wadą tej metody jest to, że nawet jeżeli zasób nie ulega żadnym zmianom w kolejnych wersjach, jego URL i tak wymusza ponowne pobieranie. Problem ten nie dotyczy korzystania z identyfikatorów numerycznych, jednak ta technika jest trochę bardziej złożona.