Magento 2 Performance Optimization

For Magento 2 stores, Magento 2 Performance Optimizing is one of the important factors to lead your business more successful. Remember that if you want to keep customers stay longer with you, it’s essential to bring the great experience during the time they spent on your site. Thus, a fast online store is an ideal one that is more friendly with many visitors as you expect instead of a bad performance of the website. Only when your store is closer to the consumers, increasing conversion rate as well as optimizing the revenue become easier and easier.

According to Benchmark Testing, that makes the comparison between out-of-the-box supported and recommended configurations for Magento Enterprise Edition 2.0 and Magento Enterprise Edition 1.14.2. The test proved that Magento 2.0 is considered as the greater platform than Magento 1.x through all metrics and use cases. With Magento ver.2, you will handle the surprise results:

• Process up to 39% more orders per hour
• Deliver nearly instant server response times for catalog browsing
• Enable up to 66% faster add-to-cart server response times
• Provide up to 51% faster end-to-end checkout times

Nowadays, when the awareness of Magento 2 performance is widespread, many additional technologies are integrated to support Magento 2 performance optimizing such as Varnish, Redis, Nginx and even full page caching solution. Thanks to the existing tools, it is simple for the development team to start the decoupling of functionality, then upgrade new levels of flexibility with the stable compatibility and operability among components. That is the great idea to design the better interface both in the server response time but also in the browser side rendering speeds. After all, you will get big step changes of improving Magento 2 performance and enhance customer experience at your store.

Say Goodbye to Slow Page Loading

Get Website Performance Audit. Speed it up - earn more sales & customer satisfaction.

Get Website Audit

Related Post

• Integrate Progressive Web App in Magento 2
• Magento 2 image optimization
• Enable Merge CSS, JavaScript in Magento 2

How to Optimize Magento 2 Performance

As a normal eCommerce page, it takes more than 3s to load a product page. Do you think it is so annoying if your customers need to browse through five similar pages at your website? Of course, they will be never patient to wait for the delay. Please keep your eyes on this post and find the relevant method to speed up the site performance.

3 extensions by Mageplaza can help optimize Magento 2 store:

• Optimize Magento 2 Performance with SEO extension
• Optimize Checkout Process
• Improved Layered Navigation

Steps to Optimize Performance

• Step 1: Enable Flat Categories and Products
• Step 2: Merge CSS and JS Files
• Step 3: Content Delivery Network
• Step 4: Caching
• Step 5: Image Optimization
• Step 6: Enable Compression
• Step 7: Reduce Server Response Time
• Step 8: Magento Updates

Firstly, let’s check score in Google PageSpeed Tools

Step 1: Enable Flat Categories and Products

May be you know that one of the aspects having a great influence on the speed of Magento 2 performance is the ability of database loading. In the configuration, enable Flat Catalog to speed up that. Flat Catalog allows offloading the number of the database once there is any request for showing the product. At the same time, the MySQL query complexity will be reduced.

Go to backend, Stores > Configuration > Catalog > Catalog > Storefront, choose Yes in Use Flat Catalog Category field.

Step 2: Merge CSS and JS Files

The next step you need to follow is merging and minifying CSS and Javascript files, that means making the web page as light as possible for the fast loading. Please put Magento 2 into production mode.

./bin/magento deploy:mode:set production

Javascript File

• Go to backend, Stores -> Configuration > Advanced > Developer > JavaScript Settings
• Set Merge JavaScript Files to Yes
• Set Minify JavaScript Files to Yes

CSS File

• Go to backend, Stores > Configuration > Advanced > Developer > CSS Settings
• Set Merge CSS Files to Yes
• Set Minify CSS Files to Yes

When complete, Save Config and flush cache to activate the change.

Step 3: Content Delivery Network

Content Delivery Network (CDN) is a special system that can connect all cache servers. In addition to supported geographical proximity, CDN will take over the delivering web content and fasten the page loading.

Please follow this guide to set up CDN for Magento 2 stores. Go to backend, Stores -> Configuration > General > Web > Base URLs (Secure)

Lear more: How to Configure Content Delivery Network

Step 4: Caching

In the backend, System > Cache Management.

Here, you find a plenty of caching options to flush your Magento 2 cache. Tap Enable and then Submit the options which you need.

Step 5: Image Optimization

The image is a necessary factor to make your Magento 2 store’s performance more vivid. However, the image size that is too heavy to upload on your site is one of the crucial reason for the overload page. Thus, compressing image should be done before submitting any image. You can use JPEG format for Product images, and PNG or SVG for the layout as well as the logo.

Use Image Optimizer to compress your store’s images automatically.

Get Image Optimizer

Step 6: Enable Compression

Follow the resources to enable compression by Google’s offer.

Let’s change nginx compression directives from:

gzip_types: text/plain application/x-javascript text/javascript text/xml text/css image/x-icon image/bmp image/png image/gif; to gzip_types:;

Step 7: Reduce Server Response Time

By Magento 2 Buit-in cache functionality, your site’s response time is quite good with approximately 0.5s. But it is not ideal time as Google expects. Due to that, Magento 2 supports Full Page Cache via Varnish natively. Let’s setup Varnish to get the first byte around 0.1-0.2s.

