HTTP-кэширование может ускорить загрузку страницы при повторных посещениях.
Когда браузер запрашивает ресурс, сервер, предоставляющий этот ресурс, может сообщить браузеру, как долго ему следует временно хранить или кэшировать ресурс. Для любого последующего запроса этого ресурса браузер использует его локальную копию, а не получает ее из сети.
Почему аудит политики кэширования Lighthouse терпит неудачу
Lighthouse помечает все статические ресурсы, которые не кэшируются:
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:
- Нажмите
Control + Shift + J(илиCommand + Option + Jна Mac), чтобы открыть DevTools. - Откройте вкладку «Сеть» .
Столбец «Размер» в Chrome DevTools может помочь вам убедиться, что ресурс кэширован:
Chrome обслуживает наиболее запрашиваемые ресурсы из кэша памяти, который работает очень быстро, но очищается при закрытии браузера.
Чтобы убедиться, что заголовок Cache-Control ресурса установлен должным образом, проверьте данные его HTTP-заголовка:
- Щелкните URL-адрес запроса в столбце «Имя» таблицы «Запросы».
- Откройте вкладку Заголовки .
Cache-Control на вкладке «Заголовки» . Рекомендации для конкретного стека
Друпал
Установите максимальный возраст кэша браузера и прокси на странице «Администрирование» «Конфигурация» «Разработка» . Прочтите о кэше Drupal и оптимизации производительности .
Джумла
См . Кэш .
WordPress
См. Кэширование браузера .