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

Buforowanie HTTP może skrócić czas wczytywania strony przy kolejnych wizytach.

Gdy przeglądarka wysyła żądanie zasobu, serwer udostępniający zasób może poinformować przeglądarkę, czas, przez jaki ma tymczasowo przechowywać lub buforować zasób. W przypadku każdej kolejnej prośby dotyczącej tego zasobu przeglądarka używa kopii lokalnej, a nie sieci.

Dlaczego nie powiodła się kontrola zasad dotyczących pamięci podręcznej Lighthouse

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

Zrzut ekranu pokazujący zasoby statyczne Lighthouse i przeprowadzoną skuteczną kontrolę zasad dotyczących pamięci podręcznej

Lighthouse uznaje zasób za dostępny w pamięci podręcznej jeśli są spełnione wszystkie poniższe warunki:

  • Zasób to czcionka, obraz, plik multimedialny, skrypt lub arkusz stylów.
  • Zasób ma kod stanu HTTP 200, 203 lub 206.
  • Zasób nie ma wyraźnej zasady braku pamięci podręcznej.

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

Adres URL Lokalizacja zasobu możliwego do buforowania
TTL w pamięci podręcznej Bieżący czas przechowywania zasobu w pamięci podręcznej
Rozmiar przelewu Szacunkowa ilość danych, które użytkownicy mogliby zapisać, gdyby oznaczony zasób został zapisany 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 (w sekundach) powinna przechowywać zasób w pamięci podręcznej. W tym przykładzie ustawiany jest czas trwania (31536000), który odpowiada 1 rokowi: 60 sekund × 60 minut × 24 godziny × 365 dni = 31536000 sekund.

Stałe zasoby statyczne należy przechowywać w pamięci podręcznej przez długi czas. np. na rok lub dłużej.

Użyj no-cache, jeśli zasób się zmienia i czy aktualność jego danych ma znaczenie. ale mimo to chcesz skorzystać z zalet buforowania. Przeglądarka nadal zapisuje w pamięci podręcznej zasób ustawiony na no-cache ale najpierw sprawdza na serwerze, czy zasób jest nadal aktualny.

Dłuższy czas przechowywania danych w pamięci podręcznej nie zawsze jest lepszy. Ostatecznie to od Ciebie zależy, jaki jest optymalny czas przechowywania Twoich zasobów w pamięci podręcznej.

Istnieje wiele dyrektyw, które pozwalają określić sposób, w jaki przeglądarka przechowuje różne zasoby w pamięci podręcznej. Więcej informacji o buforowaniu zasobów w Pamięć podręczna HTTP: pierwszy wiersz obrony i Konfigurowanie buforowania HTTP w programie (ćwiczenie z programowania).

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

Aby sprawdzić, które zasoby przeglądarki uzyskuje z pamięci podręcznej, Otwórz kartę Network (Sieć) w Narzędziach deweloperskich w Chrome:

[komentarz]: <> (Poniższa lista stanowi krótki kod z web.dev, ale nie została przetłumaczona z języka angielskiego na żaden język). 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 ułatwia sprawdzenie, czy zasób został zapisany w pamięci podręcznej:

Kolumna Rozmiar.

Chrome udostępnia najbardziej żądane zasoby z pamięci podręcznej, która działa bardzo szybko, ale jest usuwana po zamknięciu przeglądarki.

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

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

Wskazówki dotyczące stosu

Drupal

Ustaw Limit wieku przeglądarki i pamięci podręcznej serwera proxy w sekcji Administracja > Konfiguracja > Programowanie. Zobacz zasoby dotyczące wydajności Drupala.

Joomla

Zobacz Pamięć podręczna.

WordPress

Zobacz Pamięć podręczna przeglądarki.

Zasoby