If you Leverage browser caching of static assets, it will improve your website speed. When you check your site speed using Pingdom tool, GTMetrix or Google page speed insights, you may see this message. Fortunately, it is very easy to avoid this message. This tutorial will give you a simple procedure to Leverage browser caching of static assets.
What is Browser Cache?
When you open any web page first time in your browser, the browser will download web page content from the server. The browser will store static content like images, CSS, and scripts. When you open the same web page the second time, the browser will not download from the server, it will show you already downloaded content. So it will reduce server load and improves page load speed. The user will get superb experience so that they will love your website.
When browser stores static content, it is called browser cache.
What is Leverage Browser Caching?
Browser cache will automatically expire within a short period. When browser cache expires, a browser has to download entire content from your server. You need to define cache expiration time for at least one week. You will have to tell your server about expiration period. Then the server will tell the browsers about cache expiration time.
For Example, if you have set cache expiration period 1 month for images. When a browser downloads your web page, your server will inform the browser that browser should keep images from that page for 1 month. So when the user opens same web page within one month, the browser will show cached images instead of loading from your server.
Setting cache expiration period is called Leverage Browser Caching.
Now I will show you how you can tell your server about cache expiration period. You can use the .htaccess file or WordPress plugin to do this.
Method1: Leverage browser caching of static assets using .htaccess
It is the very easy method. You just need to add below code to .htaccess file. To find .htaccess file Go to cPanel -> File Manager -> Public_html. Select .htaccess file. Click Edit. Copy below code and paste at the end of the .htaccess file. Save file.
|## LEVERAGE BROWSER CACHING ##
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
## LEVERAGE BROWSER CACHING ##
Now your work is done. If you want to improve your WordPress website speed further, you need to compress images. You can use EWWW Image Optimizer or ShortPixel (50% Extra Image Credits link). Both work very well. But ShortPixel is cheaper than the former.
- Read: How I Compress Images for my WordPress website
- Don’t you resize images? You must do. Read Why?
Method2: Using W3 Total Cache plugin
You can also use W3 total cache plugin to Leverage browser caching.
Go to General Settings of W3 total cache and Enable Browser cache.
Now go to Browser Cache section from the left menu. Check all options. Those are Set Expires header, set cache control header, set Entity Tag(eTag), Set W3 Total Cache header and Enable HTTP (gzip) compression.
That’s it. It will work.
I prefer to use the first method. Using .htaccess file is the active method. Because if you remove W3 Total Cache plugin in future, you will lose your changes. Just place above code in the .htaccess file and get peace.