Learn about browser caching and how to leverage browser caching by setting expiration dates on the cache. Browser caching stores web page resource files like (JS, CSS, images and other resources) on a local computer when a user visits a web page.
page speed is one of the Google ranking factors. Browser caching improves the page loading for repeat visitors. Especially it is effective for royal visitors who visit your website regularly.
see more:
- How to add recent tweets widget to your website?
- Learn tip to download youtube videos with VLC media player.
It reduces server load and number of HTTP requests to the server from the browser because most of the files cached within the browser memory. When a user moves next page on your website all common data like (logo, CSS files, and Html files etc.) loaded automatically from the browser, no need to fetch again from the server.
It reduces the server load and server resource consumption and Improves page speed.When you test website speed in google page insights, sometimes it suggests “Leverage browser caching”.
To enable browser caching you need to edit HTTP headers to set expiry dates on certain types of files. It is better to set expiration dates on certain files for browser caching.
If you not, leverage browser caching, any changes made on your websites not visible to users because previous web page data is present in their browser cache. So set expires date to re-fetch the browser data after a certain interval of time to eliminate this problem.
To leverage your browser’s caching generally means how long browsers should keep images, CSS and JS stored locally. If you set expiration time, then the server will tell the visitor’s browsers to clear that cache.
To leverage browser caching for JS, CSS, and Images, add these lines of code to your .htaccess file.
Use any FTP clients like FileZilla (all devices), WinSCP(windows) and Transmit (Mac OS X). find your .htaccess file in the root folder(Generally, public_html) on the server.
Simple steps to set leverage browser caching:
1) Download the .htaccess file and add this snippet of code at the bottom. You can edit that file using file editor like notepad, notepad++ and WordPad.
## EXPIRES 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/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES CACHING ##
2) Delete the existing .htaccess file in server.
3) Upload the modified .htaccess file.
Setting the expiry dates for the cache is up to you. Depending on your website files you can change. If certain files updates more frequently, it is better to set an earlier expiry dates at a minimum of one month. Don’t set expiry date more than one year.
