When you visit a website for the first time, your browser downloads a lot of files to display the page. This includes the HTML code, images, stylesheets, and JavaScript files. This can add up to a lot of data, and it can be a bit slow, especially on a mobile device, only because of browser caching.
Most of these files, however, are used across your entire website. The same logo, the same stylesheet, and the same JavaScript files are used on every page. So wouldn’t it be great if all of those files only had to be downloaded once? That’s exactly what browser caching does. It stores a copy of those files in a visitor’s browser, and the next time that file is needed, the browser gets it from its own cache instead of from the server. The result is a much faster and more efficient user experience.
How browser caching works
Browser caching is a simple idea. You set an expiry time for a file, which tells a browser how long it can save that file before it has to download a new copy. For example, you can tell a browser to cache your stylesheet for a month. After the first visit, the stylesheet is saved locally, and the browser won’t download a fresh copy from the server again for 30 days.
This is a great way to improve your pagespeed, but there is a catch. If you change a cached file, a visitor who has already been to your site will still see the old version until the expiry time is up. We’ll talk about how to fix that in a bit.
Check if your site has browser caching enabled
By now, you’re probably wondering if caching is enabled on your website. You can use the ClickRank Site Audit tool to check your entire website at once. It can scan every file on your website and show the expiry time for each one. This is a crucial step in understanding your website’s performance and page speed.
How to set up browser caching
Setting up browser caching is a simple but important task. If you don’t explicitly specify an expiry time, a visitor’s browser will always try to fetch a fresh copy from the server, which can severely slow down their experience.
Apache: Expires headers
If you’re using an Apache server, you can set up caching by editing your .htaccess file. You can set the expiry time for each file type individually. For example, you can set the expiry time for fonts to one year, images to three months, and stylesheets and JavaScript to one month. This is a simple and effective way to enable browser caching.
Apache Cache-control
An alternative way to set caching instructions is the Cache-Control header. It works very similarly and has a few extra options. For most websites, using Expires headers will be enough.
Browser Caching in WordPress
If you’re using a CMS like WordPress, you can use a plugin to enable browser caching. There are many great plugins available that will let you enable caching with just a few clicks. This is a great option if you don’t have access to your server’s .htaccess file or if you would rather use a plugin to handle it for you. A comprehensive platform Clickrank can help you with this. For example, the platform can scan your website for caching issues and give you a prioritized list of tasks to fix them.
Invalidating cache
What if you need to change a cached file? For example, you changed your logo, but everyone who visited your site recently is still seeing the old one. Asking everyone to clear their cache is not an option.
One way to fix this is to change the name of the file. For example, you can change style.css to style-new.css. The browser will think this is a new file and download the latest version from the server. This is a simple and effective way to force a browser to download a new file, even if the expiry time has not yet passed.