Optimizing Magento 2 speed is a key factor in attracting and retaining customers. In this article, we will guide developers through the process of optimizing Magento 2 website loading speed. These advanced techniques will enhance your technical knowledge and help you operate your Magento 2 website more efficiently.
From Slow to Swift: A Step-by-Step Magento 2 Speed Tune-Up
Magento 2 is a comprehensive framework that integrates numerous libraries. Therefore, to optimize page loading speed, it is necessary to have both programming knowledge and practical technical experience. We’ll dive into advanced methods to improve your Magento 2 website’s loading speed. These methods include optimizing images and source code, enhancing database performance, and leveraging powerful performance tools.
Step 1. Server configuration requirements
The server is the most crucial factor affecting website loading speed. When selecting an appropriate server, consider the following criteria: cost, resources, security, and system requirements. Carefully evaluate your options when choosing a service provider to optimize your Magento 2 website’s loading speed.
For the latest Magento 2 system requirements, visit the official documentation: https://devdocs.magento.com/guides/v2.4/install-gde/system-requirements/
Step 2. Compress HTML, JS and CSS Files to Speed Up Magento 2
Large HTML, JS, and CSS files can significantly affect page loading speed in Magento. To address this issue, Magento developers implemented a function that merges JavaScript and CSS files into one. This optimization reduces the number of HTTP requests, thereby increasing the loading speed of your Magento 2 website.
HTML compression is also crucial for improving performance. By minimizing these files, you can further enhance your site’s speed.
To merge HTML, JS and CSS files you need to switch your website to developer mode. By opening the env.php file and changing ‘MAGE_MODE’ => ‘developer’.
Or you can also run the command on terminal from magento folder as follows:
php bin/magento deploy:mode:set developer
Then, in the Admin page, open “Store -> Configuration -> ADVANCED -> Developer” and configure the following functions:
- Template Settings: Minify Html ->Yes.
- JavaScript Settings: Merge + Minify CSS Files -> Yes. (Note that the Enable JavaScript Bundling option needs to be carefully tested when you enable it)
- CSS Settings: Merge CSS Files, Minify CSS Files -> Yes.
Step 3. Enable Flat Category and Flat Product to Speed Up SQL Query
Flat Category and Flat Product in Magento 2 are two options that help improve the speed of querying category and product data. When you enable them, Magento 2 will use “flat_” base tables to store information, helping to speed up Magento 2. However, if these two functions are enabled, when updating category and product information in the backend it might be a bit slower.
There are some developers who believe that turning on Flat Category and Flat Product will make the SQL query process more complicated, so it will be slower. However, optimizing Magento 2 website loading speed will depend on your website database structure. So when you turn the function on or off, you can carefully check the performance and compare when it is on or off.
Step 4. Use Redis cache or Varnish Cache
Redis Cache and Varnish Cache are two tools used to optimize performance and increase Magento 2 website speed by improving data storage and retrieval. Below are the roles of both Redis Cache and Varnish Cache in Magento 2:
- Redis Cache:
- In-Memory Caching : Redis is an in-memory data caching system that allows Magento 2 to store cached data (such as sessions, product data, and categories) in RAM instead of accessing the database. database every time. This significantly improves data retrieval speed and reduces database load.
- Session Storage: Redis is also used to optimize Magento 2 website loading speed by storing user sessions. This helps maintain session state across requests and ensures consistency for user sessions on the Magento site.
- Varnish Cache :
- HTTP Reverse Proxy Cache : Varnish is a reverse proxy cache, it stands between the user and the Magento 2 server. When the user uses the website, Varnish stores a copy of that website. When similar requests come in, Varnish returns this copy instead of sending the request to Magento 2, reducing the load on the server and increasing page load speed.
- Page Caching : Varnish can cache a copy of the entire website, resulting in the website loading very quickly when a user visits a cached page. However, this means that if there are changes on the page, you need to clear Varnish’s cache to update the site with the new data.
Note: Personally, I find that Varnish and Redis are not too necessary, because when Magento is converted into production mode, the compression and caching features have been optimized for Magento 2 website loading speed. In addition, you can also Cloudflare cache can also be used very effectively.
Step 5. Enable Logging Mode (dev:profiler)
To enable the logging mode (profiling) in Magento 2, use the following command:
php bin/magento dev:profiler:enable
When you run this command, Magento will start recording information about the performance and execution time of elements and code blocks in your website.
In the screenshot with dev:profiler enabled, the frontend interface displays detailed page load times for each block, template, and layout. This allows you to identify slow-loading elements and implement solutions such as optimizing code, SQL queries, or layouts to improve Magento 2 speed.
Step 6. Switch Magento 2 to production mode
Production mode in Magento 2 is one of three main environment modes that Magento supports (besides default and developer). Production mode is used when the website has been deployed and is live on the internet. This mode should be performed last in all optimization steps of your Magento 2 website.
php bin/magento deploy:mode:set production
Here are some important points about production mode in Magento 2:
- Performance Optimization : Production mode is designed to optimize website performance. Magento 2 will use compiled and optimized files, improving page load speeds and response times.
- Don’t Show Detailed Errors : In production mode, Magento 2 will hide detailed error messages to keep sensitive information private and not visible to users.
- Powerful Cache : Cache in production mode is strongly enabled to reduce server load and increase website access speed.
- Use Optimized Files : In this mode, Magento 2 uses pre-compiled and optimized files to improve source code performance.
- No Developer Mode : In production mode, debug mode is not available, and you should not use it to develop or test source code.
When deploying your Magento 2 website to a production environment, you should ensure that production mode is enabled to ensure high performance and website stability as well as optimize Magento 2 website loading speed.
