3 ways in which Google's Web Vitals will impact your SEO in 2021

The current state of UX in SEO

Until now there have been many user experience variables that Google has omitted, or treated rather superficially, in their search algorithms. It’s been due to the uncertainty surrounding the measurement of those variables - it was not universally accepted how to quantify and weigh them.

Some of the grey areas included loading times, interactivity and visual stability. Of course, loading times have always had an impact on search ranks, but only to a certain extent - very slow pages have simply been buried in search results, and mediocre to great performance had no significant impact.

With growing competition and under pressure from the community - Google decided to propose much more specific guidelines called Core Web Vitals.

Core Web Vitals

Web Vitals were first announced in 2019 and widely discussed by the broad digital community. As Google’s own engineer puts it, “Web Vitals is an initiative by Google to provide unified guidance for quality signals […] essential to delivering a great user experience on the web.”

Core Web Vitals, in turn, is a subset of Web Vitals that:

• should be measured for all sites

• will be surfaced (or made visible) across all Google tools.

By being uniform and universal they will help Google algorithms make fairer decisions about the visibility of any given site in the search results. Let’s see what they are.

Largest Contentful Paint (LCP)

LCP is a measure of loading performance, or speed. The metric reports the render time of the largest image or text block visible within the viewport.

In practice, this means that if your largest image or text block loads in less than 2.5 seconds Google considers this as a good result. More than 4 seconds is poor, and anything in between is acceptable but requires improvement.

Rule of thumb: if your images or text blocks are too large, or improperly uploaded or rendered, they will load slowly and negatively impact your score and therefore your chances for a good position in search results.

First Input Delay (FID)

FID is the measurement of interactivity. While it is extremely difficult to define what interactivity really means, Google and the community have come up with a simple yet pretty powerful metric.

Starting in 2021 the algorithms will consider the delay between the user’s action (such as a click, button tap, etc.) to the moment when the browser starts processing this request.

A delay of up to 100 milliseconds, or 0.1 of a second, is considered a good score. Over 300 milliseconds is poor, and anything between has room for improvement.

Rule of thumb: if your website’s code is written poorly it will delay the response of the browser and in consequence make your site or e-commerce store less appealing to search algorithms.

Cumulative Layout Shift (CLS)

Ever felt that a website plays tricks on you by moving buttons after you click on them? If yes - this is the evidence of layout shit, and Google does not want to promote that. To explain what layout shift means look at this screencast

As you can see, the elements change their position unexpectedly leading to clicking the wrong button.

Google analyzes the amount of content shifted in a section visible to the user (impact fraction) as well as the distances of these shifts (distance fraction). Then the following calculation takes place:

Layout Shift Score = Impact Fraction x Distance Fraction

CLS is the sum of all individual Layout Shift Scores. A score of 0.1 or below is considered good, above 0.25 is poor, and anything in between mediocre.

Rule of thumb: if elements on the page move around unexpectedly, search algorithms will make sure that this is reflected in the position of the site in the search results. You should make sure the visuals are fixed and stable.

How can we help?

At Blazity we make sure our clients are always on top of Google’s game. We pay close attention to the technological improvements that help make websites better for the users and appeal to the algorithms as well.

First and foremost we work with Next.js, which has already been equipped with powerful performance analytics. The analytics help optimize all the pages within a website to gain unbeatable loading speeds and improve Largest Contentful Paint.

With Next.js we also achieve a very fast browser reaction to user actions (e.g. click). Without going into deep and boring technical stuff, we are able to achieve unbeatable interactivity and thus improve First Input Delay.

Finally, we use the best programming practices to avoid any unexpected behavior of the page to minimize unwanted movement of components. Before releasing any website, application or e-commerce store we make absolutely sure that this does not happen. This makes Cumulative Layout Shift pristine.