Skip to content
Magento 2 Speed Optimization: Tips & Techniques
1. Quickread
Speed is the most important factor of any online Magento 2 or Shopify store.
Speed impact on various aspects :
- customer satisfaction
- conversion rates
- SEO ranking
- PPC cost or social media ad cost ( adwords and facebook).
It’s been observed that customers will not buy from the slow website. According to statistics, 47% of online shoppers expect a web page to load in 2 seconds or less.
If it takes more than 3 seconds for a page to load, 40% of all customers will leave.
This article will help you to understand the importance of fast loading websites and how simply you can improve website speed using simple techniques given below.
2. Why Magento Site Speed Can Be Slow?
There are numerous factors which can slow down Magento 2 site.
- It can be inappropriate Hosting
- use of too many extensions
- use of high resolution images
- more traffic on websites
- server issues
- Cache not used effectively
- Crons and its scheduling
- Database cleaning not done.
- Log of log writing and many more
3. Effects of Slow Page
If your website is very slow then it will impact on :
- Conversion rate will be down which will result in lower sales and revenue.
- Customers are more likely to purchase from a fast loading website and will come back to site or recommend others.
- Customers will not wait to load your site, they will leave your site page and switch to another site for shopping. generally visitors click on multiple sites when searching and will open pages that are fast to load.So if you site pages are not the first or second to load then probably user will skip.
Just check your site abandon pages and ratio and decide on the page to be optimized.
You can use Google analytics and funnels to get the idea as to what all is going on your website.
4. Tips & Techniques to Improve Site Speed
Below given tips & techniques are useful to improve the site speed.
Use of varnish Cache ( its inbuilt with Magento )
Page Caching is a great method to improve loading speed. It stores the data and delivers it from the cache when the user requests the same resources repeatedly. Page caching is useful to decrease the number of database operations required for each page request and so improve the website loading speed.This will reduce average server response time( check google analytics to get idea of your average server response time and if its above 1.25 seconds then you need to optimize further. An avcrage server response time of below 1 second will be a good to have )
Varnish is a common caching tool for Magento. Varnish is a proxy server. It is useful to deliver content fast. When a visitor requests your site, then this request will not send to Magento, it’s delivered from cache.
Varnish checks if visitors request for
- Home page
- Catalog page
- CMS pages
and if these pages are cached and cache is not invalidated or has not expired.
Also for a same page varnish allows multiple versions to be fetched based on post data and cxookies which makes varnish a highly recommended candidate.
Varnish use VCL ( Varnish Configuration Language) . VCL is written in C or C++ and we can use URLs, Cookies to create a hash value and based on that hash value pages are delivered.
Also we can write some rules so that pages are not delivered from cache and are by pass.
To configure Magento to use Varnish log in to the Magento Admin:
- Go to Stores > Configuration > Advanced > System > Full Page Cache
- From the Caching Application list, click Varnish Caching
- Enter a value in the TTL for public content field
- Expand Varnish Configuration and enter the specific information about your Varnish configuration
Redis, Memcached: Both are the distributed memory caches that speed up Magento 2 large-scale web applications with dynamic databases. They reduce the load of database requests on servers and deliver cached data if an external data request allows it. Config data or session data and some blocks can be stored to effectively use these cache.
in Magento using env.php we can configure these values.
Optimize image
Use of higher resolution images will negatively impact website speed, especially when users access your website on mobile devices. Solution for this to optimize images. There are online and offline tools available to optimize images.
Google check and allows upto 25% extra over optimized image size dimensions, if this is exceeded its treated as an image that should be corrected for.
We recommend to check images having size greater then 70 KB and delivered on mobile pages( excluding banners ).
On product page product gallery generally does not have this option so when you select a theme look into this aspect. As modifying gallery code can be a costly process.
Enable flat catalog for categories and products( If Elastic search is not available )
Magento usually stores catalog data in multiple tables, based on the Entity-Attribute-Value (EAV) model. Because attributes are stored in multiple tables, SQL queries are sometimes heavy and negatively affect Magento performance.
By enabling the flat catalog for categories and products, you can reduce the number of queries and also the complexity of queries is less as unions and joins are avoided. It accelerates the time it takes for the system to respond to the database queries, therefore improving website performance. This is especially relevant for large product catalogs with thousands of items and collections displaying more then 20 products at a given time.
Enable flat catalog from Magento backend.
- Go to Store ->Configuration -> CATALOG -> Catalog
- Choose Storefront section
- Set Use Flat Catalog Category and Use Flat Catalog Product to Yes
It’s more so for flat catalog products ( in case elastic search is not used )
Monitor website Speed
We recommended that Magento site health related to Website’s speed should be checked on a regular basis.
As it has been observed that developers or admin when doing there usual work just ignore due to time pressure.
There are a variety of free performance monitoring solutions available on the market. The page speed can be measured with the help of such tools as GTMetrix, Pingdom, and many others. With the help of reports generated on this tool you can optimize the site.
You Might Be Interested In: Magento 2 Speed Optimization Services.
Advance recommendation is to check google analytics for following and keep a record of this:
i) Average server response time < 1.25 seconds
ii) Average page time < 3.5 seconds.
Get rid of unnecessary extensions
Magento is a highly flexible and scalable ecommerce platform. There are a number of third party extensions available to enhance functionality and unique features.
With Magento 2.4.x there are lots of new modules that have been added by Magento.
Some modules are related to Multi warehouse inventory and some related to graphQL etc.
These should be disabled if not in use else these will consume resource and whenever deployment happens these modules consume that extra time.
Get rid of extra themes and languages : It has been observed that when we purchase and install themes we leave other themes as is. Also we might leave the languages as is without deleting. This impacts your generated file size. This will result in higher deployment time and PHP will have to handle more files to check from while executing.
Check if your site deployment time is more then 4 seconds.
Use of Http2
HTTP2 is like a continuous stream while HTTP 1 needed a handshake for each file download.
HTTP2 need SSL which nowadays is on all website so no challenge on this.
HTTP2 has a better compression aspect.
How is this useful in Magneto 2?
- Reduce the load of JS ( as you can now avoid merge JS )
For Example, when you merge Home page JS, which load is 1.5 MB and when it unmerged the load of JS on the Home page is 700 KB because when you unmerged the js of checkout, Product Page and Contact us page is not used on the home page. So HTTP/2 is beneficial to reduce the JS load. Again there is a possibility to reduce 3 js and reduce load upto 600 KB if your code allows.When we merge JS, all JS will go in Header. When we unmerged, we can add 2 critical js under the head, and the remaining JS will add in the bottom of Head. When we add 2 js in head then it will impact TTFB and first painful content. Until and unless head is not download browser will not download the page html.compress headers
All of this was not possible with HTTP1.
Therefore, we recommend asking your hosting provider if HTTP/2 is enabled in their server settings.
Use of CDN
CDN (Content Delivery Network) is helpful for fast delivery content across the globe. It delivered static content like js, css, html, images from a geographically distributed group of servers working together to provide fast delivery of internet content. These servers are called edge servers.
Whenever a user requests your site, the server closest to the user’s physical location will deliver the static content, ensuring the shortest distance for the data to travel. This ensures reduced latency and fastest site experience.
How CDN Works?
After setting up CDN for your website, caching of JS, CSS and images takes place:
When a Visitor in a particular location (e.g California in US) makes the first request for a static content on your website. Then the asset is retrieved from your actual server when it is being delivered, and the assets get cached on the CDN’s Californis US edge server, the nearest CDN based on visitors location. When next time visitors request the same content on your website, the request goes to the nearest CDN edge server to check if the asset is already in cache. If the request is already cached by the same edge server then the visitor will receive a response from the server. This helps in improving the load time.
To configure CDN in Magento 2:
From Admin panel, go to the Store–>Configuration->>General–>Web
- In the Base URL for Static View Files, enter the URL of the location on the CDN where static view files are stored.
- In the Base URL for User Media Files field, enter the URL of the JavaScript files on the CDN
- Open the Base URLs (Secure) section and continue with following:
- In the Secure Base URL for Static View Files field, enter the URL of the location on the CDN where static view files are stored.
- In the Secure Base URL for User Media Files field, enter the URL of the JavaScript files on the CDN.
- When complete, click Save Config.
Minify JS/CSS files
Minify css and javascript files to lightweight the load of js/css files.By doing this step you can reduce the size of js files and it resulted into reducing the js requests.
From Magento admin, go to the Store->>Configuration->>Advanced->>Developer from JavaScriptsetting set ‘yes’ to Minify JavaScript Files.
From Magento admin, go to the Store->>Configuration->>Advanced->>Developer from CSS settings set ‘yes’ to Minify CSS Files.
Conclusion
We have attempted to show you the various tips techniques to improve the Magento website speed. There are various factors which impact the website speed. Slow website means low conversion, low sales, and bad customer experience. So using these tips & techniques you can improve the site speed.
Our Blogs
Latest Posts
One Comment
Leave A Comment
You must be logged in to post a comment.
I have read your blog on some best practices for optimizing Magento websites. It was very interesting and helpful.