Magento 2 Performance Optimization (2021)

Magento 2 Performance Optimization (2021)

Magento 2 performance optimization is very important for visitors. Magento 2 Speed Optimization improves web page performance in order to place your store at the top of Google search rating. Boost your website traffic by speed optimization. You can get an endless stream of new visitors.

 How can we check the current website page speed and performance?

 We can check the website page speed using below two ways.

  1. GTmetrix
  2. Google Page speed.

 Let me check my website(trycoder) page speed.

GT Metrix:

First, go to the https://gtmetrix.com/ website. After entering your website URL and clicking on the “Test Your Website” button.

Magento 2 Performance Optimization


Google PageSpeed:

First, go to the https://developers.google.com/speed/pagespeed/insights/ website and enter your website URL. Then click on the “ANALYZE” button.

Desktop - 

Magento 2 Performance Optimization

Mobile -

 Magento 2 Performance Optimization

Magento 2 Default page speed settings

  1. Magento 2 image optimization
  2. Enable Merge CSS, JavaScript in Magento 2
  3. Enable Flat Categories and Products
  4. Caching
  5. Compression
  6. Use production mode
  7. JS Binding
  8. Comprese the JS

 

Let’s me discuss:

Magento 2 image optimization :

Image optimization is very important for speeding up your website. We can optimize the images using GT metrix. Generate the latest performance report of your website.

Magento 2 Performance Optimization

  • Now, Go to the  “Structure” tab as per the above image and open the “Serve images in next-gen formats” tab. You can check the optimized images of your website. You can use those images and replace your website.
Magento 2 Performance Optimization


  Especially For Magento, There are many extensions available for image optimization. You can check the magento marketplace available image optimization extension

I suggest you use 👉 MagePlaza Image optimization 

Enable Merge CSS, JavaScript in Magento 2:

We can merge the CSS, javascript file using the admin panel in Magento 2. Open the admin panel.

Note:

Make sure, You need to enable the developer mode before switching to backend using below command.

“Php bin/magento deploy:mode:set developer”

 

Now, Go to the “Store - Configuration” Open the Advanced tab and click on the “Developer” link.

Magento 2 Performance Optimization

Magento 2 Performance Optimization

After opening the Developer tab, You need to open the JavaScript Settings as per the below screenshot.

Magento 2 Performance Optimization

Make enabled below tabs.

  1. Merge JavaScript Files
  2. Enable JavaScript Bundling
  3. Minify JavaScript Files.
  4. Move JS code to the bottom of the page.

 

Now, click on the CSS Settings tab as per the below screenshot.

Magento 2 Performance Optimization

Make enabled below tabs.

  1. Merge CSS Files.
  2. Minify CSS Files.

Now, Done all the settings, then click on the “Save Config” top right button.

 

Enabled the Flat Categories and Products:

  • Go to the Stores->Configuration and open the  Catalog tab.
  • Then, Open the “Storefront” tab as per the above screenshot. Enabled both and click on the “Save Config” button.

Note : Make sure to always enable the cache. Sometimes it takes more time for website load.

Php bin/magento cache:clean

  • When you move a website to a live server, you always need to use the production mode.

Cmd command : php bin/magento deploy:mode:set production

Ask Question #trycoder
Facebook Page👉 https://bit.ly/3o688OF
Twitter👉 https://bit.ly/2LNwmAb
Watch more videos here
Click to SUBSCRIBE to more Videos!

Please Like, Comment, Share and Subscribe THANK YOU!

0 Comments