Оптимизация

Настройка кэша браузера

Рекомендации

Включите для своего сервера кеширование в браузере. Продолжительность хранения статических ресурсов в кеше должна составлять не менее недели. Внешние ресурсы (объявления, виджеты и др.) должны храниться не менее 1 дня. Рекомендуется использовать следующие установки для всех кешируемых ресурсов:

  • В заголовке Expires следует указать период от недели (минимум) до года (рекомендуется). Лучше использовать Expires, чем Cache-Control: max-age, так как он более широко поддерживается. Не устанавливайте срок больше одного года: это является нарушением правил RFC.
  • Если вы точно знаете дату будущего изменения ресурса, можно установить более короткий период. Если же конкретная дата неизвестна, лучше использовать более продолжительный срок и цифровые отпечатки URL (см. ниже).

Заголовки Expires и Cache-Control: max-age

Эти заголовки указывают, в течение какого периода браузер может использовать кешированные ресурсы, не запрашивая на веб-сервере их возможные обновления. Эти "сильные" заголовки действуют в обязательном порядке. После их установки и загрузки ресурса браузер не будет отправлять запросы GET на веб-сервер до истечения срока действия или очистки кеша пользователем.

Заголовки Last-Modifed и ETag

Эти заголовки указывают, как браузер должен устанавливать тождественность файлов при кешировании. В заголовке Last-Modified для этого используется дата. Заголовок ETag использует любой уникальный идентификатор ресурса (чаще всего это версия файла или хеш контента). Last-Modified – "слабый" заголовок, так как браузер применяет эвристические алгоритмы, чтобы определить, запрашивать ли элемент из кеша. 

Эти заголовки позволяют браузеру эффективно обновлять кешированные ресурсы, отправляя запросы GET каждый раз, когда пользователь явным образом перезагружает страницу. Условные запросы GET не возвращают полный ответ, если ресурс не изменился на сервере, и таким образом обеспечивают меньшую задержку, чем полные запросы.

Какие заголовки кеширования лучше использовать?

Для всех кешируемых ресурсов нужно обязательно указывать один заголовок из пары Expires и Cache-Control max-age, а также один заголовок из пары Last-Modified и ETag. Использовать и Expires, и Cache-Control: max-age излишне, как и указывать Last-Modified и ETag одновременно.

Как использовать цифровые отпечатки URL

Если ресурс время от времени изменяется, браузер может кешировать его до момента изменения, о чем сервер автоматически сообщит браузеру. Для этого каждой версии ресурса присваивается уникальный URL. Например, у вас есть ресурс под названием my_stylesheet.css. Мы можем переименовать этот файл, назвав его my_stylesheet_fingerprint.css. При изменении ресурса изменяется и его цифровой отпечаток, и, следовательно, его URL. Как только URL изменился, браузер повторно загружает ресурс. Цифровые отпечатки позволяют использовать длительные сроки действия, даже если ресурс часто изменяется. 

Чаще всего для создания цифровых отпечатков используется 128-битное шестнадцатеричное число, представляющее собой закодированный хеш содержимого файла. 

Другой способ – создавать отдельный каталог для каждой версии приложения и размещать в нем все объекты. Недостаток такого подхода заключается в том, что если объект не изменился при переходе к новой версии, его URL все равно обновится, что приведет к необходимости повторной загрузки. Использование хеша контента позволяет избежать этой проблемы, но представляет чуть большую сложность.


Подписка на блог Подпишись на новые материалы от US STUDIO и вы не пропустите интересные статьи от нашей компании