Что такое браузерный кэш?

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

Как настроить кэширование?

Кэшем управляет заголовок Cache-Control, который сервер отдаёт с каждым файлом, например «Cache-Control: public, max-age=31536000» (хранить год). Настраивается это на стороне сервера или хостинга, а на многих CMS — плагином. Статике задают большой срок, HTML — короткий или отключают кэш.

Как обновить файл, если он закэширован надолго?

Используют версионирование имени: к адресу файла добавляют метку версии, например style.css?v=12 или style.a1b2c3.css. Когда вы меняете файл, вы меняете метку — для браузера это новый адрес, и он скачивает обновлённую версию. Так совмещаются долгий кэш и мгновенное обновление. Обычно это встроено в CMS и сборщики.

Чем браузерный кэш отличается от кэша CDN?

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

Что означают директивы no-cache, no-store и immutable?

no-cache, вопреки названию, не запрещает кэш, а требует сверять с сервером перед использованием. no-store — полный запрет хранить файл (для чувствительных данных). immutable говорит «файл не изменится, не переспрашивай» — его ставят версионированной статике. Идеал для неизменных CSS и картинок с версией в имени: public, max-age=год, immutable.

Что такое ETag и код 304 Not Modified?

ETag — «отпечаток» файла (хэш содержимого), который сервер отдаёт вместе с ним. Когда кэш устаревает, браузер не качает файл целиком, а спрашивает, актуальна ли его версия. Если файл не менялся, сервер отвечает коротким «304 Not Modified» без тела, и браузер использует свою копию. Так даже при истёкшем кэше повторная загрузка почти ничего не весит.

Браузерный кэш (Cache-Control)

Q: Что кэшировать надолго, а что нет?

Надолго (месяцы, год) кэшируют статику, которая меняется редко: картинки, шрифты, CSS и JS. А HTML-страницы кэшируют коротко или вовсе без кэша, потому что их содержимое обновляется и посетитель должен видеть свежую версию. Правило: чем реже файл меняется, тем дольше его можно держать в кэше.

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

Как это работает

При первом заходе браузер скачивает все файлы страницы. Если сервер разрешил их кэшировать, браузер сохраняет копии у себя. На повторном визите (или при переходе на соседнюю страницу того же сайта) он не идёт в сеть за уже знакомыми файлами, а берёт их из локального кэша. Результат — повторные открытия летают, нагрузка на сервер падает, а посетитель видит сайт почти мгновенно. Управляет этим заголовок Cache-Control, который сервер отдаёт вместе с каждым файлом.

Cache-Control: public, max-age=31536000

Здесь max-age=31536000 — срок хранения в секундах (тут год). То есть «эту картинку можно держать в кэше год, не переспрашивая сервер».

На повторном заходе статика берётся с диска — в сеть идём разве что за свежим HTML.

Что кэшировать надолго, а что нет

📦 Статика — надолго

Картинки, шрифты, CSS и JS меняются редко. Им ставят большой срок (месяцы, год) — они почти не качаются повторно.

📄 HTML — коротко или без кэша

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

Логика простая: чем реже файл меняется, тем дольше его можно держать в кэше. Динамический HTML обновляется постоянно — его кэшируют осторожно. Неизменную статику — наоборот, надолго.

А если файл всё-таки изменился?

Тут возникает вопрос: если CSS закэширован на год, как показать посетителю обновлённую версию? Ответ — версионирование имени файла. К адресу добавляют метку версии, например style.css?v=12 или style.a1b2c3.css. Поменяли файл — поменяли метку, и для браузера это уже новый адрес, который он скачает заново. Так вы получаете и долгий кэш, и мгновенное обновление, когда нужно. Этот приём обычно встроен в CMS и сборщики.

⚠️ Не путайте браузерный кэш с кэшем CDN и кэшем страниц на сервере. Браузерный кэш — на устройстве посетителя (ускоряет повторные визиты конкретного человека). CDN-кэш — на узлах сети (ускоряет первый визит за счёт близости). Серверный кэш — экономит генерацию страницы. Они дополняют друг друга.

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

