What is Cache Control?
Cache control is a mechanism used by web servers and web clients (such as browsers) to control how frequently and for how long web pages and other resources are cached. The cache control headers are part of the HTTP protocol and are used to specify how long a resource can be cached by a web client before it needs to be refreshed.
Cache control headers can be used to improve website performance by reducing the amount of data that needs to be transmitted between the web server and the client. By caching resources on the client side, web browsers can quickly retrieve and display frequently accessed content, without having to download the content from the web server each time.
Table of contents
How Browser Caching Improves Page Speed
Browser caching is a clever technique that enhances web browsing efficiency by using locally stored content, making the user’s overall online journey smoother and faster.
It is a crucial concept in web development that plays a significant role in optimising website performance. When users visit a website, elements like images, files, and scripts are temporarily stored on their device by their browser. This local storage is called the cache.
The web server instructs their browser on how long it should retain these cached resources using cache control headers. The next time the user visits the same website, their browser checks its cache to see if it already has the required resources. If they are still fresh based on the cache control directives, the browser fetches them from the cache instead of downloading them again from the server.
This clever mechanism reduces the need for repeated data transfers, resulting in faster page speed load times and an improved user experience.
Cache Control Directives
There are several cache control directives that can be used to specify how long a resource should be cached, including:
Public: Indicates that a resource can be cached by any client, including proxy servers.
Private: Indicates that a resource can only be cached by the client that originally requested it.
Max-Age: Specifies the maximum amount of time, in seconds, that a resource can be cached by a client.
Expires: Specifies an exact date and time after which a resource is no longer considered fresh and must be reloaded. (Also see: How to Use Expires Header to Improve Page Speed)
Cache control is an important tool for optimising website performance, reducing bandwidth usage, and improving the overall user experience. By properly configuring cache control headers, web developers can ensure that their websites and web applications load quickly and efficiently, even on slower or unreliable network connections.
See:
Cache-Control Best Practices
Here are some cache control best practices that can help optimise website performance and user experience:
Set cache expiration times: Specify how long resources should be cached by setting appropriate expiration times. For example, set the expiration time for images and other static resources to one year, while setting the expiration time for dynamic content to a shorter period, typically 5-10 minutes.
Use Cache-Control headers: Use the Cache-Control header to specify how long resources should be cached by the browser. This header can be set by the web server or by a caching plugin.
Use ETag headers: ETag headers can be used to verify if a resource has changed since it was last accessed. This can help reduce bandwidth usage by preventing unnecessary downloads of unchanged resources.
Use a content delivery network (CDN): A CDN can cache resources at multiple locations around the world, reducing the time it takes to download resources for users in different regions.
Minimise HTTP requests: Minimise the number of HTTP requests required to load a web page by combining multiple resources into a single file, using CSS sprites, and reducing the number of images and other resources on the page.
Use versioning for static resources: Use versioning or cache-busting techniques to ensure that users always get the latest version of a resource when it has changed.
Test and monitor: Regularly test your website’s cache headers and performance to ensure that caching is working as expected and to identify any issues or performance bottlenecks.
By following these cache control best practices, you can optimise website performance, reduce bandwidth usage, and provide a better user experience for your visitors.
Cache-Control vs Expires Headers
Cache-Control is a more modern and flexible approach to control caching behaviour, while Expires is an older method that specifies a fixed expiration date and time for a resource. Cache-Control offers greater control and is generally recommended for managing caching in HTTP responses.
The key difference between Cache-Control and Expires lies in their flexibility and precision. Cache-Control allows for more fine-grained control with various directives, while Expires simply specifies a fixed date and time. Cache-Control is generally preferred because it provides more control and is compatible with a broader range of caching scenarios. Additionally, Cache-Control headers can be used in conjunction with other cache-related headers, whereas Expires is standalone.
Cache-Control for Images
Caching images means saving a copy of the image in your browser or device so that the next time you visit the website, the image doesn’t need to be downloaded again. This can make your website load faster for your visitors.
To optimise image caching, you can use techniques like setting an appropriate expiration time for the image to be cached, compressing the image to reduce its file size, and using lazy loading to defer the loading of images until they are needed. You can also use a content delivery network (CDN) to cache images at multiple locations around the world, reducing the time it takes to download images for users in different regions.
How Long You Should Set the Image Cache
In general, images should be cached for as long as possible to reduce the number of times they need to be downloaded. A good rule of thumb is to set an expiration time of at least one year for images that are unlikely to change frequently, such as logos or background images.
For images that may change more frequently, such as product images or user-generated content, you may need to set a shorter expiration time to ensure that users are seeing the most up-to-date information.
Cache-Control for HTML
Caching HTML pages is an important aspect of website optimisation, as HTML files can make up a significant portion of a website’s total file size.
Here are some cache control best practices for HTML:
Use Cache-Control headers: Use the Cache-Control header to specify how long HTML pages should be cached by the browser. You can set an appropriate expiration time for HTML pages to ensure that they are cached by the browser and don’t need to be downloaded on subsequent visits.
Set expiration times: Set an appropriate expiration time for HTML pages to ensure that they are cached by the browser and don’t need to be downloaded on subsequent visits. For example, you can set the expiration time for HTML pages to one hour or one day, depending on how frequently the content changes.
Use versioning: Use versioning or cache-busting techniques to ensure that users always get the latest version of an HTML page when it has changed.
How Long You Should Cache HTML
The length of time to cache HTML pages can depend on various factors, such as the type of content, how frequently it changes, and the needs of your website and your users.
In general, HTML pages can be cached for longer periods of time than dynamic content like JSON or XML feeds. A good rule of thumb is to set an expiration time of at least one hour for HTML pages which are unlikely to change frequently, such as static pages like About Us or Contact Us pages.
For HTML pages that may change more frequently, such as blog posts or news articles, you may need to set a shorter expiration time to ensure that users are seeing the most up-to-date information.
Ultimately, the appropriate length of time to cache HTML pages will depend on your website’s specific needs and the preferences of your users.
Cache-Control for JavaScript
Caching JavaScript files is an important aspect of website optimisation, as JavaScript files can make up a significant portion of a website’s total file size.
Here are some cache control best practices for JavaScript:
Use Cache-Control headers: Use the Cache-Control header to specify how long JavaScript files should be cached by the browser. You can set an appropriate expiration time for JavaScript files to ensure that they are cached by the browser and don’t need to be downloaded on subsequent visits.
Set expiration times: Set an appropriate expiration time for JavaScript files to ensure that they are cached by the browser and don’t need to be downloaded on subsequent visits. For example, you can set the expiration time for JavaScript files to one month, six months, or one year, depending on how frequently the content changes.
Use versioning: Use versioning or cache-busting techniques to ensure that users always get the latest version of a JavaScript file when it has changed.
How Long You Should Cache Javascript
The length of time to cache JavaScript files can depend on various factors, such as the type of content, how frequently it changes, and the needs of your website and users.
In general, JavaScript files can be cached for longer periods of time than dynamic content like JSON or XML feeds. A good rule of thumb is to set an expiration time of at least one month for JavaScript files that are unlikely to change frequently, such as libraries or frameworks.
For JavaScript files that may change more frequently, such as custom scripts or interactive elements, you may need to set a shorter expiration time to ensure that users are seeing the most up-to-date information.
Ultimately, the appropriate length of time to cache JavaScript files will depend on your website’s specific needs and the preferences of your users. It’s important to test and monitor your website’s caching performance to ensure that it is working as expected and providing a good user experience.
How to Check if a Web Page is Cached
To check if a website is cached, you can use your browser’s developer tools. Here are the steps for checking the cache status in some popular browsers:
Using Google Chrome
- Right-click anywhere on the page and select “Inspect.”
- In the developer tools window, click on the “Network” tab.
- Reload the page, and you’ll see a list of all the resources that were loaded, including the status of each resource’s cache.
Using Mozilla Firefox
- Right-click anywhere on the page and select “Inspect Element.”
- In the developer tools window, click on the “Network” tab.
- Reload the page, and you’ll see a list of all the resources that were loaded, including the status of each resource’s cache.
Using Safari
- Enable the developer menu by going to Safari > Preferences > Advanced and checking “Show Develop menu in menu bar.”
- Go to Develop > Show Web Inspector.
- In the developer tools window, click on the “Network” tab. Reload the page, and you’ll see a list of all the resources that were loaded, including the status of each resource’s cache.
If a resource is cached, you’ll see a “200 OK” status code and a “from cache” label in the developer tools. If a resource is not cached, you’ll see a “304 Not Modified” status code indicating that the browser has checked if the cached version is still valid and can be used.
Keep in mind that the cache status may vary depending on the specific resource and the caching settings used by the website.
This post is part of: Page Speed Optimisation: A Complete Guide — created by our Page Speed Optimisation Specialists.
In this series:
