Missing browser caching headers
- Caching
Problem Summary
Browser caching headers tell browsers to store static assets locally. Missing headers mean browsers download CSS, JS, images, and fonts on every visit, even when unchanged.
Performance Impact
- Repeated downloads: Same files downloaded on each visit
- Worse repeat visits: No speed benefit from caching
- Increased bandwidth: More data transferred
- Slower perceived performance: Repeat visitors see no improvement
How to Detect
- PageSpeed Insights: Flags “Leverage browser caching”
- Chrome DevTools Network: Check Cache-Control headers
- GTmetrix: Shows cache policy issues
Solutions
1. Nginx Cache Headers
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { expires 1y; add_header Cache-Control "public, no-transform";}2. Apache .htaccess
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month"</IfModule>3. CDN Configuration
Set cache headers in Cloudflare or similar.
4. Versioned Assets
style.css?ver=1.2.3