Откройте инструменты разработчика (вкладка «Сеть»), обновите страницу и посмотрите заголовки ответа для файлов — там должна быть строка Cache-Control с разумным max-age для статики. Если у картинок и стилей кэш не задан или стоит no-cache — браузер каждый раз качает их заново, и это легко исправить. Наличие кэширования также отмечают PageSpeed и сервисы скорости («задайте эффективный срок жизни кэша»).

⚡

Кэш — про повторные визиты, а первая загрузка ускоряется другими приёмами: сжатием gzip/Brotli, ленивой загрузкой и облегчением картинок. Общая картина — в статье как ускорить загрузку сайта.

Директивы Cache-Control: что значат

У заголовка Cache-Control несколько частей, и полезно понимать основные. max-age задаёт срок хранения в секундах (max-age=31536000 — год). public разрешает кэшировать файл кому угодно, включая промежуточные узлы и CDN; private — только в браузере конкретного пользователя (для персональных страниц). no-cache, вопреки названию, не запрещает кэш, а требует каждый раз переспрашивать сервер, не изменился ли файл, прежде чем взять из кэша. no-store — вот это уже полный запрет, ничего не сохранять (для чувствительных данных). А immutable говорит «этот файл не изменится никогда, даже не переспрашивай» — его ставят версионированной статике для максимальной скорости. Комбинация public, max-age=год, immutable — идеал для неизменных CSS и картинок с версией в имени.

ETag и Last-Modified: умная сверка

Что происходит, когда срок кэша истёк, но файл на самом деле не менялся? Качать заново жалко. Для этого есть условные запросы. Сервер при отдаче файла добавляет «отпечаток» — ETag (хэш содержимого) или Last-Modified (дату изменения). Когда кэш устаревает, браузер не качает файл целиком, а спрашивает: «у меня версия с таким отпечатком, она ещё актуальна?». Если файл не менялся, сервер отвечает коротким «304 Not Modified» без тела — и браузер использует свою копию. Получается, даже при истёкшем кэше повторная загрузка почти ничего не весит. Работает это автоматически, но знать механизм полезно: код 304 в инструментах разработчика — это хорошо, значит сверка работает.

Три уровня кэширования

Кэш на сайте бывает на трёх уровнях, и их легко перепутать. Браузерный кэш — на устройстве посетителя, ускоряет его личные повторные визиты (о нём вся статья). Кэш CDN — на узлах сети по миру, отдаёт статику из ближайшей точки, ускоряя в том числе первый визит. Серверный кэш страниц — сервер хранит уже собранный HTML, чтобы не генерировать его заново при каждом запросе (важно для тяжёлых CMS). Эти уровни не конкурируют, а складываются: CDN снимает нагрузку с сервера, серверный кэш ускоряет генерацию, браузерный — повторные открытия. Настроенные вместе, они дают по-настоящему быстрый сайт.

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

Их несколько, и все типовые. Закэшировать HTML надолго — и посетитель залипает на старой версии страницы, не видя обновлений (HTML кэшируют коротко). Поставить no-cache или вовсе ничего на статику — браузер каждый раз качает картинки и стили заново, теряя весь смысл кэша. Кэшировать надолго без версионирования — обновили CSS, а пользователи со старой закэшированной версией видят сломанную вёрстку, пока кэш не истечёт. И обратное — менять версию там, где файл не поменялся, заставляя зря перекачивать. Правило простое: статика — надолго и с версией в имени, HTML — коротко.

Коротко

Браузерный кэш сохраняет файлы сайта на устройстве посетителя, чтобы при повторных визитах не качать их заново — страницы открываются почти мгновенно, а сервер разгружается. Управляет им заголовок Cache-Control: статику (картинки, шрифты, CSS, JS) кэшируют надолго, а HTML — коротко или без кэша. Чтобы обновлять закэшированные файлы, меняют версию в имени (style.css?v=12). Проверить кэш можно в инструментах разработчика и через PageSpeed.