This content originally appeared on Bits and Pieces - Medium and was authored by Dulanka Karunasena
A subset of Web Vitals to measure SPA performance
Google introduced Web Vitals initially to measure User Experience quality in web applications. However, Core Web Vitals (a subset of Web Vitals) later purely focused on web application performance.
Today, many tools such as Lighthouse, PageSpeed Insights, Search Console, Chrome UX report are available to measure these metrics.
Essentially, Core Web Vitals shown above are critical for the UX, and therefore optimizing these indicators is essential for the long-term success of a website.
Overview of SPA Architecture
As opposed to full-page navigations in Multi-Page Applications (MPAs), SPAs load a significant portion of the JavaScript code at once and dynamically render components based on user interactions.
As a result, performance related to the initial loading of the SPA is affected, and it directly impacts the score of Core Web Vitals. So let’s look at them in detail.
Using SPAs: The Impact on Core Web Vitals
Each SPA is different depending on the structure, libraries & frameworks it uses. Therefore, it is challenging to come up with a single set of Core Web Vitals to measure these different implementations. Besides, SPAs and MPAs affect Core Web Vitals differently. Therefore, let’s first examine these differences to get a better insight into them.
1. Dynamic route transitions
In SPAs, dynamic routing updates the URL from the frontend for reasons varying from small content and UI state changes to rewriting “full-page” content dynamically without fetching an entire page from the server.
Since there are no clear signals marking the beginning and end of such route changes, Core Web Vitals do not demonstrate these dynamic transitions.
Thus, Core Web Vitals will not be reset for dynamic route transitions, and the metric values will be calculated for the URL resulting in the initial page load.
2. Longer lifespan of page
Since SPAs load content on essentially the same “page”, it will affect the metrics that consider the entire life span of a page.
For example, suppose the route /home has a Cumulative Layout Shift (CLS) value of 0.05 and 0.08 for /about. This will be reflected as 0.13 for /home route in a SPA, even though it is not the actual case.
Therefore, metrics that accumulate over time can be harsher on SPAs than MPAs.
3. Larger application size
Since SPAs integrate the whole application into a JavaScript bundle, the initial load times are higher.
This will impact metrics like First Input Delay (FID) because the browser might be busy loading the script when the first interaction happens.
4. Measuring post-load performance
The post-load performance of SPAs is inherently better compared to the load experience. Unfortunately, web performance metrics currently do not take post-load experience into account because post-load metrics are hard to define, given all the varieties of SPAs available.
However, the SPAs should still strive to meet the “good” threshold for the initial load experience even if the in-page navigation (post-load) experience is excellent.
How Core Web Vitals will be Optimized for SPAs in the Future
Google acknowledges that Core Web Vitals do not reflect the actual user experience of a SPA website. They have already taken steps to improve the metrics, and they will continue to do so.
1. Changes to the CLS metric
In April 2021, the CLS metric was redesigned to be SPA-friendly. It introduced a strategy to measure the CLS within a window of time.
This proved to be better in accuracy compared to the previous method which was accumulated over a page’s full lifespan.
2. Post-load performance metrics
Web Vitals team is planning to develop metrics that can measure post-load performance. It will be an extension to FID, with the goal to measure not only the first interaction but also the subsequent user interactions.
3. Ensuring MPAs don’t have an unfair advantage over SPAs
In some cases, properly-optimized MPAs may have a better Web Vitals score due to a higher percentage of cached page visits. As a result, improvements made to SPAs focusing on UX are not currently being captured by any of the Core Web Vitals metrics.
The potential solutions that are actively being worked on have been proposed by Google. They are
- Differentiating the page visits as cross-origin and same-origin so that the cache state can be taken into consideration (short-term solution).
- Developing APIs with the goal to precisely measure SPAs (long-term solution).
Check out this page to know more details on the implementation of these solutions.
Summary
The control over the development and rich user experience has made SPA architectures popular in the web development world. But it comes with costs like more prolonged than usual load times and larger application size. These factors directly affect Core Web Vitals scores of SPA applications.
Not that you have obtained an in-depth understanding of how Web Vitals interpret the performance of SPAs, you can optimize your applications. Thank you for reading this article.
Build with independent components for speed and scale
Instead of building monolithic apps, build independent components first and compose them into features and applications. It makes development faster and helps teams build more consistent and scalable applications.
Bit offers a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through independent components.
Give it a try →
Learn More
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- Microservices are Dead — Long Live Miniservices
Core Web Vitals: Measuring Performance in SPAs was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Dulanka Karunasena
Dulanka Karunasena | Sciencx (2022-02-24T09:12:52+00:00) Core Web Vitals: Measuring Performance in SPAs. Retrieved from https://www.scien.cx/2022/02/24/core-web-vitals-measuring-performance-in-spas/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.