Adobe / Magento PWA Studio Storefront Performance 2022
A lot of rumors going from the Adobe sales department about good Magento PWA Studio Performace. Let's check a real-world performance.
Magento PWA Studio offers the tools you need to develop a slow Progressive Web Application (PWA) storefront for Adobe Commerce or Magento Open Source.
Magento PWA Studio
As a JavaScript-heavy app is slow to start initially — SPAs trade a slow initial load for fast or often immediate subsequent route changes. However, the main point of the performance is the first view, not a repeated view.
Speed is now a landing page factor for Google Search and Ads
When real users have a slow experience on mobile, they’re much less likely to find what they are looking for or purchase from you in the future. For many sites this equates to a huge missed opportunity, especially when more than half of visits are abandoned if a mobile page takes over 3 seconds to load.
The initial response though that delivers the user’s first impression will often be either empty or just a basic loading state as shown above. Only after the heavy Magento PWA JavaScript has been loaded, parsed, compiled and executed, can the application startup and render anything meaningful on the screen. This results in the extremely slow time to first meaningful paint (TTFMP) and time to interactive (TTI) metrics for the customers…
TTFMP: Time to first meaningful paint
This is the time when the browser can first paint any meaningful content on the screen. While the time to first paint metric simply measures the first time anything is painted (which would be when the loading spinner is painted in the above example), for a SPA the time to first meaningful paint only occurs once the app has started and the actual UI is painted on the screen.
Let's Check Magento PWA Studio performance.
We will check the default (https://venia.magento.com/vitalia-top.html) OTB complectation of the Magento PWA studio. When the merchant has additional functionality and eCommerce features, JS marketing tags, and pixels, the analytics application will be much slower.
The page load for the visitor will look like this:
From this visualization, we can see Largest Contentful paint = 8 seconds. Even Google is shocked by such a slow performance and can’t measure such slow websites.
And there that's why:
Erwin Hofman (https://www.linkedin.com/in/erwinhofman) international & independent sitespeed consultant about Modern Magento headless solutions:
This unfortunately is the hard reality with quite some headless CSR solutions out there.
Truth to be told though: all framework vendors will. tell you their solution is blazing fast, making it a bit harder for agencies and merchants to make the right decision from all perspectives (interoperability, developer time, developer experience, user experience, device conditions, SEO).
A shame to see some are finding out the hard way or too late, ending up impacting performance/UX (and related aspects such as bounce, conversion, revenue/signups, ad costs, customer retention, SEO ranking and potentially also SEO crawlability).
Magento PWA loads the first part of the JS after the second part of the js files and after it sends slow Graph QL queries to the extremely slow and broken backend. Slow Backand + Slow Frontend can’t make a good e-commerce website.
Magento PWA Studio Main thread blocking time
The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.
The main thread is considered “blocked” any time there’s a Long Task — a task that runs on the main thread for more than 50 milliseconds (ms). We say the main thread is “blocked” because the browser cannot interrupt a task that’s in progress. So in the event that a user does interact with the page in the middle of a long task, the browser must wait for the task to finish before it can respond.
If the task is long enough (e.g. anything above 50 ms), it’s likely that the user will notice the delay and perceive the page as sluggish or janky.
The blocking time of a given long task is its duration in excess of 50 ms. And the total blocking time for a page is the sum of the blocking time for each long task that occurs between FCP and TTI.
Results :
We can see the result is just Awful. So if any sales representative tries to spam you about the Adobe Commerce perfect performance, check a real-world result first.