Go to backend, Stores > Configuration > Advanced > System > Full Page Cache, tranfer Caching Application to Varish Cache.

Open Varnish Configuration section, complete the settings:

Step 8: Magento Updates

Remember update your Magento 2 store. Mageplaza team will try the best to help you optimize the site performance.

Result after optimizing Magento 2 store

Performance Toolkit (Optional)

Installation

jMeter:

– go to http://jmeter.apache.org/download_jmeter.cgi and download jMeter in Binary section (pay you attention that Java 6 or later is required) – unzip archive

Plugins (only if you want to use additional reports (like graphs)):

– go to http://jmeter-plugins.org/downloads/all/ and download JMeterPlugins-Standard and JMeterPlugins-Extras

– unzip them to appropriate ext directory of your jMeter instance.

– additional reports can now be added via GUI.

Usage

Before running the jMeter tests for the first time, you will need to first use bin/magento setup:performance:generate-fixtures command to generate the test data.

Run via console

Scenario can accept parameters that are described bellow in format <parameter_name:default_value>:

<host:localhost> URL component 'host' of application being tested (URL or IP). Default is 'localhost'.

<base_path:/> Base path for tested site. Default is '/'.

<report_save_path:./> Path where reports will be saved. Reports will be saved in current working directory by default. Default is './'.

<ramp_period:300> Ramp period (seconds). Period the request will be distributed within. Default is '300'.

<orders:0> Number of orders in the period specified in the current allocation. If <orders> is specified, the <users> parameter will be recalculated. Default is '0'.

<users:100> Number of concurrent users. Recommended  amount is 100. Minimal amount is 10. Default is '100'.

<view_product_add_to_cart_percent:62/> Percentage of users that will only reach the add to cart stage. Default is '62'.

<view_catalog_percent:30/> Percentage of users that will only reach the view catalog stage. Default is '30'.

<guest_checkout_percent:4/> Percentage of users that will reach the guest checkout stage. Default is '4'.

<customer_checkout_percent:4/> Percentage of users that will reach the (logged-in) customer checkout stage. Default is '4'.

<loops:1/> Number of loops to run. Default is '1'.

<admin_path:admin/> Admin backend path. Default is 'admin'.

<admin-user:admin/> Admin backend user. Default is 'admin'.

<admin-password:123123q/> Admin backend password. Default is '123123q'.

<think_time_deviation:1000> Deviation (ms) for "think time" emulation. Default is '1000'.

<think_time_delay_offset:2000> Constant delay offset (ms) for "think time" emulation. Default is '2000'.

Necessary parameters must be passed to [command line](https://www.mageplaza.com/devdocs/magento-2-command-line-interface-cli.html) with "J" prefix: "-J<parameter_name>=<parameter_value>"

Example:

> cd /directory_of_jMeter/bin/

> jmeter -n -t /path_to_benchmark_file/benchmark.jmx -Jhost=magento2.dev -Jbase_path=/ -Jusers=100 -Jramp_period=300 -Jreport_save_path=./

Run via GUI

• Open jMeter/bin directory and run jmeter.bat

• Click in menu File -> Open (Ctrl+O) and select file; or drag and drop benchmark.jmx file in opened GUI.

On the first tab ‘Test Toolkit’ you can change ‘User Defined variables’ like as <host>, <users>, <ramp_period>, <orders>, <report_save_path>.

For running script click “Start” (green arrow in the top menu).

Results of running (Report types)

After running via GUI you can see result of working in left panel. Choose the corresponding report.

After running script via console report will be generated in the path that has been specified in <report_save_path>.

Threads

jMeter script consists of five threads. Setup thread and four user threads.

Percentage ratio between threads is as follows:

Browsing, adding items to the cart and abandon cart (BrowsAddToCart suffix in reports) - 62%

Just browsing (BrowsAddToCart suffix in reports) - 30%

Browsing, adding items to cart and checkout it as guest (GuestChkt suffix in reports) - 4%

Browsing, adding items to cart and checkout as registered customer (CustomerChkt suffix in reports) - 4%

About reports:

Summary Report.

Report contains aggregated information about threads.

Report file name is {report_save_path}/summary-report.log

Details http://jmeter.apache.org/usermanual/component_reference.html#Summary_Report

Detailed URLs report.

Report contains information about URLs.

Pay your attention that URL is displayed only in generated report file (in GUI, URL is not displayed).

Report file name is {report_save_path}/detailed-urls-report.log (can be open as csv format). Details http://jmeter.apache.org/usermanual/component_reference.html#View_Results_in_Table

About other types read on http://jmeter.apache.org/usermanual/component_reference.html

Magento 2 Performance Optimization Service

If your company is searching for a professional service to cut down the performance time effectively, Mageplaza is happy help you! Our Magento 2 Speed & Performance Service is trusted by lots of clients all around the world. We make sure to achieve the following results:

• Google PageSpeed Insights Lab Data: reaching all Green scores on all pages
• Google PageSpeed Insights Audit: passing all
• Server response time: <300 miliseconds
• Backend server response time for cached pages: <300 miliseconds
• No delays even with 3x-5x traffic surge
• No break-in functionality and design

Don’t hesitate to contact us for free consultations and more benefits!

Get Website Performance Audit