Before I begin this one, let me start off with a disclaimer… I’m not an expert by any means on this topic but I am going to show you a little trick that I learned from varvy.com on something called Cache-Control. Applying this to a number of sites that I’ve built and maintain has resulted in relatively significant performance improvements when testing the sites on GTmetrix and Pingdom and hopefully you’ll see the same gains.
What is Caching?
In the context of browsing the internet, caching is the process of temporarily storing files of various kinds (images, texts, and various other elements that make up a web page) on a visitors hard drive for later use so that future requests to the same content are faster as the cached resources don’t need to be downloaded again unless they have expired.
A prime example of caching would be of caching a logo. Once a visitor’s browser has cached the logo, it won’t fetch the logo again until the caching period for the logo has expired or the file name of the logo changes.
What Is Cache-Control?
Cache-control controls how and for how long a file can be cached and is set via the cache-control HTTP header.
An Example of Cache-Control Code
A Few Pointers
You’ll see in the example above, this code sets the caching of three different categories of files, images, css and JavaScript, and fonts. You’ll see that filesMatch specifies the file types to be cached, and max-age sets the length of time the file must be cached for. The max-age is set in seconds so:
- 60 = one minute
- 3600 = one hour
- 86400 = 0ne day
- 604800 = one week
- 2628000 (give or take) = one month
- 31536000 (give or take) = one year
Where To Put Cache-Control
There are a number of options here but the one I’ve used, and probably the most popular option, is to simply add it to the .htaccess file. This is a hidden file so if you can’t find it, make sure you’ve chosen to display hidden files in whatever tool you use to browse your files with.
If you want to see more options, please check out the article on cache-control on varvy.com.
Was it worth it?
As an example, one of the sites that I applied this cache-control to, the “Leverage browser caching” score went from 75 to 90!
Wrapping It Up
As thrillings as it may be to up your score on Pingdom and GTmetrix, playing with your .htaccess file can break your site, so please make sure you have a copy of it before you embark on this adventure. If you do it right though, you’ve just managed to improve the performance of your site, and every improvement is a step in the right direction.
Photo by Kristina Flour on Unsplash