Need to improve the page loading speed of your Magento store? We can do it by leveraging browser cache.

Browser caching helps to store the website data in the user’s local machine. So that the site loads faster when the user visits the same website again.

That is why at Bobcares, we help Magento store owners and Magento hosts to leverage browser caching to improve site speed, as a part of our Server Management Services.

To know how browser caching improves page loading speed, read on.

What is browser caching?

When a user visits a website, the browser downloads files like HTML, CSS, JS, images, and fonts required to load the site.

If the webserver instructs the browser to retain this data, it will be stored in the user’s machine for the specified time. So the next time when the user accesses the site, it loads faster.

At the same time, it reduces the amount of data the user’s browser has to download.

Methods to leverage browser caching in Magento

To drive more customers to an online store, it is important to optimize the page loading speed. Magento is a shopping cart with extensions, modules, themes.

Some users may face trouble with slow loading Magento carts. Hence any measure to improve site loading speed is useful. Leveraging browser caching is one way for it.

Now, let’s see how our Support Engineers enable caching in different web servers.

1. Enable caching for a Magento store in Apache

Apache is one of the popular webservers in use. To enable browser caching in it, we edit the configuration file that is .htaccess.

Two different ways to add the browser caching in Apache are,

1. mod_expires
2. mod_headers

1a. Enabling mod_expires

The method of enabling mod_expires  via .htaccess is the most common method to leverage browser caching.

Here initially, we log into the server as the root user.

Thereafter we access the .htaccess under the Magento root folder.

We then add the following code,

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
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>

Finally, we save the .htaccess file.

Now this leverage browser caching for all users in the server. This method is preferable for dedicated servers

1b. Enabling mod_headers

If the Magento website is in a shared hosting server, the user cannot enable mod_expires. However, the user can use mod_headers to leverage browser caching.

To do this for a user, we add the following code for mod_headers in the .htaccess file.

<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "day, dd month year hh:mm:ss GMT"
Header set Cache-Control "public"
</FilesMatch>
</IfModule>

Hence this enables browser caching for a website in the shared hosting server.

2. Leverage browser caching in Nginx webserver

Nginx is another webserver popular in use. To leverage browser caching for the Magento site on an Nginx server, our Support Engineers add the following code.

For this, we create a new configuration file in the website file location, that is, /etc/nginx/sites-available. Later add the code,

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

location ~* \.(pdf)$ {
expires 30d;
}

Finally, we restart the webserver to save the configuration.

[Need more help to leverage browser caching?- We’re available 24/7.]

Conclusion

In short, in the Magento cart, we leverage browser caching to improve the page loading speed and provide users a fast-loading cart. Today, we saw how our Support Engineers helped our customers leverage browser caching in different web servers.