Core Web Vitals: A Complete Technical Guide

Core web vitals – as seen in the name – are a ✨vital✨ part of your website’s health. Similar to humans, if your vitals aren’t up to par, you’re not going anywhere. 

Core web vitals are one of the cornerstones of Technical SEO, and should be one of the first things explored before content or linkbuilding.

In this article we’ll cover the following:

What Are Core Web Vitals?

Core web vitals are a set of metrics that measure your website’s performance and user experience based on page loading speed, ease of interactivity, and visual stability. They’re made up of three main metrics:

1. Largest Contentful Paint (LCP): The time it takes for the largest image or text block to load after a user clicks on a page. This should be 2.5 seconds or less.
   
2. First Input Delay (FID): The time it takes for a site to respond after a user first interacts with it. This should be 100 milliseconds or less.
   
3. Cumulative Layout Shifts (CLS): How much a page visually shifts while it is loading. This should be 0.1 or less.
   

Let’s explore why these metrics are so important to get right.

---

Why Optimise A Site’s Core Web Vitals? Is It Really That Important?

Google has made it continuously apparent that user experience is at the heart of its ranking factors. Content that is useful, helpful, and informative will always rank higher than spam content. Alongside this, websites that load quickly and are easy to navigate will rank higher than sites that don’t. 

Obviously, this makes perfect sense. We want our users to have a hassle-free experience when browsing our website. It helps build trust and increases the chance of them returning. In fact, 53% of users will leave a website if it doesn’t load in less than 3 seconds.

That’s half of a site’s potential revenue gone.

This boils it down to three main reasons to optimise your core web vitals:

1. Google says so
2. It improves your user experience (and builds trust)
3. You lose traffic and potential revenue if you don’t

Now that we have a general understanding of what core web vitals are and why everyone is always shouting about them, let’s dive deeper: 

---

Tools For Analysing Core Web Vitals

Luckily, Google makes it pretty easy to measure core web vitals. They offer free tools that anyone can use to check LCP, FID, CLS, as well as other basic metrics that will help you understand if your website is up to par, and what you can do to fix it. 

The tools that we’ll be looking at are:

• Google Search Console
• Pagespeed Insights
• Lighthouse

But there are many others, both free and paid that can offer just as good, if not better, insights. 

Google Search Console

If you’re an SEO, then you’re already familiar with Google Search Console. I give thanks to the Google Gods every day for this tool. It can help you analyse traffic, find ranking keywords, fix indexing issues, and so much more. 

Today we’re focusing on their Core Web Vitals tab underneath the “Experience” section.

This tab shows you any URLs on both desktop and mobile that may have CWV optimisation opportunities. 

Click “Open Report” to see in more detail

From here we can get a more detailed view of which CWV needs attention. 

Click through to one of the issues to see more details.

Notice the section at the bottom, “No INP Issues Detected”. This will be replacing FID in March 2024.

In this section, we can see the specific URLS that are affected by clicking on the example URL – this will open up the list of URLS on the side of the page. 

From here you can work through the URLS to optimise core web vitals.

Pagespeed Insights

Pagespeed Insights is another free tool that is great for analysing CWV.

This tool not only gives you an overview of LCP, FID, and CLS, but it also gives information for additional metrics and opportunities for optimisation including accessibility, best practices and SEO.

Scroll down on the page to see opportunities for optimisation for each of these sections.

You can click through each of these opportunities to find the exact code that includes the issue, and to learn more about how to implement the fixes for each issue.

Lighthouse

Lighthouse has the additional benefit of a fourth metrics, TBT or Total Blocking Time, which can be used alongside FID to determine how quickly your site responds to interaction. This makes it ideal to be used alongside Search Console and Pagespeed Insights.

The chrome extension is particularly useful.

Generate a report on the site you’re working on and let the tool do the rest! You’ll get a similar look to Pagespeed Insights with the benefit of the extra metrics.

Like Pagespeed Insights, you can scroll further down to see exactly where in the code Lighthouse has found the issues and suggestions for how to fix them.

---

Passing Core Web Vitals

So how do we know what is “good” and what is “bad” core web vitals?

