Page speed is one of the ranking factors for Google. So almost every store owner thinks about how to optimize Magento performance.
You can check right now your website at PageSpeed Insights to get your score between 0 and 100. A 0 score usually indicates an error in PageSpeed Insights. 100 is the best possible score, which represents a top-performing site.
If your score is lower than 90, then you get recommendations from Google on how to improve it. In this post, we’ll consider how you can solve them all with one optimization solution.
Images Slow Loading
Images, photos and gifs slow loading is one of the most evident problems for any Magento store. They obstruct fast pages loading. For instance, your admins can forget to squeeze images, or your designers can use images in PNG format, or upload the same image twice or more times, etc. As a result, even high ranking websites may receive such recommendations:
Speed up your Magento store in few clicks!
Solution: Optimize images
This should be the first step on the way to speeding Magento up, as you can make it without any dev’s help. Main mistakes at PageSpeed Insights looks like:
Serve images in next-gen formats.
Properly size images.
Google suggests using formats like JPEG 2000, JPEG XR, and WebP, rather than PNG or JPEG. But what if you already have thousands of images on your server? It may become a problem to convert them all one by one.
Besides, although Google doesn’t have any special requirements, there is one more difficulty – loss of quality:
We know how to solve this problem. This Google Page Speed Optimizer can shrink your images without quality loss. In your Magento admin panel, you can choose the needed folder(s) to optimize them in bulk. We use special optimization tools for JPEG, PNG, GIF, WEB. It usually takes 5-10 minutes to optimize 1000 pictures.
Moreover, if you have a heavy mobile or tablet traffic, you can create copies of your images with a suitable resolution for mobile devices. There are 2 algorithms: crop and resize. The Crop algorithm reduces the picture to the maximum width or height and then cuts off the excess. And it can be disproportionate to the original picture. And the Resize algorithm compresses the images according to the size of the image.
After that, you generate a queue based on your configuration setting, which we described above, and specify the value that will indicate the number of images to optimize in a single request to the database files. Next, click the Run optimization Now button. It will initiate the optimization process according to your settings. You can change the settings, generate the new queue, and run a new optimization process in the future.
Website lazy loading
Users don’t see your full website page in one moment. So you can take advantage of it and enable lazy loading system. It means that your page images will be downloaded on demand. It helps you avoid this message from Google:
Defer offscreen images.
Our Optimizer has two options: simple and advanced.
The simple lazy load has the next settings: Use Lazy Loading Images, Lazy Load Script, Preload Images, Preload Images Number, Preload Images Strategy, Ignore Images That Contain.
Enable Lazy Loading Images to make off-screen images load when a customer scrolls to them. Test 2 different scripts jQuery Lazy Script and Native JS Lazy Script to choose one that fits your system best.
Set Preload Images for smooth website loading. These images will load in the main flow. You can also decide what Preload Images Strategy use:
- WebP Format + Image Resolution – This option is better for speed optimization, but sometimes it can lead to some bugs, such as problems with swatches.
- Original Format of Images – with this option images will be loaded in the default format.
The advanced option allows a wide range of customizations. For example, you can turn off it for some pages or use another Lazy Load Script, as they vary being applied to different pages.
Remove unused CSS.
Minimize main-thread work.
If you get these messages, be ready to work with code. Google suggests reducing the unnecessary parts of code and organize it into smaller parts. Minifying CSS and JS files can reduce network payload sizes and script parse time. As a result, time spent parsing, compiling, and executing will be less.
But what if you are not a developer? Google Page Speed Optimizer will come to the rescue. Just turn on the settings, and it will do all the work.
Amasty JS Optimization chooses the most important JS files and merges them into one. This means that your server will process only one file. As a result, your store will work faster. Merging and minifying CSS Files works the same way as JS files optimization.
Read more about leverage browser caching. There you will get the information about how to check if you already use cache and enable it on different servers.
Google Page Speed Optimizer will improve Magento performance with static files.
But don’t forget about the Magento page cache. Full Page Cache Warmer helps you keep it in the current state. It will cache and auto-update all the necessary pages in advance. Install these modules together for the best results.
Enabling a flat catalog is an additional option that you can use to optimize Magento 2 shop performance. It is a table storing all the information about a product or a category. It works by the simple principle: the fewer requests to the server, the better. If you have a big shop with 300 products in many categories, the result will be clear.
Your server may experience maximum loads during the season of active sales. This means you may get conflicts between frontend and backend traffic flows. To avoid this – use asynchronous indexing. Thus, order data will be placed in a temporary storage and moved to the Order Management grid safely. The server load will be less in that case, and, as a result, order processing will be faster.