The effect of Core Web Vitals on your SPA according to Google's new algorithm

We often encounter numerous and complex terms in the world of technology, which we must internalize in order to make the most of a website and, therefore, a business. Here, we want to talk about two fundamental concepts: Core Web Vitals and a website built with SPA architecture —Single Page Application, for its acronym in English; or single-page application, in Spanish—.

The Google algorithm update will represent a new way in which a website with SPA architecture is analyzed for the ranking of the famous search engine. Since May 2021, the metrics in relation to Core Web Vitals, that is, Google's indicators for measuring the performance of a website, will be included in the algorithm. For some, it may not very accurately reflect the user's experience on these types of websites.

In order to understand why the indicators Core Web Vitals they may not fully reflect reality, we need to know how a website works Single Page Application and what the new algorithm for positioning a website in Google could mean. After all, we all want to be on the first page when looking for our products and services.

What is a SPA website or Single Page Application?

An SPA website (Single Page Application) is built, as its name suggests, on a single JavaScript application. Unlike a traditional website with multiple pages that are requested from the server in their entirety, a SPA website only extracts those parts that are necessary. The codes it's built on—HTML, CSS, and JavaScript—are loaded only once or partially loaded in response to a user's specific actions.

The main objective of this type of web pages is to provide greater fluidity to users, avoiding unnecessary loading times and allowing more dynamic navigability, since they do not have to load all the content repeatedly. The typical process when accessing a website built with SPA architecture is as follows:

1. The website is accessed with its URL.
2. A loading animation appears before entering the main page.
3. The website built entirely with JavaScript loads in one go.
4. The initial content is displayed.
5. Whatever the user wants to access is updated with new server requests, but it does not need to reload completely.

In the last five years, this model has begun to be relevant and this type of web architecture is gaining followers, since it offers a better user experience and can separate both the Front End Like the Back End effectively for web developers. Of course, there is no downside, and that is that the initial load time can be longer, since you need to load all the JavaScript code beforehand, making the SEO score suffer. This is where the Core Web Vitals.

The importance of Core Web Vitals in relation to a SPA website

Core Web Vitals are the indicators that measure the user experience on a website to position them in Google search results based on their performance. With them, they seek to measure the following concepts, which will be taken into account for the updating of the positioning algorithm.

Largest Contentful Paint (LCD)

This metric measures the perceived load speed or Largest Contentful Paint (LCD). It will determine when the main content has been fully loaded and begins to be useful to users. According to Google, web developers must achieve the goal of fully loading the web in a time of 2.5 seconds, in order to have an optimal LCD score.

• 0 to 2.5 seconds: good
• 2.5 seconds to 4 seconds: needs improvement
• From 4 seconds onwards: bad

First Input Delay (FID)

Pages must achieve an FID of less than 100 milliseconds. The metric wants to measure the time it takes for the web page to respond for the first time, quantifying the user experience when starting to interact with the pages. In general, when the main navigation thread doesn't respond to the user, it's because they're busy doing something else. According to Google, the latter can also happen because the browser is busy analyzing and executing a large JavaScript file by an application.

Cumulative Layout Shift (CLS)

The CLS measures visual stability with respect to unexpected design changes in the content of a website. Basically, it attempts to penalize those web pages that move before being able to click on a site that the user had already signed in, a third-party advertisement that is resized by misadjusting the text, or those resources that load in a disordered way; something that reminds us of our own experience as users on certain pages.

Why Core Web Vitals may not reflect a realistic user experience

Several of the main reasons why indicators Core Web Vitals The following may be unfair to the Google positioning of your SPA website:

1. They don't analyze the performance of subsequent pages. As much as you put your effort into the performance of the pages following the initial one, that is, trying to ensure that, even if your landing page metrics are somewhat mediocre - but making for a more pleasant user experience for the following sections - Google will not take it into account beyond the initial LCP.
2. An isolated design problem can affect the entire score.. The CLS is a cumulative metric for the visual and design stability of a web page. A simple error or design problem can affect your entire score, penalizing your Google ranking.
3. Google admits its limitation. Google He admitted That the Core Web Vitals have their limitations for websites with SPA architecture. Although they have promised to continue working on them, all you have to do is be aware of them, analyze your competition and invest in optimizing your website. First of all, we must not forget that the web must first satisfy the user.

How can we help you?

If you need more information, do not hesitate to contact us.