How to Set Cache Control Headers

When it comes to your website performance, every millisecond counts. Whether you’re managing a personal blog or a large-scale e-commerce site, the speed at which your pages load can profoundly impact everything from user experience to search engine rankings. This is where using HTTP headers, specifically cache control headers, can come in really handy.

HTTP headers are the core component of HTTP requests and responses. They carry important information about the client-browser request or the server response that precedes the actual content of the message. Among these, cache control headers play a key role in how web content is cached. They dictate whether, how, and for how long the data fetched by a browser should be stored in the cache. This not only speeds up access to frequently requested resources but also reduces bandwidth and hosting costs by minimizing the need for resources to be repeatedly sent across the network.

The Cache-Control header, introduced with HTTP/1.1, is particularly powerful for managing browser and intermediary caches. It allows web developers and server admins to specify directives that control cache dynamics, such as:

• How long a file should be stored before it is considered stale
• Whether a file should be stored at all

This is important for optimizing content delivery and ensuring that users receive the most current version of your website without any unnecessary delays.

In this post, we’ll explore the syntax of cache control directives, explain the various types, and discuss how they can be effectively implemented to enhance your website’s performance. These headers will help to ensure a faster, more efficient site that keeps your site visitors engaged (and most importantly — satisfied).

What are cache control headers?

At its core, the Cache-Control HTTP header defines a set of directives sent from a web server that instructs the browser on how to handle caching for the website’s content. These directives are included in HTTP response headers and determine whether resources on a website can be stored in the browser’s cache and under what conditions.

How cache control headers work

Cache control headers allow developers to dictate how, when, and even if caching occurs in a browser or any intermediary like the Sucuri CDN (Content Delivery Network). These headers provide specific directives that guide the caching process, helping ensure that users receive the best balance between load times and fresh content.

Common cache control directives

Let’s take a look at the most common cache control directives.

max-age=[seconds]

Specifies the maximum amount of time a resource will be considered fresh. This is perhaps the most commonly used directive because it directly controls how long a file should be stored in cache before it’s considered stale and is the basic setting needed to make caching work on most devices.

s-maxage

The s-maxage setting tells shared caches, like those used by multiple visitors or devices (such as CDNs or web accelerators), how long they can keep a copy of a web page. It allows you to control how often these shared caches update their content compared to private caches.

stale-if-error

The stale-if-error setting allows a cached page to be served even after it has expired if the original web server returns an error. This helps keep your website available by showing an older version of the page instead of an error message. You need to set a private or shared cache duration to use this option, and it can be set for hours or days.

stale-while-revalidate

The stale-while-revalidate setting lets shared caches serve an old version of a web page while they update the cached copy in the background. This improves loading times because visitors don’t have to wait for the updated content. Like stale-if-error, it requires a private or shared cache duration, and can be used together with stale-if-error. This setting is useful for ensuring quick page loads while keeping content reasonably fresh.

Pagination

When this option is set, older pages will be cached for longer than newer pages (determined by page number). The configured pagination factor is added to the main maxage and s-maxage options. This allows less popular archives to be served as stale for longer.

Old age multiplier

When this option is set, the max-age and s-maxage values will be multiplied by the number of years since the last edit or comment (the Last Modified time). This allows posts that were published a long time ago to be cached longer than newer posts.

Each of these directives can be found within the Sucuri WordPress plugin and serve a unique purpose. They can be combined to fine-tune how resources are managed in the cache and can drastically improve the performance of a website by reducing load times and bandwidth usage while ensuring that content is served fresh as needed.

Why cache control headers are important

You can leverage cache control headers to significantly enhance the speed and responsiveness of your website — just by simply managing how your website resources are cached. Let’s take a look at some of the ways they can optimize performance and user experience.

Site performance

One of the primary benefits of effectively configured cache control headers is the reduction in load times for repeat visitors.

When resources such as images, CSS, and JavaScript files are cached in the browser, they do not need to be re-fetched from the server on subsequent visits. This dramatically reduces the amount of data transferred during page loads, decreases server load, and minimizes latency, resulting in a faster browsing experience

Bandwidth

For websites with high traffic volumes or large files, bandwidth is a critical resource. By storing static resources in the user’s browser cache or intermediate caches (like CDNs), cache control headers reduce the need for repeated data transfers each time a page is accessed. This not only conserves bandwidth but also reduces hosting costs and can improve the site’s ability to handle large numbers of visitors (and DDoS attacks).

User experience

