КейсыРастИИшка
Разработка · скорость сайта

Кэширование сайта: быстро показать правильную версию

Условная компания обновила цену на сайте. Разработчик видит новую, директор — старую, клиент присылает скриншот третьего состояния. Всем предлагают очистить кэш. На десятый раз становится понятно: это уже не инструкция пользователю, а часть бизнес-модели. Сайт быстро доставляет информацию, но иногда не ту, которую компания собиралась показать.

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

Локальный архив рядом с пользователем хранит документы и получает обновлённую версию из общего источника
Редакционная иллюстрация к теме статьи; не фотография клиентского проекта.

Словом «кэш» называют несколько разных мест

Ресурс может храниться в браузере, промежуточной системе доставки, серверном слое или собственной логике приложения. В руководстве MDN по HTTP caching различаются частные и общие кэши: первый связан с конкретным клиентом, второй может обслуживать разных пользователей. Принципиальная разница — кому разрешено повторно получить сохранённый ответ.

Когда разработчик говорит «я очистил кэш», полезно уточнить слой, ключ и объект. Сброс серверной копии не обязательно удаляет файл, который уже лежит в браузере посетителя. Обновление HTML не гарантирует, что браузер получил совместимый JavaScript. А service worker может обслуживать запросы по собственной стратегии, которую обычные HTTP-заголовки не описывают целиком.

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

Начните с карты слоёв: браузер, CDN или обратный прокси, приложение, база и возможный service worker. Не каждый сайт использует всё перечисленное. Карта нужна, чтобы команда знала, где принимается решение о повторном ответе. Иначе при инциденте люди будут по очереди нажимать знакомые кнопки очистки, надеясь встретить нужный кэш случайно.

Карта слоёв помогает определить, какой кэш обслужил запрос. Не каждый сайт использует все показанные слои.
Карта слоёв помогает определить, какой кэш обслужил запрос. Не каждый сайт использует все показанные слои.

Свежесть ресурса не равна свежести информации

Кэш считает ответ пригодным к повторному использованию по заданным правилам. Он не знает, что маркетолог только что отменил акцию. Срок жизни описывает техническую допустимость хранения, а бизнес-актуальность требует согласованного процесса обновления. Именно поэтому для цены, остатков и публичной статьи могут быть разные решения даже на одном домене.

RFC 9111 задаёт семантику HTTP-кэширования, включая свежесть, повторную проверку и директивы управления. Для практики важно не заучивать все названия, а понять договор: когда сохранённый ответ можно использовать без обращения к источнику и когда нужна проверка. Конкретная CDN или приложение могут иметь дополнительные настройки, которые также следует учитывать.

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

Согласуйте допустимое устаревание с владельцем данных. Если цена меняется вручную раз в неделю, это не означает, что её можно показывать старой ещё неделю после изменения. Допустимый интервал — отдельное бизнес-решение. Техническая команда должна понимать, кто запускает обновление и как проверить, что новый ответ доступен на пути реального пользователя.

Три похожих заголовка решают разные задачи

Частая ошибка — считать no-cache запретом на хранение. В обычной семантике HTTP он требует проверки перед повторным использованием сохранённого ответа. no-store задаёт запрет на хранение ответа. private ограничивает его частным кэшем. Эти директивы не стоит смешивать в случайный набор «для надёжности»: нужна осмысленная политика и проверка всех слоёв.

МеханизмЧто означает в общей модели HTTPЧто всё равно проверить
max-ageДопустимый возраст свежего ответаКласс данных, единицы времени, настройки посредника
no-cacheПроверка перед повторным использованиемПоддержку валидатора и фактический ответ
no-storeОтвет не должен сохраняться кэшемРеальную конфигурацию и прежние сохранённые версии
privateОтвет предназначен частному кэшуПерсонализацию и исключение общего хранения
ETagВалидатор представленияИзменение значения вместе с содержимым
VaryУчастие указанных заголовков запроса в выборе вариантаЧто разные ответы не смешиваются

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

В руководстве web.dev по HTTP cache предлагается использовать HTTP-кэш, чтобы избегать ненужной передачи ресурсов. Из этого не следует, что кэширование исправляет тяжёлый JavaScript или изображение неправильного размера. Оно помогает повторно использовать уже полученное; первый визит всё ещё должен скачать и обработать необходимые данные.

Почему новое имя файла надёжнее просьбы обновить страницу

Для неизменяемой статики удобна версия в URL: например, имя с хэшем содержимого. Изменился файл — изменился адрес. Старый ресурс остаётся тем, чем был, а новый HTML ссылается на новую версию. Это позволяет долго хранить конкретный объект без предположения, что его содержимое однажды незаметно перепишут.

