Browser Cache

Learning Focus

By the end of this lesson you will know how to configure cache-control headers for static assets so browsers reuse files instead of redownloading them.

What Browser Caching Does

Browser caching tells the visitor's browser to store static files locally and reuse them on subsequent page loads. This reduces bandwidth, speeds up page rendering, and lowers server load.

How It Works

Key Headers

Header	Purpose	Example
Cache-Control	Controls caching behavior	max-age=31536000, public
Expires	Sets an expiration date (older method)	Thu, 01 Jan 2028 00:00:00 GMT
ETag	Validates if the file has changed	Auto-generated hash
Last-Modified	Timestamp-based validation	Server file modification time

Recommended Cache Durations

File Type	Cache Duration	Rationale
CSS, JS	1 year (versioned)	Change the filename on each deploy
Images (PNG, JPG, WebP)	1 year	Rarely change
Fonts (WOFF2, TTF)	1 year	Almost never change
HTML	Short or no-cache	Content changes frequently
API responses	No-cache or very short	Dynamic, personalized data

Configuring in OpenLiteSpeed

In WebAdmin, navigate to Virtual Hosts → Your Site → Context or General → set Expires headers for static file types.

You can also use .htaccess:

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

Verifying Cache Headers

# Check response headers for a static asset
curl -sI https://example.com/style.css | grep -iE "cache-control|expires|etag"

Key Takeaways

• Browser caching reduces repeat downloads and speeds up return visits.
• Use long cache durations for versioned assets (CSS, JS, images, fonts).
• Use short or no-cache for HTML and API responses.
• Verify with curl -sI to confirm headers are set correctly.

What's Next

• Continue to Object Cache for application-level caching with Redis or Memcached.