To solve the above mentioned issue we can use a technique called browser caching which enable the viewers to make a copy of the images in their browser cache. When the user opens our website for the first time, the static content will be cached in the browser cache. When the user opens our website for the second time, the static images from the browser cache is loaded which is efficient instead of loading the image from the web server which is time and bandwidth consuming.
In order to check whether you have enabled browser caching you can use Google PageSpeed (http://developers.google.com/speed/pagespeed/insights/). You can use PageSpeed to know about the performance issues present in your website.
Since I have not enabled browser caching in the website, I have red exclamation point for “Leverage browser caching”. The images have their expiration property not set which is represented by “(expiration not specified)”. Follow the below steps to enable browser caching.
Steps to enable browser caching through .htaccess in Linux (Ubuntu) Operating System:
1. Open the root folder of your website and make a backup of .htaccess file.
2. Open the .htaccess file and paste the following code at the top and save the file.
ExpiresDefault “access plus 2 days”
ExpiresByType image/x-ico “access plus 2 days”
ExpiresByType image/jpg “access plus 2 days”
ExpiresByType image/jpeg “access plus 2 days”
ExpiresByType image/gif “access plus 2 days”
ExpiresByType image/png “access plus 2 days”
ExpiresByType text/css “access plus 2 days”
Make sure you have enabled mod_expires module in your system.
3. “access plus 2 days” means that the content cached by the browser will last for 2 days after the website or webpage is viewed for the first time.
4. Browser caching is enabled now and you can verify it by using PageSpeed service. You will now find “(2 days)” set for the images instead of “(expiration not specified)” in the PageSpeed website and now your website will perform better than before. You can also change the duration from 2 days to any duration you want. Make the duration less if you are changing the page design frequently because even if you chang the header image or any other image, the new image will load only after the given duration(2 days) expires. i.e. The old images gets loaded from the browser until the given expire duration.
Also note that some internet users would have disabled browser caching for whom this caching will not happen. You can follow the link Blogging Tips & Guidelines – SEO, Backlinks and Design to improve your blog or website in many other aspects.