Как настроить кеширование статических файлов и проверить обновление

Кеширование статических файлов уменьшает повторную загрузку CSS, скриптов и картинок. Настройте хранение так, чтобы обновления доходили до посетителей.

Что должно получиться

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

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

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

Из чего это складывается

Начните с ответа на вопрос, кто отдаёт файл: веб-сервер, приложение, объектное хранилище или внешний сервис. Правило, добавленное в CMS, не обязательно действует на изображение с другого домена. А заголовок исходного сервера может изменяться промежуточным слоем.

Как это сделать по шагам

1. Составьте список проверяемых ресурсов. Возьмите адреса CSS, скрипта и картинки из опубликованной страницы. Отметьте, меняется ли адрес при изменении содержимого и кто управляет выдачей файла.
2. Снимите исходные данные. В инструментах разработчика откройте таблицу загрузок, перезагрузите страницу и изучите заголовки ответа выбранного ресурса. Сохраните адрес, Cache-Control и признаки проверки версии.
3. Выберите политику обновления. Для неизменяемых адресов версий и файлов, которые заменяются по прежнему пути, нужны разные условия. Сначала определите способ выпуска, затем срок хранения.
4. Примените правило в нужном слое. Меняйте конфигурацию того сервиса, который действительно выдаёт файл. Используйте документацию вашего сервера или хостинга; синтаксис настройки у разных систем отличается.
5. Проверьте повторное посещение. С разрешённым браузерным кешем снова откройте страницу и сравните загрузки. Определите, использована ли сохранённая копия, выполнена ли сверка или файл передан заново.
6. Выпустите контролируемое изменение. На тестовой площадке измените узнаваемую часть ресурса и подключение, если адреса версионируются. Откройте страницу в уже использованном браузере, сохранив его прежний кеш.
7. Проверьте результат и сохраните правило. Убедитесь, что видна новая версия, соседние страницы работают и старые подключения не исчезли раньше времени. Запишите место настройки и способ проверки для следующего выпуска.

Как выбрать способ обновления файлов

Адрес меняется вместе с содержимым

При сборке сайта файл может получать имя с отпечатком содержимого. Новый CSS публикуется под новым адресом, а прежний файл остаётся прежним. Обновлённый HTML указывает на новую версию. Такой подход позволяет хранить неизменяемые ресурсы долго без ожидания, пока прежняя копия потеряет свежесть.

Сначала загрузите новые файлы, затем опубликуйте страницу, которая их подключает. Иначе посетитель успеет получить ссылку на ещё отсутствующий ресурс. Старые версии не удаляйте до проверки зависимых страниц и предусмотренного порядка возврата: они могут понадобиться уже открытым вкладкам и прежней версии HTML.

Директива immutable сообщает, что ответ не изменяется, пока остаётся свежим. Она подходит к продуманной схеме неизменяемых адресов. Если содержимое регулярно перезаписывается по тому же пути, такое обещание расходится с реальным выпуском и может задерживать появление правок.

Содержимое заменяется по тому же адресу

Если адрес не меняется, заранее решите, как быстро посетитель должен увидеть правку. Можно требовать сверку сохранённой копии перед повторным использованием. Для этого применяется Cache-Control: no-cache. Несмотря на название, директива допускает хранение: она требует проверить актуальность перед использованием сохранённого ответа.

Не путайте её с no-store, которая запрещает хранить ответ. Эти условия решают разные задачи. Не стоит запрещать хранение всей статики только потому, что одна картинка обновлялась с задержкой. Сначала проверьте её адрес, правила выдачи и слой, который продолжает возвращать прежнюю копию.

Не назначайте общий срок наугад. Для декоративной картинки, CSS шаблона и файла с часто меняющимися данными цена задержки различается. Если у команды нет согласованного порядка обновления, начните с проверяемой схемы и зафиксируйте допустимую задержку для каждого класса ресурсов.

Что означают повторная загрузка и ответ 304

Сохранённый файл может быть использован без повторной передачи с сервера. В другом случае браузер связывается с сервером и сверяет копию. Ответ 304 Not Modified означает подтверждение актуальности сохранённой версии; тело файла заново не передаётся. Это нормальная часть работы кеша.

При изменении ресурса сервер должен отдавать его актуальное содержимое и корректные сведения для следующей сверки. Не устанавливайте один постоянный ETag на все версии файла. Если проверяете обновление, сравните не только код ответа, но и фактическое содержимое: нужный цвет, изображение или поведение.

Для диагностики удобно временно отключить браузерный кеш в инструментах разработчика и сравнить результат. Затем верните обычный режим: проверка только с отключённым кешем не показывает, что получит повторный посетитель. Учитывайте также, что восстановление вкладки из истории — отдельный сценарий, а не точная копия перезагрузки.

