How to Set Up HTTP Caching Headers for Static Assets

How to Set Up HTTP Caching Headers for Static Assets

Proper HTTP caching headers reduce bandwidth, speed up page loads, and lower server load on your Breeze instance. Configure your web server to tell browsers how long to cache static files.

Understanding Cache Headers

• Cache-Control — primary directive for caching behavior
• Expires — legacy header, still useful as a fallback
• ETag — identifier for a specific version of a resource
• Last-Modified — timestamp of last file change

Nginx Configuration

Add caching rules to your Nginx server block:

server {
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2|woff|ttf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
        access_log off;
    }

    location ~* \.(html|htm)$ {
        expires 1h;
        add_header Cache-Control "public, must-revalidate";
    }

    location /api/ {
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }
}

Apache / .htaccess Configuration

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType text/html "access plus 1 hour"
</IfModule>

<IfModule mod_headers.c>
    <FilesMatch "\.(css|js|png|jpg|svg|woff2)$">
        Header set Cache-Control "public, immutable, max-age=31536000"
    </FilesMatch>
</IfModule>

Cache Busting Strategy

Use versioned filenames to force cache invalidation:

<link rel="stylesheet" href="/css/style.css?v=13">
<script src="/js/app.js?v=6"></script>

Verifying Headers

curl -I https://yourdomain.com/css/style.css

Look for Cache-Control, Expires, and ETag in the response headers to confirm your caching is working.