Single Page Application (SPA) Support and Soft Navigations

We are thrilled to share an important update from PageVitals, designed to finally let owners of Single Page Applications (SPAs) get access to Core Web Vitals.

🌐 Core Web Vitals for SPAs

In the realm of web development, SPAs utilizing frameworks like Meteor, React, Angular, and Vue have become increasingly prevalent. However, Core Web Vitals, crucial metrics focusing on the user experience, were traditionally available only for regular web pages (MPAs). This limitation posed a challenge for developers aiming to optimize SPAs for exceptional browsing experiences.

But the wait is over! We are delighted to announce that PageVitals now offers support for SPAs. This means you can access critical metrics that were once elusive, empowering you to optimize your SPAs like never before.

🪶 Experimenting with Soft Navigations

Detecting SPA navigations, termed "soft navigations", has been a long-standing challenge. These navigations, distinct from normal ones, don't load a new page and can be tricky to detect. However, the developers behind Chrome have been working on this puzzle, and their success is evident in the ongoing Origin Trial, as described here. PageVitals is participating in this trial, and today, we give you the option to enable Soft Navigations on your PageVitals account.

What is a Soft Navigation?

The team at Google have come up with this definition of a Soft Navigation:

• The navigation is initiated by a user action.
• The navigation results in a visible URL change to the user, and a history change.
• The navigation results in a DOM change.

The above heuristics don't work for all SPAs and may lead to both false positives and negatives. But they have been heavily tested against the most popular SPA frameworks so chances are that they'll work for your SPA.

Read more about the team's effort here.

⚡ Start Today

While this feature is still experimental, with Chrome yet to decide its fate post the Origin Trial's expiration on March 6, 2024, we encourage you to seize the opportunity and start exploring. Head over to your PageVitals account, ensure Field Testing is enabled (which requires a small script installation), and activate Single Page Application support under Settings > Field Testing.

Filter any Field Testing report by navigation type

The way Soft Navigations are supported in PageVitals is via a new Navigation type filter.

The navigation type can be "Normal" (a classic navigation), "Back/Forward" (when the user uses the Back or Forward button), "Reload" (when the user reloads the page) and "Soft Navigation" which means that a navigation inside an SPA was detected.

Embark on a journey of enhanced insights and optimization for your SPAs. The future of web development is here, and it starts with PageVitals.

Happy optimizing!