Skip to main content

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

Labels:

Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular posts from this blog

JavaScript Functions

  Hi there, and welcome to another exciting lesson on JavaScript. If this is your first time here, please do well to check out our previous lessons. In the previous lesson, we were discussing JavaScript math methods. It was very intuitive as we got to learn how to use the various math methods. To proceed, we shall be looking at JavaScript functions.  A function in JavaScript like in every other programming language could be defined as a block of code that is written to perform a particular task, and this function is usually invoked or called before it is being implemented. We have been talking about methods throughout the previous lessons right. Do you know that those methods are actually functions? Yes they are functions. You can now have an overview of the importance of functions in every programming language. How do we create a function in JS? To create a function, you follow the format function functionName(Argument) {//Block of code }. Some functions do have a return val...
Post a Comment
Read more

JavaScript Math Methods

Hello everyone, and welcome to another exciting JavaScript lesson. In the last lessons you have been seeing other methods being used in JS (for example, the string methods). We shall go further into exploring other methods. This time, it’s going to be math methods. Do not move an inch because it’s going to be a very exciting. Before we look at what a math method is, let’s have an overview of math objects. A math object in JavaScript is a static built-in object that includes properties and methods used in performing mathematical tasks. Talking about math properties, they have the syntax Math.property . Some examples are Math.E that returns Euler’s number, Math.PI that returns PI, Math.LN2 that returns the natural logarithm of 2, and many others. The various JavaScript methods contained in the math object, thus, make mathematical operations easier and reduce effort as well as time in math-oriented programming. Some JS methods include abs( ), ceil( ), cos( ), sqrt( ), pow( ), log( ) ...
Post a Comment
Read more

How to generate random numbers using NumP1

Hello. Welcome to another edition on this platform. For more better understanding, do checkout our YouTube channel to get the video tutorial. In this article of today, we are going to see how to generate random numbers using any of the following methods: Generating a random number Generating a random float and integer Generating random number arrays Generating random number from an array What is a random number? This is a number which cannot be predicted before its occurrence. This number might not different every time. Programmatically, they are two categories of random numbers:     Pseudo-Random numbers       True Random numbers. Just as programs which are written by programmers are a set of instructions, we must follow an algorithm to generate random numbers. Random numbers which are generated using an algorithm are called Pseudo-Random numbers. To generate a true random number, it is important to get the data from sources such as the keyboards, mou...
Post a Comment
Read more