Types of caching in Web Application

In this article, we will be discussing on the Types of caching in Web Application. Firstly we'll discuss on the Introduction to Cache. Secondly, we'll get familiar with the Types of it. Later will understand the real-time application for the same.

Following are the sections of this article:-

1. Introduction
2. Types of Caching
3. Application of Caching
4. Conclusion

1. Introduction

Let us understand on the general concept of Cache, Its a concept where the frequently accessed data will be stored in this memory location instead on RAM, so as to avoid the latency in reading the particular data by the system.
Now lets understand how its related or important to web-application or website. A fast-loading web-application can make or break the business of the organization. There might be variety of steps we can take to speed up the loading times, Also its important to not tot avoid web-caching.
While boosting loading speeds of the web application is important, caching also reduces costs related to network. It is possible to cache the website content at different points(like, between server(at back end) & client side(browsers). In the up-coming section we'll discuss on the Types of Caching related to Web Applications.

2. Types of Caching

There are various points within the website point of view where you can cache data. So that the websites response will be improved. Following are some common types & brief description of the same:

• Site cache
• Server cache
• Browser cache

i. Site Cache
A site cache or web-page cache stores website data the first time when an user loads that particular web-page. Each time a user returns to the website, the previously saved elements are quickly accessed and displayed to visitors. This is a type of client-side caching, which means that all the stored data(or elements) are controlled at the user's end. If a page has elements that never change, we can set the cache expiration date far into the future. And if the elements that change regularly should have limited expiration time so they are timely refreshed. Otherwise, the website will continue to display outdated or older content to users loading it from their site caches, even after we have published updates. Hence for this reason, site caching is ideal for websites with a lot of static content.

ii. Server Cache
This type of cache is done at the Server side of the website or web application. Server Cache includes many types of cache under its name, some of them are- Content Delivery Network (CDN) caching, Object Caching and Opcode Caching. In this method, If the requested content is available at the Server Cache, it'll immediately return to the browser right away. AS discussed that this Cache method has different sub-type, we can see their importance vary depending up-on the specific application of the same.
For Content Delivery Network(CDN) we have a popular method- CloudFlare for the WordPress consumers. And if the user requires to activate Object Caching, WordPress has a built-in system through which they can achieve it. Now coming for Opcode Caching, even for this type user's need install a WordPress Plug-in like WP Rocket. Once it has been installed and activated, Opcode Caching will automatically initiated.

iii. Browser Cache
As the name suggests, Browser caching is a type of website caching built into the client's end(user) web browser.
A browser cache can contain HTML pages, CSS stylesheets, images, and other multimedia content. Website elements are stored by the browser on the visitor computer and grouped with other files associated with the content. Sometimes it looks like the concept will overlap with Site Cache. The only difference between Browser Cache & Site Cache, here the browser which is installed at the user's end will control the cache instead of the Site alone.

3. Applications of Caching

There are many applications of caching in Web Application. We'll discuss the application for the above caching types Application. When cached at browser side (or at user end), the website data does not use as many resources. This reduces the impact on the server and could save organization money on network costs.

i. Site Cache Application
As we have discussed the concept behind this, to make the most of this concept, Consider using Plugins(like- WordPress Plug-in) and activate them. After activation, most plug-in will automatically enable page caching. Ideal use of this method is for a website having Static content.

ii. Server Cache Application
This method mainly reduces the load on the server. Whenever a request is made by the user through website, the cache will respond immediately if it has stored the responses for frequent request. Ideal use of this method is for high-traffic websites that need to reduce server load.

iii. Browser Cache Application
The method which we have explained at point i can also be used. But the user can explicitly with his own interest can manually enable browser cache. To achieve this, user need to access the website .htaccess file of the website through a File Transfer Protocol and its Client (like- FileZilla, etc) to access the server. Then, Right-click on .htaccess file and select View/Edit. Now this file will open in Notepad.
Paste the following code inside that file,

<IfModule mod_expires.c>
ExpiresActive On

# Images
ExpiresByType image/jpeg "access plus 2 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"    
ExpiresByType image/gif "access plus 2 year"
ExpiresByType image/png "access plus 2 year"

</IfModule>

The code example is mostly for longer expiration time, If the web application has the elements that are more dynamic than static, In that case we need to decrease the ExpiresByType for shorter period to avoid rendering the same old content of the browser. (The above code can also be written for other types or format of data like- audio, video, CSS stylesheets, Javascripts)

4. Conclusion

We are at the end of the article, by this time you might have got to know the importance of the Caching, it's types related to Web application. Also we got some understanding on Client & Server side Caching.

Hope this is an informative article, Thanks!