It will help you to achieve following:
- Reduce page load times for repeated visitors
- More effectively on those website areas or page where users visit frequently
- High website search engine ranking
What is browser caching?
The web page size is variant. Some pages may only consist of few kilobytes and only download few files and some other pages may download a lot of files to display the web page. For example, Facebook, Twitter etc. download a lot of files to render the web page.
If you do not use the browser cache properly, you may come across following issues:
- The large and bulky resources file may eat up the bandwidth of smart device users who are viewing your web page on a mobile phone or tablet.
- Loading of large files can be painful as they take a long time to load resulting in a bad user experience
- Large number of requests to the server results in engaging your server for more time and it has to do more work to serve all requests. This leads to further reduce in page load time.
Browser caching can help you by storing some of the resource files locally at the user’s browser. When they visit for the first time, it will take the same amount of time to render the page. However, when they revisit that web page or any other web page on your website and refresh the page, they already have some of the files they need locally. This will results in decreased page load times.
How does it work?
Browser caching does following:
- “Leveraging” browser cache is done when a webmaster instructs browsers which resources and how long these resources should be stored in browser cache.
Lets take a common example of your website logo. Your website logo is very unlikely to be changed from day to day. By instructing to cache logo image, the server tells the user’s browser to only download this image once a month. Every visit that user makes within a month, would not require another download of the logo image.
How to leverage browser caching?
In order to enable this on your web server, you need to edit your HTTP headers to set expiry dates on some specific types of files.
For majority of the people, the way to edit HTTP headers is to add some code to a file called .htaccess on your web server/host. Find your .htaccess file in root of your domain and add following line of codes at the top your .htaccess file.
## EXPIRES 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 text/html "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 1 month"
## EXPIRES CACHING ##
You can set different expiry dates for different resources depending on your website files. If certain type files are update regularly, you may want to set earlier expiry date on them for example your CSS files which are changed more frequently.
- Be assertive when it comes to caching for all your resources.
- Set expiry date minimum one month of access time (Recommended: acess plus 1 year)
- Don’t set your resource caching more than a year in advance! It won’t help you in many cases
You must be careful when leverage browser caching as if you set the expiry dates too long on some files, users might not be getting the fresh version of your website after updates.