Обслуживайте статические ресурсы сайта с помощью эффективной политики кеширования
Published on • Updated on
HTTP-кеширование может ускорить загрузку вашей страницы при повторных посещениях.
Когда браузер запрашивает ресурс, сервер, предоставляющий ресурс, может сообщить браузеру, как долго он должен временно хранить или кешировать ресурс. При любом последующем запросе этого ресурса браузер использует свою локальную копию, а не получает ее из сети.
Причины плохих результатов проверки политики кеширования в Lighthouse
Lighthouse отмечает все статические ресурсы, которые не кешируются:
![Скриншот проверки Lighthouse «Обслуживание статических ресурсов с эффективной политикой кеширования»](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vtRp9i6zzD8EDlHYkHtQ.png?auto=format)
Lighthouse считает ресурс кешируемым, если выполняются все следующие условия:
- ресурс — это шрифт, изображение, медиафайл, скрипт или таблица стилей;
- ресурс имеет код состояния HTTP
200
,203
или206
; - у ресурса нет явной политики отсутствия кеширования.
Если страница не проходит проверку, Lighthouse отображает результаты в таблице с тремя столбцами:
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:
- Press
Control+Shift+J
(orCommand+Option+J
on Mac) to open DevTools. - Click the Network tab.
Столбец Size в Chrome DevTools может помочь вам убедиться, что ресурс был кеширован:
![Столбец Size.](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dc7QffBFDTcTHyUNNevi.png?auto=format)
Chrome обслуживает наиболее запрашиваемые ресурсы из кеша памяти, который работает очень быстро, но очищается при закрытии браузера.
Чтобы убедиться, что заголовок ресурса Cache-Control
установлен должным образом, проверьте данные его HTTP-заголовка:
- Щелкните URL-адрес запроса в столбце Name таблицы запросов.
- Щелкните вкладку Headers.
![Проверка заголовка Cache-Control на вкладке Headers](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dGDjkwsoUBwFVLYM0sVy.png?auto=format)
Cache-Control
на вкладке Headers.Рекомендации по стекам
Drupal
Установите максимальный возраст кеша браузера и прокси-сервера на странице Administration > Configuration > Development. См. статью «Сведения по оптимизации производительности Drupal».
Joomla
См. статью «Кеш».
WordPress
См. статью «Кеширование в браузере».
Ресурсы
Updated on • Improve article