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

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

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

Причины плохих результатов проверки политики кеширования в Lighthouse #

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

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

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

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

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

Настройте свой сервер так, чтобы он возвращал заголовок HTTP-ответа Cache-Control:

Cache-Control: max-age=31536000

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

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

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

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

Существует множество директив для настройки того, как браузер кеширует различные ресурсы. Дополнительные сведения о кешировании ресурсов см. в статьях «HTTP-кеширование: руководство по первой линии обороны» и «Codelab для настройки поведения HTTP-кеширования».

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

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

1. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).
2. Перейдите на вкладку Сеть.

Столбец Size в Chrome DevTools может помочь вам убедиться, что ресурс был кеширован:

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

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

1. Щелкните URL-адрес запроса в столбце Name таблицы запросов.
2. Щелкните вкладку Headers.

Рекомендации по стекам #

Drupal #

Установите максимальный возраст кеша браузера и прокси-сервера на странице Administration > Configuration > Development. См. статью «Сведения по оптимизации производительности Drupal».

Joomla #

См. статью «Кеш».

WordPress #

См. статью «Кеширование в браузере».

Ресурсы #

• Исходный код проверки Serve static assets with an efficient cache policy (Обслуживайте статические ресурсы сайта с помощью эффективной политики кеширования).
• Спецификация Cache-Control.
• Описание заголовка Cache-Control (MDN).