Если перед сервером стоит CDN

Сопоставьте настройки исходного сервера и промежуточного хранения. Очистка копии на CDN не удаляет уже сохранённый файл из браузера посетителя. Поэтому срочное исправление ресурса с долгим сроком свежести часто требует нового адреса и обновления подключения в HTML.

Проверьте всю цепочку выпуска: новый файл существует, страница подключает его, промежуточный слой отдаёт обновлённую страницу. Если на сервере уже новая версия, а HTML по-прежнему содержит прежний путь, работа с кешем самого CSS не решит проблему.

Для служебного кеша приложения и service worker могут действовать собственные правила. Если сайт использует такой механизм, включите его в план проверки. Не обещайте, что изменение одного HTTP-заголовка автоматически очистит любое хранилище, созданное кодом приложения.

Общие правила публичной статики не переносите на личный кабинет. Директива private ограничивает использование ответа общим кешем, но не означает полного запрета хранения в браузере. Политику персональных страниц определяют отдельно от картинок и стилей, с учётом данных и поведения приложения.

Частые ошибки

• Менять файл, сохраняя долгоживущий адрес без проверки обновления. На устройстве автора правка видна после очистки кеша, а у посетителя остаётся прежний вариант.
• Добавлять случайный параметр при каждом открытии. Адрес постоянно меняется, и повторное использование теряет смысл. Версия должна меняться вместе с содержимым.
• Проверять только главную страницу. Внутренний шаблон может подключать другой файл или старое имя ресурса.
• Считать отсутствие Cache-Control запретом хранения. Без явного правила кеш может применять собственную оценку свежести. Проверяйте фактические условия ответа.
• Удалять старые ресурсы сразу после выпуска. Уже открытая страница или сохранённый HTML могут продолжать ссылаться на них.
• Обещать одинаковое ускорение каждому посетителю. Результат зависит от исходного состояния кеша, сети, объёма файлов и других частей загрузки.

Как проверить

• Для выбранных CSS, скрипта и картинки записаны фактические адреса и заголовки.
• Понятно, где задаётся каждое правило: сервер, приложение или CDN.
• Срок свежести согласован со способом выпуска изменённых файлов.
• Проверены первое открытие и повторное посещение с обычным кешем.
• Контрольная правка появилась у браузера, который уже видел прежнюю версию.
• Новый HTML не ссылается на отсутствующие ресурсы.
• Сохранён способ возврата к предыдущей рабочей версии.

Основные механизмы описаны в руководстве MDN по кешированию, директивы — в справке Cache-Control. Правила протокола приведены в RFC 9111, наблюдение загрузок — в документации инструментов Chrome.

До изменения правил сохраните резервную копию сайта. Проверку подключений проводите по материалу CSS и HTML, а влияние на загрузку оценивайте через измерение скорости. Помощь с конфигурацией можно искать в разделе Разработка.

Для разных экранов проверьте адаптивные изображения, а смену файлов и правил кеша внесите в журнал изменений сайта.

Вопросы и ответы

Нужно ли запрещать кеш, чтобы правки появлялись сразу?

Не всегда. Для ресурсов с новым адресом при каждом изменении можно сохранить повторное использование прежних файлов. Если адрес постоянный, настройте подходящую проверку актуальности и испытайте выпуск на браузере с уже сохранённой копией.

Почему после очистки кеша у меня всё работает, а у других нет?

Вы убрали прежнюю локальную копию и проверили другой сценарий. Посетитель может продолжать использовать свежий по правилам, но устаревший по содержимому файл. Проверьте способ смены адреса и настройки срока свежести.

Означает ли no-cache полный запрет сохранения?

Нет. Ответ можно хранить, но перед повторным использованием требуется проверить его актуальность. Для запрета хранения применяется no-store. Выбирайте условие по задаче, а не по бытовому смыслу названия.

Ответ 304 — это ошибка загрузки?

Нет. Он подтверждает, что сохранённая версия подходит для повторного использования. Проверяйте, соответствует ли копия ожидаемому содержимому и правильно ли сервер меняет сведения о ресурсе при обновлении.

Можно ли назначить одинаковый срок всем файлам?

Технически общее правило возможно, но сначала разделите неизменяемые версии, файлы с постоянным адресом и персональные ответы. Без этого один срок может либо мешать обновлениям, либо приводить к лишней передаче данных.

Очистка CDN обновит файлы в браузерах посетителей?

Она затрагивает промежуточный слой, а не все локальные копии. Если браузер вправе использовать свой файл без связи с сервером, продумайте новый адрес ресурса и своевременное обновление HTML, который его подключает.

Достаточно ли проверить заголовок после изменения настройки?

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