We know how to improve Magento 2 page speed. Join & learn more.

When attempting to speed up your site most likely you start with a tool that analyzes your page's speed performance. It's probably the most well-known web performance tool: Google Page Speed Insights. It happens that a website gets slow pages and low score. That's no reason to keep it so.

In this post, we'll go over 8 best practices you can use to improve your Magento 2 site performance. Good news is, that we come up with new Page Speed module.

Now let's look at the features for the best Magento 2 speed extension. We bet that will help you to make your store faster.

Test gzip compression

Gzipping your website can load your pages faster and significantly reduce the size of all files. In case a speed-performance tool shows the results your website still needs the gzip compression, we recommend you to enable that on your web server. Page Speed module Test gzip compression.

You can use the examples of enabling compression both for Apache and Nginx.

Minify HTML in Magento 2

Minification is the process of minimizing code and markup in your store pages. Compacting HTML code you will increase your website speed that in turn will improve the user experience.

Page Speed module supports the minification of HTML. With configuration settings you will:

• minify Js content
• minify CSS
• Minify Templates

Compress CSS in Magento 2

When making Magento 2 faster, the minification process is one of the main methods to reduce page load times and bandwidth usage.

Page Speed module supports CSS merging and minification functionality. That allows you to:

• merge CSS files
• minify CSS files
• optimise CSS delivery by enabling LoadCSS js library
• minify the critical CSS

Concerning the last point, this is about reducing the size of the above-the-fold or in other words visible content when the page loads. Above-the-fold content is the part of a page that your visitors see before scrolling down. So you should make it load and display as fast as possible.

Our module provides a way to help you optimize the visible content by setting the critical CSS of your store pages. The module allows generating CSS styles for your website. That will result in faster rendering the important content of your store.

One of the other ways to download only the needed content is to make it less. The images optimization is what you have else to focus one. Keep reading to learn more.

Magento 2 image optimization

When creating the engaging user experience, the website images and speed are both welcome. However, some images slow down a website.

Page Speed extension provides the image processing settings that will help you to reduce image download sizes, as consequence, speed up the website.

The module includes:

• the image adapter that will help you to compress more images without losing quality settings for optimizing catalog images
• lazy loader for images

Lazy image loading

Lazy image loading is must-have for improved Magento 2 performance. Once you enable a lazy loader, your customers will see the images when they appear in the browser's viewport. The feature is particularly important for long category pages.

With Page Speed module settings you could enable lazy image loading, set the images to ignore and use an option that auto specifies the image dimensions for rendering faster.

By returning to the above-the-fold content, we know that we should apply some JS rules to the better performance of the visible content. One of the rule is eliminate render-blocking JavaScript.

Remove render-block JavaScript in Magento 2...and not only that

Page Speed module supports deferred javascript and other features that will help you to reduce the number of requests it takes to load your site. With configuration settings you will:

• merge js files
• minify js files
• enable Javascript bundling
• remove render-block JavaScript

The module adding unpack option. If it is enabled, then all inline js get type = "text/defer-javascript" (instead of text/javascript). Then they will be unpacked by a special small unpacking piece js code (unpacker-ohm). The important thing is that before turning it on, everything needs to be checked to ensure the main pages are free of js errors.

Adding Expires Headers

Usually, to avoid a server overloading, you have to create a request to every file your web page transfers. The process of file downloading impacts the page load time. Expires headers tell the browser whether it should request a specific file from a server or whether it should take it from browser's cache.

Page Speed module allows adding Expires Headers that will help to:

• reduce the number of HTTP requests for the server
• allow your returning customers to reuse the cache files that have been stored in the browser
• set up the public content cache lifetime in seconds.

Enable DNS-prefetch

DNS lookup is a process of finding a domain name on a web and translating it to an IP address. It can take from 10 to 100 of milliseconds. If a customer is already on your website, his browser already knows his location. But in case you download resources from other sites to your page, the browser needs time to process DNS information for each of them, as it finds them in HTML.

So in order to simplify this process, you have to enable DNS-prefetch for external sites on your page. This is very important when if your page resources are in several domains.

Page Speed module enables the "DNS-prefetch" that will help you to minimize DNS and improve Magento 2 website speed.

In summary

Indicating a page is performing well was our goal today. Because after we've implemented different optimization practices provided by the Page Speed module, we do get a high score on Google PageSpeed Insights.

We offer you to learn from our experience. Also if your Magento 2 pages already render in the best way, please share your experience on how you've been achieved good speed results.