Loading, loading ...... & loading. I know, we can have a cup of coffee till the Magento 2 site loads. But, people are not so patient when a site goes like that, neither Google is.
Website performance is in direct relation with search rankings and conversion rates. With high page load time, your customers can bid you a farewell and go to rival vendors where they can enjoy the speed.
Magento 1 offers some performance related settings in its configuration menu, and the blooming Magento 2 have doubled them. Magento 2 is known worldwide for its ‘Performance and Speed Optimization’ feature (even though it is not seen anywhere).
Jokes apart, this is the famous solution: Change your hardware and change your software.
Many technicians analyzing your site end up with the above two things. To some extent, this reasons bring results. A Hardware problem means you need a relatively muscular server depending on the number of visitors you serve at a time. It will cost you an expensive migration benefiting you in the long run.
A software problem is caused when an irritating extension loads unnecessary data and in this case, your developer needs to go deep in the code.
I have observed many Magento stores not utilizing some default configuration settings due to lack of knowledge. So let us consider the above solution as last option, and perform the below settings on your development server to see your Magento 2 site loading at a better speed.
Why Magento 2 is so slow?
The real scenario is that mostly people experience slow Magento interface. That is due to some bad practices and not knowing the tricks to optimize their site. When you don’t meet some basic needs to run a Magento2 site, or don’t check the useful settings or the server requirements are not present as required, then it fails to keep pace. So the point is:
How to make Magento 2 load faster?
1. Inspect Server and System Requirements
I understand, it could be out of budget but the fact is server is the key factor. Never ever choose an option of shared hosting. Instead, choose a dedicated server or VPN. The next comes checking the Magento System requirements. It slightly differs as per the Magento2 version you are using. You can check your site requirements here on Magento devdocs:
Leverage cache Settings allows the usage of browser cache to store some static files locally in user’s system. Their first visit to your site takes the normal load time, while in next visits improvement can be noticed as many files are accessed from their browser cache. Gzip compression compresses the pages and stylesheets before sending them over to the browser. Add the following lines in the .htaccess file of your Magento to see the effects:
## EXPIRES CACHING ##
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
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/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/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 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Yes, Magento 2 offers a built-in profiler. With that, you can come to know which part of code takes much to load the page. To trigger that, you just need to add this line to your .htaccess file.
SetEnv MAGE_PROFILER "html"
In place of “html” you can also use "csvfile" or "firebug". In case of CSV file, it will be generated in var/log folder. If it is set to “html”, then it will be displayed on the page itself. On live site, be sure you set the IP under ‘developer client restriction’ portion.
Varnish cache is an HTTP accelerator that stores files in memory and thus reduces the response time. It is specifically designed to be used with HTTP protocol. Magento community have released some guides for varnish cache installation and configuring on your server. After configuration, you can enable it for usage from here: Stores > Configuration > Advanced > System > Full Page Cache and set ‘Varnish Cache’ in Caching Application option.
5. Speed up Checkout process
A) Stores > Configuration > Sales > Sales Emails > General Settings > Asynchronous sending > Set 'Enable'
This setting is used to send order emails to customer asynchronously. When it is disabled, the emails are sent instantly. But when you enable Asynchronous sending, those emails are arranged in a queue and are sent when the Magento cron is executed. So if it is okay for you to have some delay in sending order emails, then you can enable it. Be sure the cron is not set for a long time interval.
B) Stores > Configuration > Advanced > Developer > Grid Settings > Asynchronous indexing > Set 'Enable'
Similarly, this setting is used for Asynchronous indexing of order in the backend grid. When it is disabled, admin can view the new order in backend immediately. If you enable it, you can view the new order in backend only after the Magento cron is executed. The customer can view it on the frontside in both the cases.
6. MySQL configuration optimization
Making little modifications in your MySQL server settings can also make your site flow towards the direction of speed. Make the following settings in my.cnf:
query_cache_type = 1
query_cache_size = 32M
Check the variables in /etc/my.cnf or or using phpmyadmin:
$ mysql -u mysqluser -p magento_database_name
$ mysql> SHOW VARIABLES;
After that, change the value of memory_limit variable
php_value memory_limit 128M
Content Delivery Network is the service of copying the web pages to geographically scattered servers. When any web page is requested, the content is served from the closest server to the user thus making the page load faster.
You can enable it under Stores > Configuration > General > Web > Base URLs and Base URLs (Secure). There you need to insert your CDN URLs for Static View Files and User Media Files.
8. Change to Production mode
Magento 2 offers certain modes for different technical benefits. When a site is deployed to production server, you can run it in production mode. This improves performance because the URLs for static files are created as needed instead of going through a fallback mechanism. Additionally, the errors are never displayed to the user and are logged to the file system directly.
10. Merge/Minify CSS and Js Files
11. Enable flat products and categories
Magento holds all the data in its vast EAV structure. Either it can use large number of tables to load the information, or it can use one flat table and gather all related data in it. Some extensions do have trouble while using flat tables, so be sure to test it well on your development server.
You can enable it under Stores > Configuration > Catalog > Catalog > Storefront. Change ‘Use Flat Catalog Category’ and ‘Use Flat Catalog Product’ to Yes.
12. Always use latest version of Magento 2
The Magento community works hard to cover bugs and security patches from every aspect, and that’s what the newer version covers in it. It is always advisable to switch to latest version of Magento so that you can prevent your site from security threats.
13. Implement Lazy load for image
It is preferable to implement lazy load for images as it loads the resources only when it is actually needed, unlike loading all images for any page at a time. You can check the page speed and some other factors in https://gtmetrix.com, and use the compressed images that it suggests you.
These are the points I have noticed which affects the most if configured correctly. If you have been benefited with any other tricks, do share it here in the comments or get in touch with us.