Кэширование в браузере: как настроить

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

01Что такое кэширование браузера и зачем оно нужно

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

Правильно настроенное кэширование решает три задачи: быстрая загрузка повторных визитов, экономия трафика на стороне пользователя, снижение нагрузки и счетов у владельца. Особенно это важно для сайтов с постоянной аудиторией — блогов, интернет-магазинов, личных кабинетов. О связке скорости с другими факторами мы писали в материале «Как ускорить загрузку сайта».

02Cache-Control: главный заголовок

Современный стандарт управления кэшем — заголовок Cache-Control. Он отправляется сервером вместе с файлом и говорит браузеру, что с этим файлом делать. Основные значения:

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

Типичный набор для статики выглядит так: Cache-Control: public, max-age=31536000, immutable. Браузер сохранит файл на год и не будет тревожить сервер.

03ETag и Last-Modified: валидация

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

Last-Modified

Сервер указывает дату последнего изменения файла. При повторном запросе браузер присылает её в заголовке If-Modified-Since. Если файл не менялся, сервер отвечает кодом 304 «Not Modified» и пустым телом — экономится трафик и время.

ETag

То же самое, но вместо даты — уникальный «отпечаток» содержимого файла. Точнее, но чуть дороже в вычислении. Браузер присылает заголовок If-None-Match, и сервер либо подтверждает кэш, либо отдаёт новую версию.

На практике оба механизма работают вместе и включаются автоматически на большинстве веб-серверов. Их основная роль — для файлов, которым нельзя сразу выставить большой max-age, например, для HTML.

04Какие правила прописывать для разных типов файлов

Простая рабочая схема:

• CSS и JS с версионированием в имени (style.a3f9.css): max-age=31536000, immutable. Файл точно не изменится, новая версия будет другим именем.
• Изображения, иконки, шрифты: max-age=31536000, public. Меняются редко, при обновлении меняйте имя файла.
• HTML страниц: no-cache или max-age=0, must-revalidate. Контент может поменяться, нужно валидировать.
• API-ответы, ленты: чаще всего no-store или короткий max-age в зависимости от логики.
• Личные кабинеты, корзина: private, no-store — чтобы не утекло на чужие устройства.

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

05Где именно настраивать кэширование

Кэширование настраивается на стороне веб-сервера, реже — в коде приложения. Ключевые места:

Nginx

В конфиге сайта прописывают директиву expires и add_header Cache-Control внутри секции location по расширению файлов. Обычно это пара десятков строк, которые ставятся один раз и работают.

Apache

Через .htaccess или конфиг используют модули mod_expires и mod_headers. На большинстве шаред-хостингов всё уже включено и достаточно просто прописать правила.

WordPress и плагины

Плагины кэширования (WP Rocket, LiteSpeed Cache, W3 Total Cache) умеют сами генерировать правила в .htaccess. Это удобно для тех, кто не хочет лезть в конфиги. О выборе плагина мы писали в материале «Плагины кэширования WordPress».

CDN

Если перед сайтом стоит CDN, важно проверить, что его настройки уважают заголовки сервера. Иначе CDN может отдавать всё с собственным сроком кэша, который рассинхронизирован с сайтом.

06Типичные ошибки и как их избежать

Что мы часто видим в аудитах:

• Cache-Control: no-cache на всё подряд. Часто это след от шаблонной конфигурации хостинга. Браузер каждый раз перепроверяет файлы, скорость падает.
• Большой max-age на HTML. Пользователь видит старую версию страницы и думает, что сайт сломан.
• Кэш статики без версионирования. После выкатки правок часть посетителей видит «сломанную» вёрстку.
• ETag отключён, Last-Modified тоже. Браузер всегда качает файл целиком, даже когда ничего не поменялось.
• Конфликт CDN и сервера. CDN отдаёт устаревший контент даже после очистки кэша на сервере.

Проверить настройки можно прямо в DevTools: вкладка Network, открыть любой ресурс, посмотреть Response Headers. Также в PageSpeed Insights есть отдельный пункт «Используйте эффективную политику кэширования» — он подсветит файлы без правильных заголовков.

Официальная документация по теме — Справка Яндекс.Вебмастера.