How to speed up Magento 2 out of the box

From Brian Nelson Ramblings
Revision as of 02:54, 19 June 2019 by Brian (Talk | contribs) (Created page with "==How to speed up Magento 2 out of the box== Magento 2 (M2) comes as a new era of e-commerce innovation. It has more features and is more complex, and has more lines of code,...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

How to speed up Magento 2 out of the box

Magento 2 (M2) comes as a new era of e-commerce innovation. It has more features and is more complex, and has more lines of code, compared to the first generation of this popular platform.

Such a level of flexibility comes at a price, M2 can be slow. Poor performance is the number one complaint from store owners and developers.

In this article I will share my expertise on how to make Magento 2 faster, and provide 10 practical tips to optimize the performance of any M2 site.

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.

**Note This may end badly if you have incompatible extensions

Merge/Minify Javascript Files

Go to backend, Stores -> Configuration > Advanced > Developer > JavaScript Settings

  1. Set Merge JavaScript Files to Yes
  2. Set Minify JavaScript Files to Yes

Merge/Minefy CSS File

Go to backend, Stores > Configuration > Advanced > Developer > CSS Settings

  1. Set Merge CSS Files to Yes
  2. Set Minify CSS Files to Yes

Step 3: Enable all 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 4: 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 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.

We have tutorial with tools that should be installed at the server level to help optimize images.

  1. How to install jpegoptim for CentOS
  2. How to install optipng for CentOS
  3. How to install gifsicle for CentOS
  4. How to install jpegtran for CentOS

Step 5: Enable Compression

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

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml 

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

Step 6: Inspect every installed 3rd-party extension

Magento 2 core is written by programming experts. There is not much room for improvement in the core code.

That is normally not the case for extensions you can buy, or download for free. Some of them could really slow the site down.

You should perform a 3rd-party extensions audit.

Turn every module on and off, clear caches, and see if it changes the site’s speed.

Test all important page types, front page, category pages, product pages and checkout.

If you turn off an extension and the site becomes faster – you have found an abuser.

Contact this plugin’s vendor and let them know about the performance problem. Ask for a refund, write a review, and find an alternative if they don’t respond.

To turn off the extension you will need SSH access. Most hosting companies will allow you to access the server via SSH and will provide you with necessary credentials.

Once you are logged in:

Disable Plugin:

php bin/magento module:disable VendorName_PluginName

Enable Plugin:

php bin/magento module:enable VendorName_PluginName

Check Status:

php bin/magento module:status

It is always good practice to delete unused extensions from the file system, they will just be an unnecessary security risk.

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, transfer Caching Application to Varnish Cache.

Once everything is setup, here is an example of how to purge the Varnish Cache

  1. Magento 2 Purge Varnish Cache

Step 8: Put Site in Production Mode

Putting Magento 2 into production mode to increase performance

Magento 2 has three modes of operation:

  • default
  • developer
  • production

The fastest one is production. Default and developer modes are used for debugging purposes and should never be used for a live site.

You will need to get SSH access details from your hosting provider to find out what mode you are running in now. The command is pretty simple:

php bin/magento deploy:mode:show

Run it once inside the root Magento folder.

To set production mode issue this command:

php bin/magento deploy:mode:set production

**NOTE: Depending on your configuration it might take a while

Step 9: Get a Good Hosting Company

The hosting plan you choose plays an important role in overall website’s performance. You can’t have a fast M2 store on a cheap VPS.

Magento 2 has specific technology requirements. You can have a look at them here.

I would mention only two: 2G of RAM at minimum and SSD (solid state disk). You can not expect decent speed if you don’t meet either one of those two criteria.

The top pick for our Magento hosting needs is with their optimized platform and dedicated managed hosting

Step 10: Site back and enjoy all your customers

Yes, I know I said 10 things to speed up your Magento 2 store, however this last one plays a large part to your success