When using WP Engine as your Digital Experience platform, we handle many server-level optimizations for you automatically. One of these optimizations is handling the caching instructions sent in headers on your site. In this article we will explain how these headers work, and how to tell if your page or file is hitting cache.
What are Cache-Control headers?
Headers are contextual information your web browser can send and receive with requests for pages and files. Some headers are sent with a page or file request, while others are associated with the response you receive back. Before we can understand Cache-Control headers though, first we need to know what “cache” is, and how it helps.
Caching is the act of storing a “snapshot” or “copy” of a page or file for faster access the next time. A page served from cache can be returned in a few milliseconds, compared to a second or more for page that has to be created as new. This means it’s definitely in your best interest to serve as many pages and files from cache as possible.
Caching happens at many layers, but we will be focusing on page caching that happens on the server-level and at the browser-level. In either scenario, when a page or file is requested, the server and your browser both listen to the “Cache-Control” headers for instructions on who can access the cached copy, and how long the copy can be accessed. Cache-Control headers are important to your site’s scalability, so WP Engine manages these headers for you.
Where are Cache-Control headers?
There are multiple ways to see the Cache-Control headers set by your website. The easiest way is within your web browser. To view the headers, simply, right-click on your web page and click “Inspect” from the menu. Then click “Network” and refresh the page. You should see something like this:
Click your page URL in the list – this is usually the first item in the list. This will bring up a list of Response headers sent.
Here you will see two important fields: cache-control, and x-cache. The “cache-control” header tells the cache system (browser or server-level page cache) how long to cache the page in seconds. When max-age is set to 600, this means the page can be cached for 10 minutes.
The x-cache header will tell you whether the page was served from cache or not. A HIT indicates the request was served from the caching layer.
A MISS indicates it did not hit cache. If you see a MISS, the x-pass-why header will tell you the reason why the request did not hit cache. In the example below, the reason this page was not cached is because it’s a WordPress Admin page, which cannot be cached.
Manipulating Cache-Control headers
There may be times when you want to cache a page for longer than the standard 10 minutes. In these cases, you can use a configuration plugin to set Cache-Control headers to your liking.
Please note: Cache-Control headers can be increased, but not decreased from 600 seconds (10 minutes)
If you wish to increase the cacheability of your site by increasing the cache expiration time, you can use a plugin called WP Engine Advanced Cache to help set these options. Increasing the amount of time pages are stored in cache will help with site speed and overall user experience on your site.