A Magento 2 Store needs lots of things to work properly. The first factor is a number of Magento 2 extensions to set up inventory management, design new checkout process or manage marketing tools. Most of the extensions can be purchased and downloaded from the marketplace. The second factor is the performance speed of your website, which is commonly outsourced to a professional Magento developer company. Remember that if you want to keep customers stay longer with you if you bring the great experience during the time they spent on your site. Thus, a fast online store is the 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. Now let's head to the steps to optimize performance speed in Magento 2.
In brief, these are the steps to optimize performance speed in Magento 2:
- Step 1: Merge CSS and JS Files
- Step 2: Enable Compression
- Step 3: Optimize Image
- Step 4: Reduce Server Response Time
- Step 5: Enable Caching
- Step 6: Enable Flat Categories and Products
- Step 7: Update Magento
- Step 8: Use Content Delivery Network
Step 1: Merge CSS and JS Files
The first step you need to follow is merging and minimize 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
- Go to backend,
Stores > Configuration > Advanced > Developer > CSS Settings
- Set
Merge CSS Files
to Yes - Set
Minify CSS Files
to Yes
Step 2: 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 3: Optimize Image
The image is a necessary factor to make your Magento 2 store’s performance and user experience much better. 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. You should use Magento Performance Optimization to optimize your image.
Step 4: Reduce Server Response Time
Using Magento 2 Built-in cache functionality, your site’s response time is quite good with approximately 0.5s. But it is not the ideal time for user experience. 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 Varnish Cache.
Step 5: Enable 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 6: Enable Flat Categories and Products
One of the factors influence the speed of Magento 2 performance is the 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, MySQL query complexity will be reduced.
Go to backend, Stores > Configuration > Catalog > Catalog > Storefront
, choose Yes in Use Flat Catalog Category field.
Step 7: Update Magento
Remember to update your Magento 2 store manually.
Step 8: Use 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)
Follow us in ilpquiquilo