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

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

Повторный посетитель загружает страницу за 4 секунды при том, что логи показывают TTFB 200 мс. Waterfall в DevTools объясняет: 80 запросов к статике, каждый с 304 Not Modified. Файлы отдаются из кэша браузера, но браузер всё равно спрашивает сервер «не изменился ли?». Правильно выставленные заголовки кэширования исключают эти запросы полностью.

Модель браузерного кэша

Браузер использует два механизма:

Freshness — браузер знает, до какого момента файл актуален, и не обращается к серверу вообще. Управляется заголовками Cache-Control: max-age и Expires.

Validation — браузер спрашивает сервер «изменился ли файл?», используя ETag или Last-Modified. Сервер отвечает 304, браузер использует кэш. Экономит трафик, но не RTT.

Цель — максимально использовать Freshness для статики с версионированием и Validation для HTML.

Конфигурация 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 в Cache-Control — браузер не будет проверять файл даже при ручном обновлении страницы (Ctrl+F5 не действует). Применять только к файлам с версионным хэшем в имени.

Версионирование ресурсов в Битрикс

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

Встроенный механизм Битрикс — параметр sessid в URL ресурсов. Не идеален: меняется при каждой сессии, ломает кэш чаще нужного.

Через .htaccess / nginx map — добавляем в URL статики хэш от содержимого файла при деплое:

# Скрипт в деплое: генерируем версии
for f in /var/www/site/public/css/*.css; do
    hash=$(md5sum "$f" | cut -c1-8)
    # Создаём symlink с хэшем
    ln -sf "$(basename $f)" "${f%.css}.${hash}.css"
done

Vite/Webpack — если фронтенд собирается через Vite (как в этом проекте), хэши в именах файлов генерируются автоматически: app-B3vCf7Tf.js. Для таких файлов можно смело ставить max-age=31536000, immutable.

Инвалидация кэша Битрикс через параметр

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

// В header.php шаблона
$version = '2024031301'; // обновляем при деплое

echo '<link rel="stylesheet" href="/css/custom.css?v=' . $version . '">';

Автоматизируем: читаем версию из файла version.txt, обновляемого CI/CD:

$version = trim(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/version.txt'));

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>

Проверка

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 при повторной загрузке.