This blog brings you the Magento performance optimization tips and best practices to speed up your eCommerce store’s load time.
Magento is a robust platform with scalability, customizability, integration capabilities and out-of-the-box features that any eCommerce business would love to leverage. These capabilities come packed with equally strong challenges in terms of performance. Your Magento performance is pivotal to provide a zippy user experience.
So, make Magento optimization the top priority if your eCommerce store is operating on Magento.
Statistics that suggest why Magento speed optimization is important
- 70% of consumers admit that page speed impacts their willingness to buy from an online retailer. – Unbounce.
- Even a one-second delay can reduce customer satisfaction by 16% and affect conversion rate.
- 1 in 4 visitors would abandon a website that takes more than 4 seconds to load.
- 46% of users don’t visit websites that take longer time to load.
- Pages that load in five seconds see their bounce rates skyrocket to 38%.
Well that’s the concerning part. Now let’s look how speeding up your Magento performance can do good to your bottomline.
Benefits of Magento performance optimization
- Pages that load within two seconds have an average bounce rate of just 9%.
- Reducing loading time by 2.2 seconds could increase conversions by over 15%.
- Fast web pages can translate into satisfied customers, increases in return visitors, more conversions and brand advocacy.
- An 8.4% increase in conversion rate for retail sites came from a 0.1-second improvement of mobile site speed – Google 2020
- 9.1% more shoppers added items to their basket when mobile site speed increased by just 0.1 seconds – Google 2020
So, it’s needless to say your Magento speed optimization is more than a necessity. If you are thinking where to start, here are 14 Magento performance optimization tips you can start implementing right away. We have shortlisted these Magento site optimization tips based on our hands-on experience and best practices.
Load ‘Above-the-Fold’ contents first
‘Above-the-Fold’ is the content which users get to see first. It is the first part of the page after which a user scrolls to see the remaining contents. This can be done by following the techniques given below:
Refrain JS from loading upfront
Contents in a web page must be given priority over the JS code. When a web page’s above-the-fold contents load, the JS code also loads simultaneously adding more time to the load time.
Refraining JS from loading upfront means deferring the parsing of JavaScript code. This can be done by moving JavaScript code to the bottom of the page and can be achieved with the help of third-party extensions like Defer JS loading. Refraining JS from loading upfront contributes towards Magento performance optimization.
Make page size as small as possible
A heavy page laden with too many elements can slow down the page loading speed. Though it is encouraging that a majority of shoppers prefer mobile over desktops, connectivity strength is something not great all the time. So here is a tip for Magento site optimization under such scenarios:
Gzip Compression
Gzip helps in decreasing the page to nearly one-fourth of its actual size. With Gzip, you’ll be able to compress external scripts like CSS, Javascript, font. This helps in improving Magento performance. Ask your hosting support team to get this done. Perform a check using Google PageSpeed Insights tool to find whether Gzip is on for your store.
Hire Magento Developers for USD 35 Per Hour
Use CSS/JS minification
Magento 2, by default, has the provision to perform CSS/JS minification which can contribute towards reducing page weight, thus improving Magento performance.
So, you can do it this way:
In the Magento 2 backend panel, go to Stores > Configuration > Advanced > Developer and enable minification.
Note: For Magento versions 2.2+, this menu is visible in Developer mode.
Magento has three running modes namely, default, developer and production. The Production mode is the fastest one and minification works only in this mode.
First, find out the current mode by running the following command:
php bin/magento deploy:mode:show
To set your app in production mode and to enable minification, run the command given below in the SSH terminal inside Magento root folder.
php bin/magento deploy:mode:set production
Optimize Images
Images are must-have assets for eCommerce businesses but optimizing and compressing images is of utmost importance as it has a direct effect on page weight. It helps improve Magento performance.
Your eCommerce store’s CDN support team can help with this. Else, you can go for Google PageSpeed server extension.
Capitalize on the capabilities of HTTP ver.2
HTTP/2.0 is the new gen hypertext protocol. It’s bundled with features mainly focused on making browsing faster and secure.
When using HTTP/2.0, the browser need not keep going back to the server to fetch every file. Instead, all requests and files are fetched and transferred at once thus avoiding heavy operations.
Yet another noteworthy advantage is that HTTP/2 helps servers in pushing the resources before a browser (client) requests for it which significantly improves Magento performance.
Here are the conditions required for Magento 2 to work with HTTP/2.0
- All pages should be served through SSL.
- The server should support HTTP/2.
You can contact your hosting team to assist in setting up HTTP/2.0 and make use of extensions to introduce server push to your Magento 2 store.
JS Bundling
Why is JS Bundling important in the Magento speed optimization process?
As a platform that supports growing businesses to enterprise-grade brands, Magento is loaded with built in features backed by tens of thousands of JS files. There are hundreds of JS files that need to load per page. Avoiding unnecessary JS files from loading for each page will result in reducing the time taken to load and helps in Magento performance optimization.
How does JS Bundling benefit Magento performance optimization?
- Reduces the number of requests
- Number of Javascript files loaded for each page will be reduced
- Size of JS files downloaded will be reduced
Magento 2 JS bundling techniques:
1. Basic Bundling – Default Magento bundling
Magento JS Bundling is basically packaging all the JavaScript files into several bundles so that the number of connections are reduced. However, for every request, basic bundling loads all the bundles though the requested page might need only a few bundles. Hence the overall size of the JS files loaded per page request is still big.
When the dependent bundles are cached by the browser, you’ll be able to witness an improvement in page speed. As the bundles are loaded synchronously by the browser, the first-time experience for a user wouldn’t be that great. After all, it matters the most as you are looking for that competitive edge right from the first digital interaction.
2. Advanced JS Bundling
Advanced Bundling is an innovation of the Basic Bundling technique to overcome the shortcomings of the latter. Advanced Bundling combines the packages making it into a single large file and requires a page-specific approach for building bundles. Home Page, Category Page, Product Page, Carts etc., have to be optimized for JS bundling separately. A page-wise approach helps in keeping only the necessary JS files required for the page.
Advanced Bundling also provides provisions to load the CSS files before JavaScript. This technique renders page contents faster to users. Advanced Bundling reduces the number of requests drastically, reduces the size of Javascripts loaded by sticking to just page-specific files.
Magento JS Bundling vs Advanced JS Bundling – Which one’s better?
We’ve knocked the factors that highlight the advantages of Advanced JS Bundling over JS Bundling and which one is better for Magento performance optimization.
| Advanced JS Bundling | Magento Native JS Bundling |
|---|---|
| Issues that custom JS brings up can be skipped easily using Advanced JS Bundling technique | Native bundling if enabled for customized Magento, issues will arise and it’ll be hard to locate |
| Reduces the number of page requests. Loads only page-specific JS. | Reduces the number of page requests but loads all JS bundles for each request |
| Custom JS bundles have to be created. | A built-in feature in Magento. Just enabling the option would suffice. No custom bundles required. |
| Tools required to configure JS – npm, node.js, or phantom.js(optional). | Built using Require.js and doesn’t require any tools to configure |
| Improves loading speed significantly | Comparatively less effective in improving page speed as the the time taken to load all the JS files is long |
Optimize Time to First Byte (TTFB)
TTFB is the time taken by a client browser to get a response from a server. TFFB optimization is mainly for pages like cart, checkout, customer profiles which cannot leverage the advantage of Magento 2’s built-in full page cache. TFFB is not required for the rest of the pages, which are more likely to be cached. The following are the ways to improve server response time:
Audit third-party extensions
The third-party extensions you use for your store might be a cause for deteriorating page speed. Find the list of extensions used.
Except for the core Magento extensions, remove the rest of the extensions and perform a speed test to detect the plugins that are slow. You can either go for an alternative replacement or enhance the extension by contacting its vendor.
Magento 2 Profiler check
Find the origin of the cause that’s creating the slowness by running a check using the Magento 2 profiler. Magento 2 profiler will let you know which part of your code is causing trouble.
Upgrade hosting plan
The final thing you can do for Magento site optimization is upgrade your hosting plan. You can get to know whether you need an upgrade in your hosting or not by performing a comparative speed test between your live site and a fresh Magento 2 version in your existing server.
If the new Magento 2 copy is faster than your live site, your current setup is fine. If the result is the other way round, you need to reach out to your hosting team to get it upgraded.
Varnish for full page caching
Implementing Varnish cache is an integral part of your Magento performance optimization process as it can accelerate your mobile web loading speed more than 25x.
Varnish cache is a fast cache technology that acts as a temporary storage facility that makes a copy of the web pages of your eCommerce store. When a request is sent to render a web page, the request is directed to the Varnish server first. It takes only a few milliseconds to render pages from the Varnish server which reduces the load time significantly (time differs based on the hardware capability).
Varnish cache can be used as a failover system, caching reverse HTTP proxy, or load balancer. Using Varnish cache you can reduce the number of web servers you are depending on to support your website and accelerate response time.
Redis for Session Store and Database caching
To know how important Redis is, let’s understand the key distinguishing factors between Session store and Database caching.
Database Caching – Database caching is required in order to reduce the server load for dynamic websites, mainly eCommerce stores.
Session-store – A session begins when a user signs in and ends when signs out. ‘Session Store’ is the database that records all the session-related data during this period. The information recorded during such user-session would be profile information, recommendations, targeted promotions and discounts.
Redis is an in-memory database that can be used for database caching and session store scenarios. Redis, as a cache, provides more control over database caching as its data eviction mechanism can be configured to create space automatically for new data by deleting old ones.
With Redis, you can choose from 6 different eviction scenarios which allow you to evict data proactively or only when additional space is needed. With support from your development team, Redis can be optimized to serve both purposes.
PWA – Progressive Web Apps
PWAs (Progressive Web Apps) are apps that replicate a mobile app kind of experience but are actually mobile web pages.
Magento has rolled out its own PWA Studio for developers (from version 2.3) to build faster loading mobile web pages for eCommerce stores. PWAs can provide a consistent experience on mobile as they are cross-device and cross-browser compatible.
Apart from quick loading speed, it also bundles advantages like quick share, ease in updating, location-based push notifications, better search engine indexing and online discoverability.
Closing lines
Well, that completes the list for Magento site optimization. These are the basic Magento optimization tips you can start implementing right away.
Are performance issues delaying your Magento 2 store’s load time? Talk to our Magento 2 optimization service experts.
