Why performance optimization is vital
Performance optimization is among the top critical factors defining the success of an online business. 57% of visitors abandon pages that load longer than 3 seconds and nearly 80% of users avoid pages they have had a poor experience with. This means that merchants’ livelihood literally depends on seconds and milliseconds of page load time!
PWA is still the preferred option, but…
Magento is one of the dominant eCommerce platforms as of now, yet it is not immune to page performance challenges. A general agreement across the industry is that a well-optimized PWA implementation can solve many of the pain points incurred by the default Magento technology stack. To exemplify, ScandiPWA frontend, when set up correctly, allows to reduce page load time to just 20ms, all while offering flexible mobile-first UX and next-generation data exchange protocols, by a wide margin superior to those used in stock Magento.
But what if, for whatever reason, migration is not an option? Are there viable alternatives to PWA that allow to speed up Magento 2?
As a development agency with a strong focus on Magento, we are consistently in touch with online businesses globally, staying in tune with the latest eCommerce trends. And [disclaimer] we can conclude that upgrading your Magento 2 frontend to PWA makes the most difference and brings the more holistic and sustainable results showing improvements across UX, performance, SEO, user engagement, and beyond.
About advanced bundling with MagePack
How it works
A common way to achieve this is by defining bundles by page type. For example, some of Magento’s page categories may include the following:
Each page categorized as one of these page types has a different set of RequireJS module dependencies. When RequireJS modules are bundled together by page type, you end up with just a few bundles covering the dependencies of any page in your store.
This allows you to create separate bundles for the dependencies common to different types of pages: a bundle for Category-only pages, a bundle for Search-only pages, a bundle for Checkout pages, and so on.
Another way to use it is to create bundles by purpose, such as
- Common features
- Product-related features
- Checkout features
- Form validations
There are no set rules as to how you should define your bundles. Some bundling strategies will work better than others depending on your particular needs and the structure of your Magento 2 store.
In general, splitting bundles by page type allows for decent performance optimization on a clean Magento installation. Still, keep in mind that some customizations may require more in-depth analysis and different approaches to asset distribution.
Our experience with JS bundling
Below is a sample of before and after audit comparison from one of the projects where our team has implemented this optimization technique.
|Google Page Speed Insights – Desktop|
|First Contentful Paint (FCP)||1.433||1.47||-2.27%|
|First Input Delay (FID)||5.033||4.667||7.86%|
|Largest Contentful Paint (LCP)||1.700||1.73||-1.92%|
|Cumulative Layout Shift (CLS)||0.021||0.44||-95.14%|
|Total Blocking Time||2290.000||46.67||4807.14%|
|Time to Interactive||6.033||5.27||14.56%|
|Google Page Speed Insights – Mobile||Pre-Audit Evaluation||Post-Improvements Evaluation|
|First Contentful Paint (FCP)||6.700||6.03||11.05%|
|First Input Delay (FID)||28.350||24.967||13.55%|
|Largest Contentful Paint (LCP)||13.650||24.10||-43.36%|
|Cumulative Layout Shift (CLS)||0.662||0.50||32.49%|
|Total Blocking Time||5160.000||683.33||655.12%|
|Time to Interactive||37.300||27.13||37.47%|
|DB Queries||Pre-Audit Evaluation||Post-Improvements Evaluation||IMPROVEMENT|
As seen from the table, the results are quite reassuring, especially given how little effort was required to achieve these improvements. The bundling delivered improvements in the most heavily weighted parts of the google page speed metrics. You may notice some decreases, however, these were only minor and are outweighed by the benefits.
Additionally, further optimization is usually possible via more detailed configuration adjustments.