Ideally, we want the site to be in the 75th percentile for each of the three main metrics. This is a benchmark set by Google. 

This percentile refers to a performance benchmark that indicates the point at which 75% of page passes LCP, FID, or CLS.

Should we be aiming for 100% on each metric?

No.

That would waste valuable time and energy. 

What we should be focusing on is being better than our competitors.

To do this we just have to do a bit of digging.

1. Create a list of the top five competitors
   Who, in the field, is doing great? What websites come up first when you search popular keywords related to the purpose of the website you’re working on?
   
2. Plug those competitors into your CWV platform of choice
   Get an idea of where your competitors are for each metric. Do they have fast-loading pages? Are their sites visually volatile? What are they doing wrong that you can do better?
   
3. Make your site better
   By focusing on benchmarking your metrics using competitors, you can take the pressure off making The Bestest and Fastest Site Ever and just focus on making a site better than the competitors.

This saves you loads of time and gives you the opportunity to then put your focus on other priority tasks.

Improving Largest Contentful Paint (LCP)

Basic Info about LCP

What LCP looks like: How fast a page loads to a user

What LCP measures: The time it takes for the largest content on a page to fully visually load

Score for LCP: At least 2.5 seconds

This metric measures the time it takes to show the user the largest content on the screen, and for it to be ready for interaction. This includes all content that is related to user experience. That is:

• Images
• Image tags
• Video thumbnails
• Background images with CSS
• Text elements

Over the years Google has focused their algorithm updates on enhanced user experience. And so it’s no longer good enough to have helpful content, but the site has to load quickly. 

Doing this will not only be beneficial for the user, but is also an important ranking factor for Google. 

This means that the page loads its largest content in less than 2.5 seconds. Any higher than this, and we’re looking at working LCP optimisations into the strategy.

What causes poor LCP?

Poor LCP can be caused by four main issues:

1. Render Blocking Javascript and CSS
2. Content load times
3. Slower server response time
4. Slow rendering on the client’s side

Obviously, we don’t have any control over the user’s side of things. If their internet is slow that day, then the LCP may be lower for them. What we’ll focus on is the things we have control over. 

LCP can be affected by the following content:

• Images
• Image tags
• Video thumbnails
• Background images with CSS
• Text elements

What can you do to optimise for LCP?

There are a few ways we can tackle this metric. If you’re working with a development team, that makes this much easier. Give them an overview of what needs to be done, and they can jump into the back end and make the fixes for you. If not, then you can sometimes find plugins that will help you optimise for these issues.

1. Optimise Image Sizes: Sizing images can help keep load speeds low. We can do this by giving the image elements in the HTML a specific size. 

2. Use an Image CDN: An image cdn caches images and adjusts images to be delivered more quickly depending on the user’s device and location. 
   
   This is done by determining the size, format, and quality that’s needed. If a user is on mobile, the image will load smaller. If a user is using slow internet speed, the image will be loaded at a slightly lower quality to improve page speed.
3. Avoid using javascript to load images: Javascript is notorious for slowing down the loading process. It creates more work for your user’s browser and requires multiple processing stages: it must be downloaded, parsed and executed from your user’s browser.
   
   We can avoid this extra work by having our images load directly on the browser. 
   
   If javascript is causing the load speeds to slow you can:

• Reduce CSS
• Defer unused JavaScript
• Minify and compress JavaScript files
• Defer CSS that isn’t necessary

3. Choose your hosting service wisely: A good quality hosting service will ensure that the page speeds are kept up to par. Good hosting services will have decent bandwidth to accommodate high traffic, as well as other factors that could significantly influence the speed and LCP of the website.
4. Change image files type: Using WebP rather than JPEG, and PNG can help to speed up the image loading speeds. 
   
   There are WordPress extensions that can immediately change all your image files to WebP.

Enhancing First Input Delay (FID)

Basic Info about FID

What FID looks like: How fast things happen after a user clicks or interacts with an element on the page

What FID measures: The time it takes between an interaction and a response

Score for FID: At least 100 ms

Note: First Input Delay will be replaced with Interaction to Next Paint in March 2024.

First input delay calculates the delay between the user’s first interaction with a page and the moment the page reacts to that interaction. 

