Wyświetlaj zasoby statyczne, korzystając z wydajnej zasady pamięci podręcznej

Buforowanie stron HTTP może przyspieszyć wczytywanie strony w przypadku wielokrotnych wizyt.

Gdy przeglądarka wysyła żądanie udostępnienia zasobu, serwer udostępniający ten zasób może poinformować przeglądarkę, jak długo ma tymczasowo przechowywać zasób lub buforować go w pamięci podręcznej. W przypadku kolejnych żądań tego zasobu przeglądarka używa kopii lokalnej, zamiast pobierać ją z sieci.

Co się dzieje, gdy kontrola zasad dotyczących pamięci podręcznej Lighthouse kończy się niepowodzeniem

Lighthouse oznacza wszystkie zasoby statyczne, które nie są przechowywane w pamięci podręcznej:

Zrzut ekranu przedstawiający zasoby statyczne narzędzia Lighthouse dla zasobów statycznych z kontrolą zasad pamięci podręcznej

Lighthouse uważa, że zasób można zapisać w pamięci podręcznej, jeśli są spełnione wszystkie te warunki:

  • Zasóbem jest czcionka, obraz, plik multimedialny, skrypt lub arkusz stylów.
  • Zasób ma kod stanu HTTP 200, 203 lub 206.
  • Zasób nie ma jawnej zasady niezachowywania pamięci podręcznej.

Jeśli strona nie przejdzie kontroli, Lighthouse wyświetla wyniki w tabeli z 3 kolumnami:

Adres URL Lokalizacja zasobu zapisywanego w pamięci podręcznej
TTL pamięci podręcznej Bieżący czas trwania zasobu w pamięci podręcznej
Rozmiar przeniesienia Szacunkowa ilość danych, które użytkownicy mogliby zapisać, gdyby oznaczony zasób był przechowywany w pamięci podręcznej

Jak buforować zasoby statyczne przy użyciu buforowania HTTP

Skonfiguruj serwer tak, aby zwracał nagłówek odpowiedzi HTTP Cache-Control:

Cache-Control: max-age=31536000

Dyrektywa max-age informuje przeglądarkę, jak długo ma zapisywać zasób w pamięci podręcznej (w sekundach). W tym przykładzie ustawiany jest czas trwania na 31536000, co odpowiada 1 rokowi: 60 sekund × 60 minut × 24 godziny × 365 dni = 31536 000 sekund.

Zasoby statyczne należy przechowywać w pamięci podręcznej przez dłuższy czas, np. przez rok lub dłużej.

Użyj no-cache, jeśli zasoby się zmieniają i jest to ważne, ale chcesz też uzyskać korzyści przyspieszające działanie pamięci podręcznej. Przeglądarka nadal zapisuje w pamięci podręcznej zasób ustawiony jako no-cache, ale najpierw na serwerze sprawdza, czy zasób jest nadal aktualny.

Dłuższy czas przechowywania w pamięci podręcznej nie zawsze jest lepszym rozwiązaniem. Ostatecznie to Ty decydujesz, jaki jest optymalny czas trwania pamięci podręcznej dla Twoich zasobów.

Istnieje wiele dyrektyw dostosowujących sposób zapisywania różnych zasobów w pamięci podręcznej. Więcej informacji na temat buforowania zasobów znajdziesz w przewodniku „Pamięć podręczna HTTP: pierwsza linia obrony” i ćwiczenia z programowania dotyczące działania buforowania HTTP.

Jak zweryfikować odpowiedzi z pamięci podręcznej w Narzędziach deweloperskich w Chrome

Aby sprawdzić, jakie zasoby przeglądarka pobiera z pamięci podręcznej, otwórz kartę Sieć w Narzędziach deweloperskich w Chrome:

[comment]: <> (Poniższa lista zawiera krótki kod z web.dev, ale nie został przetłumaczony z języka angielskiego w żadnym języku). 1. Naciśnij Control+Shift+J (lub Command+Option+J na Macu), aby otworzyć Narzędzia deweloperskie. 2. Kliknij kartę Network (Sieć).

Kolumna Rozmiar w Narzędziach deweloperskich w Chrome może ułatwić sprawdzenie, czy zasób został zapisany w pamięci podręcznej:

Kolumna Rozmiar.

Chrome udostępnia najczęściej żądane zasoby z pamięci podręcznej. Jest ona bardzo szybka, ale jest usuwana po zamknięciu przeglądarki.

Aby sprawdzić, czy nagłówek Cache-Control zasobu jest ustawiony zgodnie z oczekiwaniami, sprawdź dane nagłówka HTTP:

  1. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Żądania.
  2. Kliknij kartę Nagłówki.
Sprawdzanie nagłówka Cache-Control na karcie Headers (Nagłówki)
Sprawdź nagłówek Cache-Control na karcie Nagłówki.

Wskazówki dotyczące stosu

Drupal

Ustaw Maksymalny wiek przeglądarki i pamięci podręcznej serwera proxy na stronie Administracja > Konfiguracja > Programowanie. Zobacz zasoby dotyczące wydajności Drupal.

Joomla

Zobacz Pamięć podręczna.

WordPress

Zobacz Buforowanie przeglądarki.

Zasoby