Since July 2018, page loading speed is a ranking factor for search engines. This means that well-optimized Magento stores 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.

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.

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:

Chrome DevTools

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:

Response 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.

max-age

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.

But if you don’t have any cache settings, it looks like this:

no-cache

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.

Have you read about JS optimization techniques?

Leave your email and we’ll send you a complete quide at the very moment, no spam!

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.