How To Monitor Single Page Application Performance

Single-page applications often struggle with poor performance. However, it can often be difficult to identify where these issues occur and how to fix them.

In this article we take a look at the challenges that single-page apps pose for performance measurements and what you can do to analyze and optimize your web app.

The SPA monitoring challenge: hard vs. soft navigations

Traditional multi-page apps completely reset the page and load a new HTML document every time a visitor clicks on a link.

In contrast, single-page apps start with one hard-navigation, but clicking in the app just results in a soft navigation. The page URL changes and the page content is updated, but the browser is still displaying the same document.

That poses a few questions for monitoring SPA performance:

• Is opening an SPA a single page view, or many separate page views?
• When does a new page view happen? For every URL change or just user-initiated ones?
• Do you measure performance throughout the lifetime of the page or just for the initial page content?
• Do you attribute metrics to the original page URL, or one of the later URLs?

How Google's Chrome User Experience Report (CrUX) handles soft navigations

For the data Google collects as part of the Chrome User Experience Report, all measurements are attributed to the original page URL.

That means: when a user visits /home, navigates to /product in an SPA, and then has a slow interaction on that page, then the Interaction to Next Paint score on /home will increase!

Like INP, Cumulative Layout Shift can increase throughout the lifetime of the application.

In contrast, the Largest Contentful Paint score is final once a user interacts with the page. That means it always measures the initial load time of the page. If other parts of the app load slowly then that does not impact LCP scores.

Ongoing efforts to standardize soft navigations and SPA performance metrics

Currently there's no standardized way to measure single-page applications. However, there have been efforts to standardize what counts as a new page view and measuring separate paint timings for each page.

Google ran an origin trial for soft navigations in 2024, and is planning to run another one later this year. Once the trials are successful, standardized SPA performance navigations will be available for all websites in the stable version of Chrome.

Measuring SPA performance with real user monitoring

DebugBear's real user monitoring product measures Core Web Vitals and other web performance metrics across your website. You can use it to identify where users experience poor performance and then deep dive into the technical data to find out how to fix problems.

The way the metrics are recorded is aligned with Google CrUX data. So interactions and layout shifts on later pages are attributed to the original URL.

However, that's not great for debugging! That why DebugBear also provides two additional data properties for each page view:

• INP URL Path: The path where the slowest interaction happened
• CLS URL Path: The path where the largest layout shift cluster was recorded

This data allows you to break down on what pages users experience poor CLS and INP.

You can also inspect each specific page view to see when soft navigations occurred on the page.

For example, here we first see a soft navigation to a page speed test result, and then another soft navigation as the visitor uses the browser "back" button.

Common challenges with single-page app optimization

SPAs are more liable to a specific set of web performance problems:

• Slow JavaScript-heavy user interactions
• Slower initial page load
• Layout shifts as visitors navigate through the app
• Page errors impacting user experience

Let's take a look at how performance monitoring data can help identify and fix these issues.

tip

Check out our framework-specific guides on Next.js Performance and Vue Performance.

Debugging INP with the Long Animation Frames API

There are many causes of slow interactions in single-page apps:

• Complex logic to handle the event
• Global analytics listeners delaying updates
• JavaScript hydration preventing events from being handled
• Background tasks that need to finish before the page can update

The Long Animation Frames API provides additional reporting on what scripts delay rendering updates and cause high Interaction to Next Paint scores.

He's an example interaction. We can see that:

1. Input Delay prevents the interaction from being handled
2. The background task runs due to being scheduled by Lodash using setTimeout
3. The actual event handler on the input element only takes 5 milliseconds to run

Check the initial page load with synthetic tests

Synthetic testing can provide a detailed analysis of how resources are loading during the initial page load and how that impacts what users can see on the page.

For example, here we can see a request waterfall for a single page application:

• Some content server-side rendered and appears quickly
• Multiple JavaScript bundles load in sequence before the full content renders

Identify layout shifts impacting real users

Cumulative Layout Shift scores often differ significantly between lab tests and real user data. Often layout shifts happen in response to a user interaction, or only apply on certain viewport sizes.

Real user data can help you see where users experience layout shift and how to replicate it. You can see:

• What elements shift on what pages
• What page URL the shift happened on (using CLS URL Path)
• Whether an interaction preceded the shift

View page rendering errors

Single-page websites depend on JavaScript to function, and even to load in some cases. Tracking JavaScript errors lets you see what errors occur on your website and what pages they happen on.

Conclusion

Measuring and monitoring single-page applications comes with specific challenges. Browser standards are still evolving to provide better ways to analyze single-page app performance.

A web performance monitoring tool like DebugBear can help you gain better insights into what parts of your app are causing problems for your visitors and what you can do about it.

Monitor Page Speed & Core Web Vitals

DebugBear monitoring includes:

• In-depth Page Speed Reports
• Automated Recommendations
• Real User Analytics Data

Start Free TrialGo To App