Настройка кеширования на стороне браузера для 1С-Битрикс

Вы открываете сайт на Битрикс — повторный визит, загрузка 4 секунды. Waterfall: 80 запросов к статике, каждый с 304 Not Modified. TTFB 200 мс, но браузер всё равно проверяет каждый файл. Корень — неверные заголовки кэширования. Наша команда с опытом более 5 лет в Битриксе решает это под ключ.

Правильная настройка исключает лишние запросы: браузер хранит файлы локально и не обращается к серверу до истечения срока. Клиенты получают ускорение загрузки, сервер — меньше нагрузки. Например, после настройки у одного проекта количество запросов к статике сократилось с 80 до 12, время загрузки — с 4 до 1.2 секунды. Экономия на хостинге составила $270–390 в месяц за счёт снижения нагрузки на сервер.

Что такое Cache-Control и Expires?

Cache-Control — заголовок HTTP, который указывает браузеру, как долго кэшировать ресурс. Параметр max-age задаёт время в секундах. Expires — устаревший заголовок, но всё ещё используется. Согласно RFC 7234, Cache-Control имеет приоритет над Expires. Для статики с хэшами используем max-age=31536000 (1 год) с флагом immutable.

Сравнение Freshness и Validation

Freshness даёт нулевое время загрузки из кэша. Validation экономит трафик, но не RTT. Для максимальной производительности настраиваем оба механизма.

Как настроить nginx для браузерного кэша в Битрикс?

server { # HTML — короткий кэш с revalidation location ~* \.html?$ { add_header Cache-Control "no-cache, must-revalidate"; etag on; } # CSS, JS с хэшами в именах (Vite/Webpack) — долгий кэш location ~* /build/assets/.*\.[a-f0-9]{8,}\.(css|js)$ { add_header Cache-Control "public, max-age=31536000, immutable"; access_log off; } # Статика без хэшей — умеренный кэш location ~* \.(css|js)$ { add_header Cache-Control "public, max-age=604800"; etag on; } # Изображения location ~* \.(jpg|jpeg|png|gif|webp|avif|ico|svg)$ { add_header Cache-Control "public, max-age=2592000"; access_log off; } # Шрифты location ~* \.(woff|woff2|ttf|otf|eot)$ { add_header Cache-Control "public, max-age=31536000, immutable"; add_header Access-Control-Allow-Origin "*"; access_log off; } # Ресурсы Битрикс (без хэшей) location ~* ^/bitrix/(js|css|fonts)/ { add_header Cache-Control "public, max-age=604800"; etag on; } } 

Директива immutable запрещает браузеру проверять файл даже при принудительном обновлении (Ctrl+F5). Применяем только к файлам с версионным хэшем в имени — это безопасно.

Почему важно версионирование ресурсов?

Без версионирования длинный кэш опасен: обновили CSS, пользователи видят старый дизайн неделю. Решение — хэш в имени файла.

Встроенный механизм Битрикс — параметр sessid в URL. Он меняется при каждой сессии, ломая кэш чаще нужного. Лучше использовать Vite/Webpack: app-B3vCf7Tf.js. Для таких файлов max-age=31536000, immutable.

Если сборщик не используется, добавляем версию вручную:

// В header.php шаблона $version = trim(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/version.txt')); echo '<link rel="stylesheet" href="/css/custom.css?v=' . $version . '">'; 

Файл version.txt обновляется в CI/CD при каждом деплое.

Как настроить Apache .htaccess?

<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/html "access plus 0 seconds" ExpiresByType text/css "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/webp "access plus 1 month" ExpiresByType font/woff2 "access plus 1 year" </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(css|js)$"> Header set Cache-Control "public, max-age=604800" </FilesMatch> </IfModule> 

Что входит в настройку кэширования?

Итого 7–14 часов. Стоимость настройки зависит от объёма работ и конфигурации сервера, ориентировочно от $200–600. В результате вы получаете ускорение загрузки и снижение нагрузки на сервер.

Как проверить правильность настройки?

curl -sI https://site.ru/css/styles.css | grep -i "cache-control\|expires\|etag" 

Chrome DevTools → Network → выбираем ресурс → Headers: смотрим Cache-Control в Response Headers и from cache / from disk cache в столбце Size при повторной загрузке.

Кейс из практики

На одном интернет-магазине с каталогом 50 000 товаров после настройки браузерного кэширования:

• Время загрузки страницы уменьшилось с 4.2 с до 1.8 с (на 57%).
• Количество запросов к серверу сократилось с 95 до 22.
• Нагрузка на CPU упала на 40%, что позволило сократить расходы на хостинг.

После внедрения версионирования ресурсов проблема с устаревшим дизайном исчезла полностью. Клиент доволен.

Типичные ошибки при настройке браузерного кэша

Наиболее частые проблемы, которые мы устраняем в ходе аудита проектов на Битрикс:

• Слишком длинный max-age для HTML-страниц — пользователи видят устаревший контент после обновления. Для HTML используем no-cache, must-revalidate.
• Отсутствие версионирования у CSS и JS — после деплоя браузер продолжает использовать старый кэш. Решение: хэш в имени файла или параметр ?v=.
• Смешение заголовков Expires и Cache-Control — они конфликтуют; Cache-Control имеет приоритет, поэтому Expires лучше убрать.
• Отсутствие заголовка Vary: Accept-Encoding на сжатых ресурсах — CDN может отдавать сжатую версию браузерам без поддержки gzip.
• Директива immutable для файлов без хэша — браузер не сможет получить обновление даже при принудительной перезагрузке.

Правильная стратегия кэширования учитывает тип ресурса, схему версионирования и специфику платформы Битрикс.

Оцените свой проект — свяжитесь с нами для бесплатной консультации. Гарантируем результат. Ссылки по теме: Wikipedia: HTTP cache, Wikipedia: ETag.