Holiday season is just around the corner. Is your store up to the challenge? It's high time you checked your Magento 2 and optimized it. And we hope our detailed overview of native Magento and custom options will help you with that task.
So there we go.
Optimization in Magento 2
Magento is a flexible system that offers multiple speed optimization best practices. But there's a small problem.
Handy Magento settings and their combinations are numerous, and it takes some effort to understand which of them your store requires. Besides, they are scattered all over the configuration board, so in case you have no bulky guide or a wise optimization guru at hand, your chances to succeed in Magento optimization are going to zero. This is the main problem with Magento.
Magento 2 also offers a whole pool of default optimization settings, and some of them improve the site performance in GTmetrix and PageSpeed Insights. Some settings, such as Use Flat Catalog Category and Use Flat Catalog Product I described and Minify HTML, are quite popular, while others aren’t.
To save you the trouble of skipping among configuration pages and modules, I’ll explain these settings on our optimization tool. Its key pro is that our devs managed to put all Magento 2 optimization settings on 1 page.
Many thanks, guys!
And there are a couple of native Magento 2 features that help boost optimization results. But first things first.
Native Magento 2 optimization options
Today’s Magento 2 offers a set of settings quite usable for optimization. This set may be enough for optimizing a mid-site store operating region-wide. But in any case, optimization is not an easy task. It can be compared to crossing a dangerous mountain river. When we manage to cross it, the optimization task will be accomplished.
Off we set.
Please sign in as an admin and go to Stores >Configuration >Google Page Speed Optimizer:
You see a list of settings. We’ll optimize them one by one.
So we start with HTML.
HTML optimization in Magento 2
Minify HTML setting in the HTML tab helps to discard page code elements that are not needed for page load via a browser.
Going back to the example. Imagine that to cross the broad river, you have to walk across a suspension bridge with some of the steps broken or missing. To cross the river safely, you have to fix the bridge.
Here the situation is very much alike. Standard page code has breaks, comments and other elements that are irrelevant to page loading. So to speed up the page load, you need to get rid of them. And this is what minification does.
So if we activate Minify HTML setting, the number of symbols to be loaded decreases, and so does the size of the file.
Now let’s move to the 2nd tab - JavaScript.
JavaScript optimization
Here you can find a custom JS optimization tool and native Magento options for JavaScript optimization. We’ll start with the second case.
Merge JavaScript Files allows to unite all JS file, thus reducing the number of HTTP requests that are required to load JavavaScript on the page.
Back to the bridge. Now the bridge surface is made from asphalt, and we can easily run across it to the other side. However, now the bridge got heavy, and it can fall into the river. Scared? Don’t be, we’ll make it lighter. :) To do so, let’s move to the following setting.
Enable JavaScript Bundling is also used to reduce the number of queries. But in this case, we break the united JS into several small-sized files.
Back to the bridge. This time we don’t pour asphalt onto the bridge surface. We try to pave the way using lightweight concrete tiles. This helps to hit the optimum - enabling the bridge fast and safe bridge crossing over the maximally lightweight bridge.
Minify JavaScript Files, just like Minify HTML, crosses out all the elements that are not needed for loading a page, creating a smooth road to our goal, which is to get to the other side of the roaring river.
Do you think it’s done? Not really. Just wait and see what other settings do.
Move JavaScript To Page Bottom transfers JS elements to the bottom of the page. This helps you to start loading JS and showing it to the users in a single action.
Back to the bridge. Let’s imagine that our good old bridge is 100 m long. You have to cross it following a specific rule: run 5 m >walk 10 m >run 7 m >walk 14 m and so on. Mind that the segment length is chosen at random. With Move JavaScript To Page Bottom activated, the rule changes: now you can run the whole sum of segments but only at the end of the bridge.
This way you’ll do the crossing faster, no wasting time on speeding up and slowing down.
And we move on to CSS.
CSS optimization options
The CSS block uses the structure and terms we already know. Here we’ll work on discarding the unnecessary elements, effective compression and transferring:
As a rule, CSS files are optimized along with JS ones, as the two types are closely connected in the page code.
Now let's move to another section - Flat Tables.
Flat Tables for faster Magento 2
This is one of the most popular optimization tools for sites (e-stores) working with big data:
For more information, please read our blogpost on using flat catalog for optimization.
And we move to the last tab.
Other Settings
This tab includes 2 handy settings:
- Sign Static Files that allows browsers to renew cached page elements automatically. This will prevent situations when browsers load outdated cached copies of pages and harm the UX.
- Asynchronous indexing - a security setting that helps prevent clashes between read and write operations in the database, creating temporary storage for orders, which are then moved in bulk to the Order Management grid.
Amasty's add-ons
Our developers managed not only to locate all Magento optimization settings conveniently but also to add some handy features.
Fix all page-slowing factors with one Magento 2 module!
GO TO EXTENSION→
Together with native optimization settings, they speed up page loading with enhanced efficiency.
So what additional features are there? We describe them below.
Custom JS optimization
Now get back to the JavaScript tab. There you'll find Amasty JS Optimization setting. Choose Enabled (Recommended) in the dropdown: 
Now you'll be able to optimize page JS by the algorithm that optimizes the relevant JS files and discards the redundant ones. For more information, please check out the easy-to-follow guide.
Our tool is not the only useful add-on the module has. There are some options allowing image optimization.
Lazyload images and other techniques
Various images - goods, design elements and more - make a large part of a Magento 2 store. With that in mind, we decided to add image optimization option for JPEG, GIF and PNG images. Just mind the following:
If you set Optimize Images to YES, you’ll compress the images and speed up the page loading with no harm to the image quality. This is possible due to a range of flexible settings available, such as Automatically Optimize Images in Catalog or Wysiwyg folder, JPEG optimization tool, PNG optimization tool, GIF optimization tool, Use Webp image format, Create Images in Smaller Resolutions and more.
Mind that you can apply these setting to the newly loaded images via dropdowns:
It’s possible to adapt the images to diverse devices, including smartphones and tablets. Image optimization settings in the module also allow you to cut and compress images when needed.
To learn more about image optimization, please check this section of the guide.
Lazyload optimization for images
This setting allows you to optimize image loading on your site.
The tool makes it possible to choose the image loading option that suits your e-store best. For instance, Use Lazy Loading Images = Yes activates delayed image loading. The images appear only when a user scrolls to them, which speeds up the page loading.
Sum-up
There are no strict rules for promoting and speeding up your e-store.
Having gathered Magento 2 optimization settings in one solution, our developers leave the exact implementation for you. You can combine numerous settings and experiment to find the optimal setting configuration.
And who knows, in some time, this combination might even help you rank higher than Amazon. ;)
P.S. Haven’t you noticed? We’ve crossed the river; it’s a win!