Core Web Vitals, are three metrics that score a user's experience while loading a webpage. These metrics score how quickly page content loads, how quickly a browser loading a webpage can respond to a user's input, and how unstable the content is as it loads in the browser. These three metrics are going to be bundled alongside Mobile Friendliness, Safe Browsing, HTTPS and Intrusive Interstitials into a signal Google is calling the "Page Experience Signal".

Since Google’s first announcement (May 2020) that Core Web Vitals will become part of their ranking algorithm, plenty of questions have been raised by web owners and answered by industry leaders, with a vast treasure of helpful information freely available on the web.

Here at Proventus Digital, we know that if we answer the “Why” questions first, and answer them as comprehensively as possible, the “What is.” and “How to..” information makes a lot more sense.

So let’s begin:

Why Are Core Web Vitals Important?

In order to fully understand how important Core Web Vitals are to a business, we need to first look at what Google is trying to do by making user experience part of their ranking algorithm.

Core Web Vitals are a set of user-centred metrics that Google uses to quantify key aspects of the user experience in the real world. The Core Web Vitals measure aspects of web usability such as load time, interactivity, and the visual stability of content on web pages as they load.

There is a very popular saying that states: “If you can measure it, you can improve it.”

With this in mind, it’s easy to see that Google’s primary goals with Core Web Vitals are not just to speed up page load times but more so to measure the perceived user experience (UX) of a page load.

Why Does User Experience Matter?

The user experience (UX) matters because it’s directly tied to how users perceive your website. If they have a poor UX while browsing your page, it’s unlikely they’ll stay long. In fact, research shows that 88% of your customers won’t give you another chance after a bad experience.

Some examples of potentially annoying and negative user experiences are:

• When the web page is showing a blank screen while loading

• When buttons move around just as you are about to click or tap on them

• When the page looks like it has finished loading but does not respond when you try to use it

At Proventus Digital, we understand the importance of user experience and how it can directly affect page and website conversions in a positive or negative way.

What are the most Important Core Web Vitals Elements?

The metrics that make up Core Web Vitals will evolve over time. The current set focuses on three aspects of the user experience namely loading, interactivity, and visual stability.

Largest Contentful Paint (LCP) - This refers to how long it takes for a page to load from the time the user clicks on any link to the time the page appears on their screen.

First Input Delay (FID) - This refers to the amount of time it takes before the user can successfully interact with your page. Clicking on links in the main menu and navigation bar, filling out forms, and opening “accordion text” on mobile devices are all examples of this. These are some of the factors considered for a positive user journey experience.

Cumulative Layout Shift (CLS) - This is about the page's visual stability and ensuring that all elements load at the same time, rather than having one or two elements load with a time lag. Any elements that take too long to load can cause users to click on something they didn't intend to click on, resulting in a negative user experience. This is especially important when it comes to mobile devices, where there is much more margin for error when it comes to clicking.

How To Improve Your Site’s Core Web Vitals

Once you've measured the Core Web Vitals and identified areas for improvement, the next step is to optimise.

One factor contributing to a poor user experience is how long it takes a user to see any content rendered to the screen.

Largest Contentful Paint (LCP) measures when the largest content element in the viewport becomes visible. It can be used to determine when the main content of the page has finished rendering on the screen.

The most common causes of a poor LCP are:

• Slow server response times

• Render-blocking JavaScript and CSS

• Slow resource load times

• Client-side rendering

To fix these you should consider:

• Removing any unnecessarily third-party scripts

• Upgrading a slow web host.

• Set up Lazy Loading

• Removing large page elements

Note* the above mentioned paint times do not capture load responsiveness: or how quickly a page responds to user interaction.

First Input Delay (FID) is a Core Web Vitals metric that captures a user's first impression of a site's interactivity and responsiveness. It measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction.

The main cause of a poor FID is heavy JavaScript execution. In such cases, the browser cannot respond to most user inputs while it's executing JavaScript on the main thread.

To improve this:

• Break up Long Tasks

• Optimise your page for interaction readiness

• Use a web worker

• Reduce JavaScript execution time

To fix these you should consider:

• Minimise (or defer) JavaScript

• Remove any non-critical third-party scripts

• Use a Browser cache

Layout shifts can be distracting to users. Imagine you've started reading an article when all of a sudden, elements shift around the page, throwing you off and requiring you to find your place again. This is surprisingly common on the web, including when reading the news, or trying to click the 'Search' or 'Add to Cart' buttons.

Cumulative Layout Shift (CLS) measures the instability of content. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.

The most common causes of a poor CLS are:

• Images without dimensions

• Ads, embeds, and <iframes> without dimensions

• Dynamically injected content

• Web Fonts causing “Flashes of unstyled text”

• Actions waiting for a network response before updating DOM

To fix these you should consider:

• Using set size attribute dimensions for any media (video, images, GIFs, infographics etc.)

• Making sure ads elements have reserved spaces

• Not adding new content above already rendered content.

How perfect do we need to be?

While Core Web Vitals is certainly an important piece of the puzzle, Google uses a variety of variables in its search algorithm, so Core Web Vitals alone will not propel you to the top or bottom of Google.

Even so, in an extremely competitive search landscape, any little advantage can help you get your content viewed ahead of your competitors, and unlike most of Google's ranking factors, this part of the algorithm is clearly defined. Google has actually told us what we need to work on and given us the tools to test it.

We should think about why Google has been so kind. They recognise that, while content is king, the user experience with which the content is presented to users is also crucial. By informing us of these indicators, they are simply encouraging us to improve the internet for real users.

Of course, not every website will be able to achieve perfect CWV scores, but every little change we make will benefit actual people, making them more likely to choose you over your competitors, and that is what really matters.

To have an in-depth consultation regarding your Website Development, Search Engine Optimisation and Content Creation - Contact us at hello@proventus.ie