This metric is all about first impressions – the first time a user interacts with a site will leave a lasting impact on their trust of that site. 

An input delay can happen because a site has large javascript files, which take a while for a page to process and make that page seem unresponsive. As we mentioned above, if a site doesn’t load within 2.5 seconds or less, a user is likely to bounce. 

The same concept applies to the first input delay. 

If a user clicks on something and it takes longer than a fraction of a second to see a response, they’re likely to leave the site for a more responsive one. 

What Causes Poor FID?

This is very similar to LCP. Typically any task that takes a long time to load will cause a poor FID. JavaScript is a common culprit here. If a site uses excessive JavaScript, Render-blocking JavaScript, or has long Javascript loading times, this can slow down the input delay.

How to Optimise for FID

First, you’ll need to determine what is causing the poor FID. 

We’ll use Lighthouse for this example. Here you can see a list of opportunities and diagnostics that will lead you in the right direction. Scroll down on your lighthouse report and you’ll find a section called “Avoid long main thread tasks”.

This shows you a list of all tasks that take longer than the recommended amount of time.

There are a few ways that you can bring down the FID, once again, a developer will be very helpful to have in these scenarios. Many of these are similar to the optimisations that can be made for LCP. Like many things in SEO, once you begin to optimise one thing, it will have positive knock-on effects. 

1. Break up long tasks: Longer tasks will take longer to load. Break these down into smaller parts.
2. Minify and compress code files: This can be done using CDN providers – which work similarly to using an image CDN that we can use to optimise for LCP.
3. Remove third party scripts that aren’t necessary: These can significantly slow down both the loading speed and the FID
4. Optimise CSS: CSS is render-blocking by default, and so minifying and reducing this where possible will significantly help reduce FID.

Minimizing Cumulative Layout Shift (CLS)

Basic Info About CLS

What CLS looks like: Page elements that move around as the page loads

What CLS measures: The amount a page will shift unexpectedly without user input

Score for CLS: .1 or less

Cumulative layout shift is when the page unexpectedly shifts while it is still downloading. We can see this when a banner suddenly loads and the content under the banner jumps down. This can be quite frustrating if a user was in the middle of reading that content. 

In other words, these are movements that happen without user input.

A score of below 0.1 means that a page is visually stable – if this is true for 75% of the page load then the page passes.

If it’s not, then we have some work to do. 

The content that tends to cause cumulative layout shifts are:

• Images
• Videos
• Banners
• Contact forms
• Fonts 
• Buttons
• Ads
• Etc

What Causes Poor CLS?

There are a few reasons that a page may experience CLS.

• Content doesn’t have defined dimensions
• Content is dynamic 
• Network responses are low
• Web fonts take a while to load causing FOUT/FOIT
• Ads loading slow

How To Optimise for Poor CLS

First, find the pages that have poor CLS. This can be done on Search Console by clicking through the options detailed in the section titled “Tools for Analysing Core Web Vitals”.
You’ll get a list of URLs that have had historical issues with CLS. 

A few ways that you can optimise for CLS are:

1. Don’t put ads or pop-ups above content: This will cause everything below to shift, lowering your CLS score. On top of this, it causes your user experience to plummet – nobody wants ads to get in the way of the information their searching for. Instead either reserve space for these ads in the content or put them at the bottom of the page.
2. Add width and height attributes to images and videos: This is the same guidance for optimising your LCP. If images and videos have a set size, and it’s the correct size, it will reduce any layout shifts significantly.
3. Optimise fonts delivery: To avoid FOIT/FOUT, we can make sure that fonts are optimised using “link rel=’preload’ and font-display: optional” together. 

Conclusion

Obviously, core web vitals are a crucial part of your website. Not just for Google but for the users as well. It takes time to explore, fully understand and optimise for these metrics, but the site will be better off for it.

Like many SEO’s know: A site that doesn’t have a solid technical foundation has no chance of ranking.

Don’t waste hard work and time by spending time on content before optimising the technical aspects of a site.

If you’re still unsure about core web vitals, then you’re in luck. The Digital Maze is a full-service SEO and web development agency with experts with a large breadth of experience and knowledge.

What I’m trying to say is: we can help!