Magento 2: Leverage browser caching to improve site speed

Jan 29, 2021 | 04 min read

1. QuickRead

agento 2 is the first choice of store owner for their online store. As Magento is enhanced with lots of features and extensions. Also it supports various techniques to boost the speed of the website.
In this blog, we will see one of the techniques which is helpful to improve the page load time.
Leverage browser caching? Might you be thinking, how it will be useful in speedup the website? How can we use this? After reading this blog you will clear with all these questions. Let’s see the blog in detail.

Top Reads

Contact Us

2. What is Browser Caching?

Browser caching helps to store the website data in the user’s local browser. The browsers can only cache static content, which is delivered to the users without any modification from the server such as images, JavaScript, HTML, CSS, and others. Whenever a user accesses the website, the cacheable resources which are stored on your computer are uploaded back. The loading speed of the website is thus improved visibly.
The benefit of this caching is: when you visit a site for the first time, the browser will download content from the server. But, when you revisit the page — or refresh it, the loading time will be shorter since the browser has stored some of the content in the web cache and delivered from the cache once the user revisits the website.

2. What is Browser Caching?

In Browser caching you can specify how long a web browser cached the content such as images, CSS, JS and stored locally. So that when a user access site is in the future this data can download faster.For example, if the interval is one year, then the cache will be cleared after that time.

3. How does it work?

When a user visits a web page, your browser downloads all content of the particular page as well as common static files like css and js files.If you have enabled Leverage Browser Caching, then all statics files will serve from your browser instead of the server. Now when you visit any page of the particular website, it will only download unique contains of the page and static files will serve from your browser. In this way, it speeds up each page of a website.
It works generally by specifying how long web browsers should keep images, CSS, and JS stored locally. Thus the user’s browser will download fewer data while navigating through your pages, which will improve your website’s loading speed. It reduces the web server’s load that eventually reduces your users’ loading time.
Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals. Your logo on your website, for example, is unlikely to change from day to day. By caching this logo image, we can tell the user’s browser to only download this image once a week. Every visit that user makes within a week would not require another download of the logo image.
By the web server telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.
You Might Be Interested In: Magento 2 Speed Optimization Services

4. Why is it important?

The main reason why browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time for your users.
If you’ve used site speed analyzer tools like GTMetrix and Google PageSpeed Insights, you can see they recommend users to enable browser caching.
TThere are various benefits of enabling browser cache. When the user revisits the website, the browser won’t have to download the static content again. All static contents downloaded from the cache instead of loading from the server. Using this mechanism, the user gets website content very fast as it’s downloading from the user’s browser cache. So it’s very important to leverage browser caching methods on your website to improve the loading time.

5. Benefits of Leverage Browser Caching

  • Improve page load time.
  • Save users time.
  • Decrease the load of the server.
  • Reduce HTTP requests.

6. Implementation Method

There are some methods available to leverage browser caching. Firstly, you should understand how often you update your website. Usually, you need to keep the cache from one month to a year. Images take a lot of time to load and are updated rarely, so you can leave them in a cache for a long time, choose the setting like “access plus one year”. And CSS, HTML, and Javascript are usually updated more often, so you can set monthly updates for them.

Leveraging Browser Cache Using .htaccess

To leverage your browser’s caching you can specify how long web browsers cached images, CSS and JS in users’ browsers. When a user revisits the website then the browser will download the data from the browser cache instead of the server, which will improve the loading speed of your website.
You can set time periods like “1 year” or “1 month” with file types, for example, a .jpg file (image) should be cached for a year. If you want to change that and say you want your jpg images cached for a month you would simply replace “1 year” with “1 month”. x
To enable browser caching for Images, CSS and JS, add those lines to your website’s .htaccess file.

1. Enable caching for a Magento store in Apache

Apache is one of the popular web servers in use. To enable browser caching in it, edit the configuration file that is .htaccess.
Two different ways to add the browser caching in Apache are,
  • mod_expires
  • mod_headers
Access the .htaccess under the Magento root folder.
From the above example, each file type has its own expiry time. For instance, css files will be stored for one month. You can change the expiry times according to your needs. However, make sure that it’s not too long because your recurring visitors might not get the updated version of your site.

2. Add Expires Headers in Nginx

You can add Expires headers in Nginx by adding the following to your server block. In this example, you can see how to specify different expiration times based on file types:

7. Conclusion:

In this blog you have learned about how leverage browsing caching methods are helpful for improving website loading time. Definitely it will be helpful to achieve the site speed as it stores data in the user’s browser and loads faster when users revisit the website. If you want more information re;lated to this or any query then feel free to Contact Us.
You Might Be Interested In Our Magento 2 Speed Optimization Services

Related Articles

Contact Us

Jan 29th, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.