A fast-loading website enhances user satisfaction and engagement. Users are likely to stay longer and explore more on a site that responds quickly and loads smoothly. Moreover, a good user experience directly contributes to higher conversion rates, whether that means more completed purchases, more returned visitors, or increased ad revenue

Content freshness

Directives like max-age and no-cache provide mechanisms to control the freshness of the cached content. For example, `max-age` allows a site administrator to specify how long content should be considered fresh, after which it must be revalidated or fetched anew from the server.

SEO

Search engines like Google consider page speed as a ranking factor. Websites that load quickly are likely to rank higher in search results. Properly utilized cache control headers contribute to better speed and overall site performance, which can improve a site’s visibility and organic traffic.

Cache control headers are not just a technical detail — they help balance between speed and freshness, directly influencing user experience, operational costs, and even SEO. Developers and site admins can significantly improve the efficiency of their site by simply implementing the right caching directives.

Step-by-step: Setting up cache control headers

Let’s take a look at the steps you can take to set up cache control headers on your site using Apache, Nginx, and the Sucuri WordPress plugin.

Setting cache control headers in Apache

The .htaccess file in Apache allows you to control headers without modifying server configuration files.

Here’s how you can set cache control headers:

1. Locate and open your .htaccess file in a file editor.
2. To set a cache control header for all resources, you can add the following:

<IfModule mod_headers.c>
Header set Cache-Control "max-age=86400, public"
</IfModule>

3. Save the file and restart Apache to apply the changes.

Specific directives for file types:

To apply cache control headers to specific file types, use the <FilesMatch> directive:

<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

This sets a longer max-age for static files like images and stylesheets.

Setting cache control headers in Nginx

1. Locate your Nginx configuration file, usually found at /etc/nginx/nginx.conf.
2. Open the file in your text editor.
3. Include cache control directives within server blocks or location blocks:

location ~* \.(jpg|jpeg|png|gif|js|css)$ {
expires 7d;
add_header Cache-Control "public";
}

4. Save the changes and restart Nginx to ensure the new settings take effect.

Setting cache control headers with the Sucuri WordPress plugin

If you don’t want to mess around with your .htaccess or Nginx configuration files, you can set cache control headers using the Sucuri Security WordPress plugin.

1. Log in to your WordPress dashboard and navigate to the Sucuri plugin.
2. Go to Settings > Headers from the right hand side of the plugin dashboard.
3. Enable the Cache-Control header by selecting a mode according to your website’s need and clicking Submit.

You can also activate the Cache-Control header by updating the cache header fields in one of the page types by using the Edit button in the table rows.

Important note: You will need to enable site caching on your WAF to use these settings. If you require assistance, please create a ticket and reach out to the Sucuri firewall team for support.

Final considerations and best practices for cache control headers

Last but certainly not least, let’s take a look at some key practices and important considerations to help ensure your caching approach actually enhances site performance and user experience as intended.

Understand your website content

Static resources like images, CSS, and JavaScript files typically benefit from longer cache durations, while dynamic content such as user profiles or real-time data might need shorter cache times (or no caching at all).

Also, you’ll want to leverage the no-store directive for any sensitive information to prevent it from being stored in public caches or browser caches. This helps protect user data and comply with privacy regulations.

Be consistent with your caching rules

Apply consistent caching rules across your website to avoid confusion and ensure a uniform user experience. For example, all static assets could have the same max-age directive, while all dynamically generated content follows a no-cache policy.

Also, you’ll want to consider keeping detailed documentation of your caching policies and header settings. This can help with maintenance and troubleshooting, especially if you work in a large team or your setup becomes complex.

Test your changes!!

After configuring cache control headers for your site, thoroughly test how these headers affect content delivery and loading times.

You can use free online tools like https://securityheaders.com/ or developer tools like Inspector in Chrome to validate your cache headers to ensure they are working as expected. You can also try using curl and grep in a terminal:

$ curl -I https://myawesomesite.com/somepage -s | grep cache

These simple steps can help identify any misconfigurations or inconsistencies in your header implementation.

Monitor and tweak as needed

Regularly monitor your site’s performance and the effectiveness of your caching strategy. Analytics and monitoring tools can provide insights into cache hit rates and loading times, helping you fine-tune your settings.

These best practices can help you leverage cache control headers to significantly enhance site performance while maintaining control over how your website content is served and stored.

If you have any questions or are looking for information about caching with the Sucuri web application firewall, get in touch! Our experienced analysts love to chat and are available 24/7 to help you protect and optimize your site.