While running your site on PageSpeed Insight you have seen a suggestion in the diagnostics section for “Serve static assets with an efficient cache policy” and according to the page speed website, a long cache lifetime can speed up repeat visits to your page.
But what does it actually means? How it will affect your website performance and most importantly how you can enable it?
In this article, we are going to learn about all those things and you will be able to see some good performance boost on your website. So let’s start and begin with the basics.
What is caching?
When a browser cache any resource(asset or files) it actually makes a copy of that resource and store it locally in cache memory when visitors first time visit the site. And whenever visitors visit your website again instead of downloading the resources again it serves a local copy of the resource which it cached earlier.
When a server lets the browser store any resource locally it also provides a time period for which this cache is valid after that browser downloads the resource again. This is known as cache policy.
PageSpeed Insight considers any resources cacheable if that resource meets these three criteria:
- The resource is a font, image, media file, script, or stylesheet.
- The resource has a 200, 203, or 206 HTTP status code.
- The resource doesn’t have an explicit no-cache policy.
What is serve static assets with an efficient cache policy?
Now the first question which comes to everyone’s mind is what exactly is serving static asset with an efficient cache policy? According to Google PageSpeed Insight, your website’s static assets such as images, fonts, scripts(such as JS), and stylesheets(Such as CSS) should have an efficient cache policy.
Now by this efficient cache policy PageSpeed Insight means that they want our cache to be stored for a longer time. However, they did not specify any minimum or maximum time for our cache duration but at least six months is a good time period. But do keep in mind this cache policy should depend on your website’s requirements.
Because sometimes even if you have updated your site your visitor will see the old version of the site cause his browser already has a site in the cache so it won’t download it again. So you need to choose a proper policy based on content.
For example, you can make your site’s logo cache for a year since you won’t actually change it very often. And you should store your CSS and JavaScript files for a month since they can be changed very often.
If there are some resources that you don’t wanna cache that should have an explicit no-cache policy. Cause if it doesn’t have that PageSpeed will consider that resource without proper cache policy.
What are some good plugins that can set up an Efficient Cache Policy?
Now let’s know about some good plugins that can help us setting us an efficient cache policy for our WordPress website. Installation of all these plugins is the same just go to the plugin store except WP Rocket since you need to download it from their website. You can look at this article to know about both types of installation.
One more important thing is you need to set the expiration time in the second. The number of seconds in a week is 604800, the number of seconds in a month is 2592000, and the number of seconds in a year is 31536000. You can also use Inch Calculator to convert your days into second.
LiteSpeed Cache (Free)
LiteSpeed Cache is also one of the most popular free plugins for WordPress website caching. This plugin has more than 2 million active downloads and it also has a whopping 5-star rating on the plugin store.
After installing and activating the plugin go to your WordPress dashboard and a new LiteSpeed Cache option will be visible in the left sidebar. Go to LiteSpeed Cache>Cache and then select Browser from the top menu. By default cache expiry is set for a week (604800 sec).
Set the desired time based on your website requirements and save the sittings now your website cache policy should work fine.
W3 Total Cache (Free & Paid)
W3 Total plugin is another great free plugin for caching WordPress websites. It has over one million active downloads and an amazing 4.5-star rating on the WordPress plugin store. The plugin is completely free but they also offer a premium plan for more useful options and it will cost $99 per year.
When first install the plugin it will give you a quick setup option and you just need to check and click next and the plugin will do the necessary setup for you. This plugin has a lot of options so it can be confusing in a setup later.
However, if you manually wanna set up your cache expiry go to your WordPress dashboard navigate to Performance>Browser Cache and from there you can set Expires header lifetime: in seconds.
WP Rocket (Paid)
WP Rocket is one of the most popular plugins for WordPress page speed it is a premium plugin and doesn’t offer any free version neither it is available on the WordPress plugin store. You need to download this plugin from their official website.
The price of this plugin is $49 for a single website, $99 for 3 websites, and $249 for an unlimited number of websites with one-year support and updates. You will still be able to use the plugin after a year but you won’t be able to receive updates or support.
After installing this plugin WP Rocket automatically add the required caching max-expiry time.
Free plugin Vs Paid Plugin
Now you may be wondering what is the difference between free and paid plugins? So for setting up cache expiration all these plugins almost do the same job so there is no difference in setting up cache expiry.
However, they also offer a lot more options than just setting up cache and the price depends on that. And you can use any one of them even the free version is good for you no need to pay.
Cache Policy without plugin
If you wanna avoid using any third-party plugin and wanna set cache policy manually for your website you can do that too. However, it is going to be tough since the changes are based on your server configuration. You also need to be familiar with coding.
Apache Server
If your website is running on Apache Server you can modify your .htaccess file to leverage browser caching without using any WordPress plugin. Just go to your site’s root directory and find the .htaccess file and paste the code given below.
### Optimize default expiration time - BEGIN <span class="token directive-block tag"><span class="token punctuation"><</span>IfModule</span><span class="token directive-block-parameter attr-value"> mod_expires.c</span><span class="token punctuation">></span> # Enable expiration control ExpiresActive On # CSS and JS expiration: 1 week after request ExpiresByType text/css "now plus 1 week" ExpiresByType application/javascript "now plus 1 week" ExpiresByType application/x-javascript "now plus 1 week" # Image files expiration: 1 month after request ExpiresByType image/bmp "now plus 1 month" ExpiresByType image/gif "now plus 1 month" ExpiresByType image/jpeg "now plus 1 month" ExpiresByType image/jp2 "now plus 1 month" ExpiresByType image/pipeg "now plus 1 month" ExpiresByType image/png "now plus 1 month" ExpiresByType image/svg+xml "now plus 1 month" ExpiresByType image/tiff "now plus 1 month" ExpiresByType image/x-icon "now plus 1 month" ExpiresByType image/ico "now plus 1 month" ExpiresByType image/icon "now plus 1 month" ExpiresByType text/ico "now plus 1 month" ExpiresByType application/ico "now plus 1 month" ExpiresByType image/vnd.wap.wbmp "now plus 1 month" # Font files expiration: 1 week after request ExpiresByType application/x-font-ttf "now plus 1 week" ExpiresByType application/x-font-opentype "now plus 1 week" ExpiresByType application/x-font-woff "now plus 1 week" ExpiresByType font/woff2 "now plus 1 week" ExpiresByType image/svg+xml "now plus 1 week" # Audio files expiration: 1 month after request ExpiresByType audio/ogg "now plus 1 month" ExpiresByType application/ogg "now plus 1 month" ExpiresByType audio/basic "now plus 1 month" ExpiresByType audio/mid "now plus 1 month" ExpiresByType audio/midi "now plus 1 month" ExpiresByType audio/mpeg "now plus 1 month" ExpiresByType audio/mp3 "now plus 1 month" ExpiresByType audio/x-aiff "now plus 1 month" ExpiresByType audio/x-mpegurl "now plus 1 month" ExpiresByType audio/x-pn-realaudio "now plus 1 month" ExpiresByType audio/x-wav "now plus 1 month" # Movie files expiration: 1 month after request ExpiresByType application/x-shockwave-flash "now plus 1 month" ExpiresByType x-world/x-vrml "now plus 1 month" ExpiresByType video/x-msvideo "now plus 1 month" ExpiresByType video/mpeg "now plus 1 month" ExpiresByType video/mp4 "now plus 1 month" ExpiresByType video/quicktime "now plus 1 month" ExpiresByType video/x-la-asf "now plus 1 month" ExpiresByType video/x-ms-asf "now plus 1 month" <span class="token directive-block tag"><span class="token punctuation"></</span>IfModule</span><span class="token punctuation">></span> ### Optimize default expiration time - END
Nginx Server
If you are on an Nginx server you can set the browser cache max expiration date by editing the .conf file on your server. You can add the following code to your .conf file.
location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ {
expires 180d;
add_header Cache-Control "public, no-transform";
}
CDNs
Most of the premium CDNs also give the option to change the browser expiration time. You can check documentation based on your specific CDN provider or if have support ask them and change your max-expiration date for at least six months.
Wrapping up
Now you should be able to serve static images with a good caching policy, do keep in mind to always cross-check the changes you have made onto your website.
Since your main objective of reading this article is to improve your website performance and better ranking on PageSpeed Insight I highly recommend checking out our other articles on WordPress PageSpeed.
