Skip to content
Обучение Измерение Блог Case studies О сайте
Содержание
  • Причины плохих результатов проверки политики кеширования в Lighthouse
  • Как кешировать статические ресурсы с помощью HTTP-кеширования
  • Как проверить кешированные ответы в Chrome DevTools
  • Рекомендации по стекам
    • Drupal
    • Joomla
    • WordPress
  • Ресурсы

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

May 2, 2019 — Обновлено Oct 4, 2019
Available in: Español, 한국어, Português, English
Appears in: Аудиты производительности
Содержание
  • Причины плохих результатов проверки политики кеширования в Lighthouse
  • Как кешировать статические ресурсы с помощью HTTP-кеширования
  • Как проверить кешированные ответы в Chrome DevTools
  • Рекомендации по стекам
    • Drupal
    • Joomla
    • WordPress
  • Ресурсы

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. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).
  2. Перейдите на вкладку Сеть.

Столбец 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 #

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

Ресурсы #

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

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Web Fundamentals
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.