The Cache-Control: max-age directive is part of the HTTP caching headers used to specify the maximum amount of time (in seconds) that a resource is considered fresh and can be cached by the browser, CDN, or intermediary proxies.

How Cache-Control: max-age Works

  1. Definition: The max-age directive tells the cache how long a resource is valid from the time it is fetched. After the max-age duration expires, the cache must revalidate the resource with the server.
  2. Syntax:
    3. Cache-Control: max-age=<seconds>

    Example:

    Cache-Control: max-age=3600

    This means the resource is fresh for 3600 seconds (1 hour).

Common Use Cases for max-age

1

Static Assets

Resources like images, JavaScript, and CSS files can be cached for longer periods (e.g., days, weeks, or months) because they rarely change.

Example:

Cache-Control: max-age=31536000 # Cache for 1 year
2

Dynamic Content

For resources that change frequently (e.g., API responses), use a shorter max-age or no caching at all.

Example:

Cache-Control: max-age=0, must-revalidate
3

Temporary Content

For content that is valid for a specific short period:

Cache-Control: max-age=600 # Cache for 10 minutes

Combining max-age with Other Directives

  1. With must-revalidate:
    • Ensures the cache revalidates the resource after the max-age duration.
    • Example:
      • Cache-Control: max-age=3600, must-revalidate
  2. With public:
    • Allows caching by both browsers and intermediary caches (e.g., CDNs).
    • Example:
      • Cache-Control: public, max-age=86400 # Cache for 1 day
  3. With private:
    • Limits caching to the user browser only, not intermediary caches.
    • Example:
      • Cache-Control: private, max-age=600
  4. With no-store or no-cache:
    • no-store: Prevents caching entirely.
    • no-cache: Forces validation with the server before using the cached resource.
    • Example:
      • Cache-Control: no-cache

Setting Cache-Control: max-age

In Apache

Add the directive to the .htaccess file:

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

In Nginx

Add the directive to the Nginx configuration file:

location ~* \.(html|css|js|jpg|png|gif|svg|woff|woff2)$ {
    add_header Cache-Control "max-age=31536000, public";
}

Reload Nginx:

sudo systemctl reload nginx

In PHP

Set headers dynamically in your PHP scripts:

<?php
header("Cache-Control: max-age=3600, public");
?>

Verifying Cache-Control: max-age

  1. Using cURL:
    2. curl -I https://yourdomain.com/resource

    Check for the Cache-Control header in the response:

    Cache-Control: max-age=3600, public
  2. Browser Developer Tools:
    • Open Developer Tools (F12) in your browser.
    • Go to the Network tab and inspect the response headers of the resource.
  3. Online Tools:

Best Practices for Cache-Control: max-age

  1. Set Long Expiry for Static Assets: Use versioning in filenames (e.g., style.v1.css) to manage updates while setting a long cache duration.
  2. Use Shorter Durations for Dynamic Content: For frequently updated resources, use max-age=0 with must-revalidate.
  3. Monitor Cache Behavior: Test caching behavior periodically to ensure it aligns with your performance goals.
  4. Combine with ETag or Last-Modified: Use these headers for conditional requests to optimize cache validation.

By properly configuring Cache-Control: max-age, you can improve your website performance, reduce server load, and enhance user experience.