Magento 2 speed optimization techniques – Everyone loves the faster website, especially in eCommerce. We will try to discuss how you can speed up your Magento 2 website in simple steps.

Reduce HTTP/HTTPS Requests

This is by far the most important aspect of speed optimization. Lower the HTTP/https request better it will be. So how does the HTTP/https requests are generated?

Every single static element generated an Http request. Example – images, CSS files or js files. So more no of static elements on your Magento 2 website more no of Http requests are generated.

Please find the speed optimization result of webkul.com

• Combine CSS files
• Combine JS( javascript ) files
• Combine images using sprites
• Use of intersection observers

Reduce DNS lookup

DNS lookup is another important factor, which is important for TTFB ( time to load the first byte )

This is also connected with the Http request concept. There are other factors as well.

• Reduce the page size ( DOM size). Which is super huge especially in Magento 2 websites.
• Magento 2 based websites include loads of images, that increases the page size.
• Wrong computation of menus or filters. Data binding and on-demand ajax load can make a big impact.
• Slow server response
• The server location is also an important factor. Based on your visitor location you should choose the server.
• CDN ( content delivery network ) – Magento 2 based websites must include the CDN. As the CDN will server all the static content. Including images/CSS/js and videos as well.
• CDN proximity also based on user location CDN serves the data. So if the user is from the USA then the static data will be served from the USA data center.

Image Optimisation ( WebP support )

Magento 2 or any eCommerce store includes tons of images. Images are a major concern for speed optimization. Why?

Lossless Image compression – In any Magento 2 website or store, it is highly recommended to use high-quality images for better UX.

But high-quality images come with high bandwidth and higher dom size. As per an experiment, you can find the below image

The content breakdown shows that images are responsible for higher page size. Even this 35% ratio goes up on various websites. Example – Amazon.com it goes above 50%

As you can see images are very critical. WebP and CDN are super important for image optimization.

Magento 2 WebP image support – provides webp image format support for the Magento 2 Store. It also provides a fallback for the same.

WebP is not supported in the Safari web browser. So fallback is critical. Also, Magento 2 cache images are also supported in webP format.

File Compression ( Gzip, Mod_deflate, Brotli )

Content or file compression is also very critical. Currently, there are three best and popular compression modules available –

• Gzip
• mod_deflate
• Brotli
  

All of these modules are quite good. As gzip is quite popular but brotli is more effective. File compression saves a lot of bandwidth and network transfer speed.

Those encoders are highly effective where a huge amount of files is used. Example – Magento 2 websites where huge amount of files are used.

All those encoders can be enabled at webserver config files or at .htaccess files of apache based server.

Brotli– is developed by Google and currently, the most effective compression encode available. It is widely supported by major browsers