What is a Single Page Application?

This explanation is written by ChatGPT and not authored (yet).

A Single Page Application (SPA) is a type of web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server.

How do SPA's work?

In an SPA, all necessary HTML, JavaScript, and CSS code is either retrieved with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary. The page does not reload at any point in the process, nor does control transfer to another page.

In other words, follow-up pagehits are then done via JavaScript as well. Such navigation is then called a soft navigation.

Advantages of a Single Page Application

  • Faster interactions since most resources are only loaded once throughout the lifespan of the application.
  • More fluid and seamless user experience, akin to desktop applications.

Potential drawbacks of Single Page Applications

  • More complex initial setup and development process.
  • Challenges with SEO (Search Engine Optimization) as the content is loaded dynamically.
  • Potential performance issues on devices with limited resources, as the browser must handle more tasks.

Core Web Vitals and Single Page Applications

A site that uses Client-side Rendering a for successive page navigations is a Single Page Application. And due to its soft-navigation character, this comes with nuances when looking at Core Web Vitals data.

Although a browser API is on its way, there is no uniform way of telling that a soft navigation happened in a browser. As a results, browsers won't be able to act on this.

That's why Google Chrome isn't able to submit Core Web Vitals data for successive navigations.

CrUX and GSC data

As a result, any Google Search Console and Google CrUX data that you will see will most likely only show experiences during either:

  • the first pagehit of a session;
  • or the pagehit that got refreshed by a user.

Most other navigations, such as back-forward navigations and normal page clicks will be excluded from CrUX, GSC and Core Web Vitals data, PageSpeed Insights included.

This does mean that your metric data might be worse compared to a non-SPA site. However, the CLS was already changed for this reason. And INP is ommitting the outliers already to cater for SPA's. So it's then mostly the TTFB, FCP and LCP that is being affected by the way SPA's are currently measured.

An API to fix this

The Google team is working on a fix via a soft navigations API. However, if and when Core Web Vitals will adopt this is not sure yet at time of writing.