Whether you are entirely new to SEO and just dipping your toes in the water or you’ve been learning about it for quite some time, one thing is for certain: it’s a broad and comprehensive subject with a seemingly endless number of acronyms and abbreviations. Take CLS, LCP, FID, FCP, and TBT as an example; what do they all mean? If you’re feeling a little overwhelmed by it all then don’t panic; in this article we’re going to cover everything you need to know.

What are SEO Core Web Vitals?

Before we get stuck in, what are SEO core web vitals? The core web vitals are essentially the speed metrics which are a part of Google’s Page Experience signals. These are used to measure the overall user experience.

The metrics measure a number of different things from the largest content painful (LCP), the visual stability and cumulative layout shift (CLS), and the interactivity of first input delay (FID)—don’t worry, we’ll cover each of these components in greater depth shortly.

But first, if you want to view the metrics on your website to see how you are doing, you can use the core web vitals report in the Google Search Console.

Using this report, you will be able to see how the pages on your website are categorized (e.g., ‘poor URLs’, ‘URLs need improvement’, and ‘good URLs’.

It’s important to note that there are over 200 ranking factors with SEO! As such, you shouldn’t expect to see a world of improvement just by working on your core web vitals. That said, it’s not to say that you should ignore them. The fact is, whether they have a huge impact on your rankings or not, improving the user experience is crucial in keeping people on your website and encouraging conversions.

What does CLS mean?

What does CLS mean? CLS stands for cumulative layout shift (aka visual stability). This measures how elements move around on the page or how stable the page layout itself is. Things like the size of the content and the distance it moves are taken into account.

One of the biggest issues with this metric is that it will continue to measure in the background even after the initial page has finished loading. That said, Google has been receiving a lot of feedback on this metric so there’s a good chance that we will see this change in the future.

You’ll likely have experienced this frustrating issue before where you click on a feature on a web page and then all of a sudden it shifts and you end up clicking on something else, thus sending you through to another page entirely. As a user this is highly frustrating!

Here are some of the most common causes of cumulative layout shift:

Uploaded images without dimensions
Embedded ads and frames without dimensions
Content injected with JavaScript
Fonts or styles being applied late in the load

How to optimize for your CLS

In that light, how can you optimize your CLS? For one thing, you can drop custom fonts and stick with default fonts for the loading pages, but this will be trade-off in regards to your branding, style, and consistency.

Ideally, you should aim to keep your website as clean and clutter-free as possible. Of course, this is much easier said than done. One thing that you can try is create test pages and trial some different variations to see which optimizations deliver the best results.

What does LCP mean?

Now, what does LCP mean? LCP or largest content painful refers to the largest visible element loaded in the viewpoint when a web page starts up. The largest element tends to be your featured image, or perhaps the <h1> tag. However, it could be any one of the following as well:

<img> element
<image> element inside an <svg> element
The image inside a <video> element
Background image loaded with the url() function
Large blocks of text

How to optimize for LCP?

Again, if your LCP element is the featured image, then you’ll want to make it more efficient by preloading the image or inlining the image itself in order to make the image download alongside the HTML code. In essence, this should enable the image to load faster, thus improving your LCP.

What does FID mean?

And what about FID? FID, or fist input delay refers to interactivity—or more accurately, the time it takes for a page user to interact with an element before the page responds. This doesn’t include scrolling or zooming, but clicking on an element and an action being taken.

Here are some examples of such interactions:

A user clicking on a link or button

Typing text into a blank field / contact form

Selecting a drop down menu

Ticking a check-box

Naturally, it’s frustrating when you click on something on a web page and nothing happens, so this is worth configuring for the user’s benefit.

What is the most common cause of FID?

One of the most common causes of FID is JavaScript competing for the main thread. So, if there’s just one main thread and JavaScript is competing to run tasks on it, then it can result in a delay because a page can’t respond to the user input in time. The longer the task taking place, the greater the delay experienced by the user—again, not good!

How can you optimize for FID?

Ideally, you’ll want to break up any of the longer tasks and defer things like JavaScript which aren’t required immediately, until later. This will give your users the opportunity to click on elements and see faster results in the short-term.

What does FCP mean?

FCP or first contentful paint measures the point in time when the very first piece of content from the DOM (document object model) is rendered on screen. In other words, the first HTML element that is displayed when a page is loaded.

Not to be confused with largest contentful paint, the FCP is simply the first to appear. This can be either text, imagery, or anything that a user recognizes as being part of the webpage.

FCP is a crucial performance metric and you can optimize it by trying the following things:

Enable website caching
Using a faster server
Eliminating render-blocking resources
Generate critical CSS and inline it
Preload critical resources
Reduce the DOM size
Host your fonts locally
Avoid multiple page redirects

What does TBT mean?

TBT or total blocking time refers to a load responsiveness metric that is used to measure the overall usability of a web page during its loading. This is an important user-focused performance metric that will compare the amount of responsive and non-responsive time during the rendering process of a web-page.

TBT is another important performance metric and you can optimize it with the following steps:

Reduce the request count of any third-party scripts
Reduce the size of third-party scripts
Minimize the browser’s main thread-work
Clean any unused Javascript and CSS codes
Compress the Javascript and CSS files
Implement code splitting for any Javascript assets

Conclusion

There isn’t a huge amount of data that demonstrates just how much of an effect these different metrics have on your organic search engine rankings. However, that doesn’t mean that they should be overlooked. Again, as they all influence the user experience, they are crucial components that should be given fair consideration.

If you are feeling a little bit out of your depth and don’t have the technical knowledge or experience to go digging around in the back-end of your website for fear of breaking something, then you can hire the professionals to assist you.

At Content’s ME, we have an exceptional technical team that can make short work of these tasks and offer industry-expert advice on how best to improve the overall user experience on your website.

For more information, or to explore these services further, please do not hesitate to contact us at your convenience.

What are SEO Core Web Vitals? What Does CLS, LCP, FID, FCP, TBT Mean?