Browser caching setup for 1C-Bitrix

You open a Bitrix site on a repeat visit—load time 4 seconds. Waterfall: 80 requests to static files, each returning 304 Not Modified. TTFB is 200 ms, but the browser still checks every file. The root cause is incorrect caching headers. Our team with over 5 years of Bitrix experience handles this turnkey.

Proper configuration eliminates unnecessary requests: browsers store files locally and don't contact the server until the cache expires. Clients get faster load times; servers see reduced load. For example, after configuration on one project, the number of static requests dropped from 80 to 12, and load time from 4 seconds to 1.2 seconds. Savings on hosting reached a significant monthly reduction due to lower server load.

What are Cache-Control and Expires?

Cache-Control is an HTTP header that tells the browser how long to cache a resource. The max-age parameter specifies the time in seconds. Expires is an older header still used in some cases. According to RFC 7234, Cache-Control takes priority over Expires. For static files with hashes, we use max-age=31536000 (1 year) with the immutable flag.

Freshness vs. Validation

Freshness gives zero load time from cache. Validation saves bandwidth but not RTT. For maximum performance, we configure both mechanisms.

How to configure nginx for browser caching in Bitrix?

server { # HTML — short cache with revalidation location ~* \.html?$ { add_header Cache-Control "no-cache, must-revalidate"; etag on; } # CSS, JS with hashes in names (Vite/Webpack) — long cache location ~* /build/assets/.*\.[a-f0-9]{8,}\.(css|js)$ { add_header Cache-Control "public, max-age=31536000, immutable"; access_log off; } # Static files without hashes — moderate cache location ~* \.(css|js)$ { add_header Cache-Control "public, max-age=604800"; etag on; } # Images location ~* \.(jpg|jpeg|png|gif|webp|avif|ico|svg)$ { add_header Cache-Control "public, max-age=2592000"; access_log off; } # Fonts location ~* \.(woff|woff2|ttf|otf|eot)$ { add_header Cache-Control "public, max-age=31536000, immutable"; add_header Access-Control-Allow-Origin "*"; access_log off; } # Bitrix resources (without hashes) location ~* ^/bitrix/(js|css|fonts)/ { add_header Cache-Control "public, max-age=604800"; etag on; } } 

The immutable directive prevents the browser from re-checking the file even on forced refresh (Ctrl+F5). Only apply it to files with version hashes in the name—this is safe.

Why is resource versioning important?

Without versioning, a long cache is risky: update your CSS and users will see the old design for a week. The solution is a hash in the filename.

Bitrix's built-in mechanism uses the sessid parameter in the URL. It changes on every session, breaking the cache more often than needed. Better to use Vite/Webpack: app-B3vCf7Tf.js. For such files, set max-age=31536000, immutable.

If you don't use a bundler, add a version manually:

// In header.php of the template $version = trim(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/version.txt')); echo '<link rel="stylesheet" href="/css/custom.css?v=' . $version . '">'; 

The version.txt file is updated in CI/CD on every deployment.

How to configure 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> 

What is included in the caching setup?

Total 7–14 hours. The cost of setup depends on the scope of work and server configuration—contact us for a quote. The result is faster load times and reduced server load.

How to verify the configuration?

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

Chrome DevTools → Network → select a resource → Headers: check Cache-Control in Response Headers, and see from cache / from disk cache in the Size column on repeat loads.

Case study

On an e-commerce site with a catalog of 50,000 products, after configuring browser caching:

• Page load time decreased from 4.2s to 1.8s (57% reduction).
• Server requests dropped from 95 to 22.
• CPU load fell by 40%, leading to significant monthly hosting savings.

After implementing resource versioning, the problem of outdated design disappeared completely. The client is satisfied.

Common mistakes in browser cache configuration

Frequent issues we resolve during Bitrix project audits:

• Too long max-age for HTML pages—users see stale content after updates. For HTML, use no-cache, must-revalidate.
• Missing versioning for CSS/JS—after deployment, the browser continues using old cache. Solution: hash in filename or ?v= parameter.
• Mixing Expires and Cache-Control headers—they conflict; Cache-Control takes priority, so remove Expires.
• Missing Vary: Accept-Encoding on compressed resources—CDN may serve compressed version to browsers without gzip support.
• immutable directive for files without hashes—browser won't fetch updates even on forced reload.

A proper caching strategy accounts for resource type, versioning scheme, and Bitrix platform specifics.

Evaluate your project—contact us for a free consultation. We guarantee results. Related links: Wikipedia: HTTP cache, Wikipedia: ETag.