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

Published on Updated on

Translated to: English, Español, Português, 한국어

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

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

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

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

Скриншот проверки Lighthouse «Обслуживание статических ресурсов с эффективной политикой кеширования»

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

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

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

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

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

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

Cache-Control: max-age=31536000

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

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

Один из рисков длительного использования кеша заключается в том, что ваши пользователи не увидят обновленные статические файлы. Вы можете избежать этой проблемы, настроив свой инструмент сборки для встраивания хеша в имена файлов статических ресурсов, чтобы каждая версия была уникальной, и предложив браузеру получать новую версию с сервера. (Чтобы узнать, как встраивать хеши с помощью webpack, см. руководство по кешированию webpack.)

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

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

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

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

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

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Network tab.

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

Столбец Size.

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

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

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

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

Drupal

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

Joomla

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

WordPress

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

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.