How to speed up Magento 2 out of the box
Contents
- 1 How to speed up Magento 2 out of the box
- 1.1 Step 1: Enable Flat Categories and Products
- 1.2 Step 2: Merge CSS and JS Files
- 1.3 Step 3: Enable all Caching
- 1.4 Step 4: Image Optimization
- 1.5 Step 5: Enable Compression
- 1.6 Step 6: Inspect every installed 3rd-party extension
- 1.7 Step 7: Reduce Server Response Time
- 1.8 Step 8: Put Site in Production Mode
- 1.9 Step 9: Get a Good Hosting Company
- 1.10 Step 10: Site back and enjoy all your customers
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
- Set Merge JavaScript Files to Yes
- Set Minify JavaScript Files to Yes
Merge/Minefy CSS File
Go to backend, Stores > Configuration > Advanced > Developer > CSS Settings
- Set Merge CSS Files to Yes
- 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.
- How to install jpegoptim for CentOS
- How to install optipng for CentOS
- How to install gifsicle for CentOS
- 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/vnd.ms-fontobject 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 </IfModule>
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
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 Nexcess.net 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