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. Click here to speed up your site!
What is a browser caching in Magento?
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:
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:
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?
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.