What is leverage browser caching?

Leverage browser caching is an act of storing static resource of a website to local machine (visitor’s browser). It is all about reusability of resource. When a user requests a webpage, the browser loads several things from server to display webpage such as images, CSS files, Script file and other resources. All these files are downloaded to local machine from server which takes time to load a page and engages server to fulfill every request.
Enabling caching instructs browser to remember or store static resources in browser cache on user’s computer for future use. When user navigates to other pages of the website or revisited the website, then browser does not load again from server it loads the similar resources from local computer which is definitely loads your page faster. Leveraging browser caching is very useful to minimize the page load time and speed up your website for repeated visits.

How Browser Cache Works?

Browser cache stores/saves certain files on your computer hard disk. Cache works by marking certain resources of page as being needed to be update at different intervals. Every browser implements a HTTP Cache. To enable browser caching, you have to cache the server response by adding HTTP headers in the response. This instructs browser what to cache and how long to cache.  

Why Caching is Important?

Leveraging browser caching is very important because it reduces page load time by making less amount of data to be downloaded from server and it also reduces server load by making fewer requests need to be made by your server.

How to enable or leverage browser caching?

Browser caching can be enabled by editing HTTP headers to set expiry of certain types of resources in server response. To enable browser caching simply add the following code in your .htaccess file on your server. It should be added at the top of your .htaccess file. This code tells the browser what to store and how long the resource should be store on local machine.

<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 15 days" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule>

Advantages & Disadvantages of Leveraging Browser Cache.

Browser cache works in many different and there are advantages and disadvantages of using this feature so be careful when you enable browser cache. 

The main advantage or goal of browser cache is to speed up website loading and minimize server response needed to load a page. 

The main disadvantage of browser cache is stale data and its complexity. You should be careful when enabling caching as if you set too long expiry of certain resource, user might not get the fresh version of your webpage after updates. For instance, iIf you've cached a style file (.css), but in the mean time the webmaster has delete a particular style, the users will get a old style of your page that don't exists. There's a great deal of complexity in figuring out how to deal with this, but mostly it's about creating hashes/identifiers for caches that mean something to the state of the data in the cache, or business logic that resets the cache with the new data bits. 

For further discussion or looking for help you can comments or contact me via my SEO Profile