Speed Up Your Magento Store: Leverage Browser Caching

Table of Content

Leverage Browser Caching
Posted in: Magento 2 Guides

Starting from July 2018, page loading speed has become a ranking factor for search engines. This means that Magento stores that adhere to all speed optimization best practices, rank better and have more chances to get bigger traffic and, as a result, more customers. We have already written about Magento 1 and Magento 2 speed optimization in our beginner’s guide. And today we will talk more about browser caching. Click here to speed up your site!

What is a browser caching in Magento?

Cach is the information about your website, that can be stored in a users' browser. This includes all the HTML, CSS, JavaScript files, and images. You can take advantage of this to make higher your website speed.

Depending on your server, there are two different ways how to leverage browser caching in Magento 2.

How to check if you already use cache in your Magento store?

Let’s consider the example of how you can easily check if you already use cache in Google Chrome.

Step 1: Open your browser and go to your website, then press F12 (or Fn+F12 for laptops).

Chrome DevTools will open on the right side of the page.

Choose the Network tab and reload the page.

Step 2: Now you need to choose JS/CSS/jpg/jpeg/png/gif file.

You will see a Response Headers section in the tab Headers.

In our example, we see the setting of a maximal age in the cache-control line and in the expires line is the next information: Thu, 25 Jun 2020 13:29:23 GMT. This means that this file will be stored in the cache for one year.

The max-age is the maximum amount of time in seconds that cache can be used again from the last visit. For example, “max-age=315360000” indicates that the website advises remaining this JS file in a browser cache for the next 10 years.

In that case, you need to leverage browser caching.

#1. Leverage browser caching for NGINX

Step 1: Log in to the server via SSH to implement your browser caching in NGINX. Then issue the following command:

cd /etc/nginx/sites-available

nano YOUR_SITE.conf

Step 2: Paste the next code into the server block:

Step 3: Save the changes and exit. Then reload NGINX configuration with the following command: service nginx reload

Step 4: Make sure that everything is ok by reloading the frontend. And you are done!

Also, you can customize these settings. In the example, we have a general seven-day cache for all assets. But you can set any other time period or leave only some types of assets. Thus, you can create your directive option, for example:

There are no limits to the customization options.

#2. Leverage browser caching for Apache

You can add browser caching to your Magento 2 website with .htaccess in two different ways: via mod_expires or via mod_headers. You need to set the date when the cache should be updated.

Just place this code in the .htaccess located in your public_html folder. Edit this file and save it:

With this code, your site will update the information about your jpg, jpeg, gif, png files every year, and pdf, javascript, and flash files will update every month. Of course, you can change these settings and make them individual for your store.

But if you have a shared server and you have no access to Mod_Expires, you can use Mod_headers to leverage browser caching. Please, apply this code:

What settings will be relevant for your cache?

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.

Amasty package solution for your Magento store optimization

If you are looking for a simple and effective solution to leverage browser caching, we can offer you a package from 2 extensions. Install them together, and they will make your website extremely fast for search engines and for your users.

Google Page Speed Optimizer

This extension speeds up your website by managing all the aspects of performance optimization:

  • Optimize images. This mod helps to decrease the size of all JPEG, PNG, and GIF images without losing the quality.
  • Minify HTML, CSS, JS and merge CSS and JS files. This will help you make fast even cache downloading.
  • Sign static files to display always the current version of your website design.
  • Use flat tables to shorten the query in the database.
  • Use asynchronous indexing to prevent conflicts between different operations and more.

Google Page Speed Optimizer goes for Magento 1 and Magento 2 and has Community and Enterprise editions. We provide 90 days of free support and free lifetime updates for each extension.

Full Page Cache Warmer

This mod helps you warm up the cache. In fact, the store cache is cleared by many reasons starting from page content updates and ending with cache lifetime expiration. This tool will timely cache all the necessary pages and auto-update after changes.

There you can:

  • Prioritize pages for warming;
  • Generate queues based on customers' activities;
  • Specify the queue generation source;
  • Exclude pages;
  • Schedule a specific time for warming and more.

This extension suits for Magento 1 and Magento 2 and has Community and Enterprise editions. For everyone, we provide 90 days of free support and free lifetime updates.

These extensions perfectly work together and complement each other, which will help you reach the best speed of your website.

We hope this post was helpful to you. If you still have questions, feel free to ask them in the comments below.

P.S. Special thanks to Anton Shiroky for the help with this post.

June 26, 2019
July 2, 2019
June 25, 2019
Comments
John Candy
July 1, 2019
Nice article. I have found this quite interesting and informative. Thank you for sharing this knowledgeable and easy to understand blog post . Keep Posting !! Keep Blogging !! Looking forward to know more from you.
Reply
Alina Bragina
July 9, 2019
Hi John, thanks for such kind words! Subscribe to <strong><a href="http://eepurl.com/Mv5tD" rel="nofollow">our newsletter to stay updated</a></strong>. ;)
AIRMASTERZ BUSINESS SERVICES
December 10, 2019
great
Reply
Polina Litreyeva
December 13, 2019
Hi! Thanks for your feedback!
Ricardo
March 30, 2020
You said "paste the following code", but there's no code to paste or to see. I guess you've updated wordpress and forgot to update the code highlighter. ;) Thanks for sharing anyway.
Reply
Polina Litreyeva
March 30, 2020
Hello, Ricardo! Thank you for your careful reading and commenting. We've already corrected it.
Thomas
May 23, 2020
You indicate how to cache jpg, jpeg, gif and png for Apache. When is it for webp? Is it : ExpiresByType image/webp "access plus 1 month" ?
Reply
Alina Bragina
September 1, 2020
Hi Thomas, <img src="https://screen.amasty.com/1598943973974.jpg" alt="webp magento" /> <img src="https://screen.amasty.com/1598944009598.jpg" alt="webp magento 2" />
Leave your comment

Your email address will not be published

This blog was created with Amasty Blog Pro

This blog was created with Amasty Blog Pro

© 2009-2024 Amasty. All Rights Reserved.