If you Leverage browser caching of static assets, it will improve your website speed. When you check your site speed using the 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 a superb experience so that they will love your website.
When the 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 the 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 the expiration period. Then the server will tell the browsers about cache expiration time.
For Example, if you have set a cache expiration period 1 month for images. When a browser downloads your web page, your server will inform the browser that the browser should keep images from that page for 1 month. So when the user opens the same web page within one month, the browser will show cached images instead of loading from your server.
Setting the cache expiration period is called Leverage Browser Caching.
Now I will show you how you can tell your server about the cache expiration period. You can use the .htaccess file or WordPress plugin to do this.
Method 1: Leverage browser caching of static assets using .htaccess
Video Tutorial:
If you’re facing any trouble finding the .httaccess file watch the video tutorial below. Else just paste the below code to your .htaccess file.
It is a very easy method. You just need to add the below code to the .htaccess file. To find .htaccess file Go to cPanel -> File Manager -> Public_html. Select .htaccess file. Click Edit. Copy the below code and paste at the end of the .htaccess file. Save file.
Make sure to create a backup of the existing .httacess file before any changes. If something goes wrong, you can easily restore your original .htaccess file.
| ## LEVERAGE BROWSER CACHING ## <IfModule mod_expires.c> ExpiresActive On 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-javascript “access 1 month” ExpiresByType application/javascript “access 1 month” ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresByType image/x-icon “access 1 year” ExpiresDefault “access 2 days” </IfModule> ## 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.
Method 2: 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 the 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, Enable HTTP (gzip) compression, set last-modified header, and Remove query strings from static resources
That’s it. It will work.
Conclusion:
I prefer to use the first method. Using the .htaccess file is the active method. Because if you remove the W3 Total Cache plugin in the future, you will lose your changes. Just place the above code in the .htaccess file and get peace.
I hope this tutorial helped you to Leverage browser caching of static assets. Let us know which method you are using. Want more blogging tips, follow BlogVwant on Facebook and Twitter.
Hi
Where (what part of the file) exactly must you put this code in the htaccess file??
You can place anywhere. If you are confused, better place at the end.