Имя «app-final.js» не является версией, если файл регулярно заменяют по тому же адресу. Не помогает и ручное «v2», если кто-то забудет обновить параметр у одной страницы. Версионирование лучше связывать с процессом сборки. При этом нужно проверить, что инфраструктура действительно различает нужные URL и не игнорирует используемый параметр при формировании ключа.

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

Не изменяйте содержимое уже опубликованного файла, если дали ему политику длительного неизменяемого хранения. Для исправления выпускайте новый адрес и обновляйте ссылки. Иначе часть пользователей продолжит видеть старый объект, а часть — новый, хотя URL одинаковый. Отчёт о «неповторяемой ошибке» после этого будет вполне повторяемым для конкретного браузера клиента.

Кэширование делает порядок релиза важным

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

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

Управляемую очистку следует делать адресно, когда это возможно. Полный сброс всех объектов способен создать всплеск запросов к источнику и замедлить повторные посещения. Если требуется общий сброс, оцените последствия и проверьте восстановление. Операция «очистить всё» понятна в интерфейсе, но её понятность не равна безвредности.

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

Порядок релиза предотвращает ссылки на ещё недоступные файлы; возврат проверяется вместе с зависимостями.
Порядок релиза предотвращает ссылки на ещё недоступные файлы; возврат проверяется вместе с зависимостями.

Холодный визит нельзя лечить тёплым отчётом

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

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

LCP описывает появление крупнейшего содержательного элемента в окне просмотра; в практической работе нужно установить сам элемент, а не оптимизировать случайные файлы. Проверенный повторный кэш может уменьшить загрузку изображения, но тяжёлая логика отрисовки всё ещё задержит появление содержимого. Google Search Central описывает Core Web Vitals как набор метрик реального пользовательского опыта; лабораторный запуск не заменяет полевые данные.

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

Как проверить политику на своём сайте

Для начала откройте инструменты разработчика и посмотрите ответ нужного ресурса: статус, Cache-Control, ETag, Last-Modified, Vary и сведения о доставке. Важно отличать заголовки запроса от ответа. Включённая опция отключения кэша в DevTools меняет сценарий проверки; после диагностики её нужно осознанно выключить для обычного повторного посещения.

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

Команда может проверить заголовки отдельным запросом, например curl -I https://example.com/assets/app.abc123.js. Адрес здесь демонстрационный. Такой запрос помогает увидеть политику, но не доказывает, что реальный браузер использует нужную копию и что весь путь работает. У посредника могут быть отдельные правила, а метод HEAD — особенности реализации.

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

Что делать, когда разные люди видят разные версии

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

Сравните HTML и связанные адреса. Если документ старый, выясняйте, какой слой его обслужил. Если документ новый, а стиль старый, проверьте версию ссылки и фактическую политику ресурса. Если данные отличаются при одинаковой сборке, причина может быть в API, персонализации или источнике, а не в статике. Кэш — популярный подозреваемый, но алиби у него иногда есть.

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

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

Холодный визит, повторный визит и обновление дают разные наблюдения; их нельзя смешивать в один результат скорости.
Холодный визит, повторный визит и обновление дают разные наблюдения; их нельзя смешивать в один результат скорости.

Какая памятка должна остаться после настройки

Для сопровождения сохраните таблицу классов ресурсов: где расположен объект, кто его обновляет, какая политика применяется, как выпускается новая версия и чем проверяется результат. Отдельно укажите персональные ответы и исключения. Владелец контента должен понимать, когда изменение цены становится видимым, даже если он никогда не открывал конфигурацию прокси.

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

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

За что платит бизнес: меньше передачи, предсказуемее изменения

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

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

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

Для доработки сайта хорошая постановка звучит так: определить классы ресурсов, допустимую свежесть, порядок выпуска, проверку первого и повторного визита и возврат версии. Это конкретнее просьбы «включить кэш». Цель — чтобы сайт быстро показывал правильное содержимое, а команда могла объяснить, почему оно правильное и как его безопасно обновить.

Частые вопросы

Чем no-cache отличается от no-store?

В общей модели HTTP no-cache требует проверки перед повторным использованием сохранённого ответа, а no-store запрещает его хранение. Реальную политику нужно проверять с учётом посредников и приложения.

Почему после обновления показывается старая версия?

Причина может быть в браузерном или управляемом кэше, старом HTML, неверной версии ссылки, service worker либо источнике данных. Диагностику начинают с URL, времени, ресурсов и фактических ответов.

Поможет ли кэширование первому визиту?

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

Можно ли долго хранить JavaScript и изображения?

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

Один Lighthouse подтверждает скорость сайта?

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

Превратить сценарий сайта в рабочую заявку

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

Посмотреть разработку сайтов ↗

Разбор лендинга с калькулятором ↗

Сравниваете несколько направлений? Соберите бриф по задаче.