Обслуживайте статические ресурсы с помощью эффективной политики кэширования

HTTP-кэширование может ускорить загрузку страницы при повторных посещениях.

Когда браузер запрашивает ресурс, сервер, предоставляющий этот ресурс, может сообщить браузеру, как долго ему следует временно хранить или кэшировать ресурс. Для любого последующего запроса этого ресурса браузер использует его локальную копию, а не получает ее из сети.

Почему аудит политики кэширования Lighthouse терпит неудачу

Lighthouse помечает все статические ресурсы, которые не кэшируются:

Снимок экрана статических ресурсов Lighthouse Serve с эффективным аудитом политики кэширования.

Lighthouse считает ресурс кэшируемым, если соблюдены все следующие условия:

  • Ресурс представляет собой шрифт, изображение, медиафайл, скрипт или таблицу стилей.
  • Ресурс имеет код состояния HTTP 200 , 203 или 206 .
  • Ресурс не имеет явной политики отсутствия кэширования.

Когда страница не проходит аудит, Lighthouse отображает результаты в таблице с тремя столбцами:

URL-адрес Расположение кэшируемого ресурса
Срок жизни кэша Текущая продолжительность кэширования ресурса
Размер передачи Оценка данных, которые ваши пользователи сохранили бы, если бы помеченный ресурс был кэширован.

Как кэшировать статические ресурсы с помощью HTTP-кеширования

Настройте свой сервер для возврата заголовка HTTP-ответа Cache-Control :

Cache-Control: max-age=31536000

Директива max-age сообщает браузеру, как долго ему следует кэшировать ресурс в секундах. В этом примере устанавливается продолжительность 31536000 , что соответствует 1 году: 60 секунд × 60 минут × 24 часа × 365 дней = 31536000 секунд.

Неизменяемые статические ресурсы следует кэшировать в течение длительного времени, например года или дольше.

Используйте no-cache если ресурс изменяется и актуальность имеет значение, но вы все равно хотите получить некоторые преимущества в скорости от кэширования. Браузер по-прежнему кэширует ресурс, для которого установлено значение no-cache , но сначала проверяет сервер, чтобы убедиться, что ресурс все еще актуален.

Более длительный срок кэша не всегда лучше. В конечном счете, вам решать, какова оптимальная продолжительность кэширования для ваших ресурсов.

Существует множество директив для настройки кэширования браузером различных ресурсов. Узнайте больше о кэшировании ресурсов в руководстве «Кэш HTTP: ваша первая линия защиты» и кодовой лаборатории «Настройка поведения кэширования HTTP» .

Как проверить кешированные ответы в Chrome DevTools

Чтобы увидеть, какие ресурсы браузер получает из своего кеша, откройте вкладку «Сеть» в Chrome DevTools:

[комментарий]: <> (Следующий список представляет собой короткий код с сайта web.dev, но он не был переведен с английского ни на один язык.) 1. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac), чтобы открыть Инструменты разработчика. 2. Откройте вкладку Сеть .

Столбец «Размер» в Chrome DevTools может помочь вам убедиться, что ресурс кэширован:

Столбец «Размер».

Chrome обслуживает наиболее запрашиваемые ресурсы из кэша памяти, который работает очень быстро, но очищается при закрытии браузера.

Чтобы убедиться, что заголовок Cache-Control ресурса установлен должным образом, проверьте данные его HTTP-заголовка:

  1. Щелкните URL-адрес запроса в столбце «Имя» таблицы «Запросы».
  2. Откройте вкладку Заголовки .
Проверка заголовка Cache-Control на вкладке «Заголовки»
Проверка заголовка Cache-Control на вкладке «Заголовки» .

Рекомендации для конкретного стека

Друпал

Установите максимальный возраст кэша браузера и прокси-сервера на странице «Администрирование » > «Конфигурация» > «Разработка» . См. Ресурсы производительности Drupal .

Джумла

См. Кэш .

WordPress

См. Кэширование браузера .

Ресурсы