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
Header set Cache-Control “max-age=31536000, public”
give me error 500
Did you try only that part of the code? If you’ve already got caching code in the .htaccess, there might be a conflict.
Hey there, Rob.
I’ve been using this for quite a while now:
‘
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
‘
I see that with your solution you have more control on what kind of files you apply expiration times, but other than that how is your solution different than what I’ve used? Or are the results the same?
I see WP trims the HTML tags, so I’ll try this way too… I can’t edit my comment, so please edit the previous comment to fix it.
\
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
\
Escaping HTML tags didn’t worked either, so I’ll just put it out here without the tags.
Those lines are wrapped in brackets like any div tag (less-than and greater-than) and should go above and below the lines in previous comments:
IfModule mod_expires.c
/IfModule
Please remove the extra comments if you manage to fix the first one. Thank you.
Also if your Web Hosting provider supports Gzip compression , you can use mod_deflate.
When a user hits your website a call is made to your server to deliver the requested files.
The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen.
Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller. In terms of cost versus benefit, gzip compression should be near the top of your page speed optimizations if you don’t have it setup already.
What is pingdom Gtmetrix and why the socer matter?