Marketing
October 8, 2021

A Beginners Guide to Core Web Vitals

Experiences. They’re little life lessons, wrapped up in moments.Some are magical, and some not so much. Our experiences will always drive our motivations, as everyday people and as consumers. 

Our negative experiences register right away, whilst positive ones get held in a state of awareness before entering our emotional memory. A single negative experience is more memorable than a thousand positive ones. 

If a customer’s first or fiftieth experience on your site is negative, they’ll forget everything else. A single negative experience is more memorable than a thousand positive ones. Page experience is powerful, and Google agrees. 

Google’s algorithm is updating, and it’s taking page experience seriously. They’ve been rolling out some new metrics to measure this, and it’s imperative that you keep on top of them.

They’re called Core Web Vitals, and you’ll need to get in their good books.

 

What are Core Web Vitals? 

Core WebVitals are a trinity of specific factors Google believes impact the overall user experience of your webpage. Consisting of three measurements for page speed and user interaction, they include:

  1. Largest Contentful Paint (LCP)
  2. First Input Delay (FID)
  3. Cumulative Layout Shift (CLS)

 

Don’t be frightened by their fancy names - they’re simply Google’s way of understanding your user experience. For now, think of them as loading, visual stability, and interactivity. Together, they’re part of the ‘page experience’ family alongside the other web vitals:

  1. Mobile Friendly
  2. Safe Browsing
  3. HTTPS
  4. No Intrusive     Interstitials 

 

And why are they important? 

Because they’re officially joining Google’s list of ranking factors. That's it. That's the reason.  

If you’re unsure of ranking factors, they’re what search engines use to choose who goes where on the list of results when somebody searches for something.  

As the digital age evolves, Google reviews and refines its rankings factors. Moving forward, page experience will play a major role in what Google considers important when rating the user experience your website provides.

So long story short: you need to get up to speed with Core Web Vitals if you want to stay on top of the rankings and ahead of your competitors.

The bad news is that it’s always changing, so there’s no one size fits all solution to staying ahead.

The good news is that we’ve done the hard work for you, so everything you need to know to get started is right here in this quick guide. We’ll begin by taking a closer look at each of the three Core Web Vitals. 

Largest Contentful Paint (LCP)

Largest Contentful Paint (or LCP to its friends) is all about loading speeds. Officially, it measures the time it takes your website to show your users the largest piece of content on the screen. This could be anything from images and videos to text elements like headings and paragraphs.

Google only considers content above the page's fold – that’s everything your users can see without scrolling down the page.  

It’s important to remember that Google only counts the loading time of the things it deems relevant to the user experience. These can include:

  1. Background images with CSS
  2. Image tags
  3. Images
  4. Text elements such as headings, lists and paragraphs
  5. Video thumbnails 

Because LCP is all about loading, the lower your score is, the better. Why? Because it means all of your essential content is seen sooner by your users. And the sooner they see it, the better their experience. 

Google’s optimal speed is 2.5 seconds or less for a ‘good’ rating. If you’re hitting 4 seconds or more, it’s ‘poor’ and you’ll want to get it fixed quick sharp. 

Alongside becoming a major ranking factor for SEO, improving your LCP can help you:

  1. Improve your conversion rates
  2. Increase average session times
  3. Or positively impact any user behaviours that affect your business

 

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (or CLS when it's at home) is all about interactions - or the ones we don't want, at least. This metric measures your website's stability, or lack thereof. For example, have you ever been moments away from clicking 'explore more' only for the whole page to shudder and suddenly shift so you're clicking on an ad about deodorant?

If the answer is yes - that sudden movement is called the layout shift. And it happens way more than you might think. It's a jarring occurrence that can ruin some brilliant user experiences. It's why Google is starting to look at CLS. In particular, they're looking at the proportion of your user's view impacted by the layout shifts and the distance of everything involved. 

If you've got a fully static page that's not jumping around left, right and centre, you'll likely have a score of 0. The more layout shifts your page has, the higher the score. Like golf, you're aiming to have as few layout shifts as possible to have the lowest score out of your competitors.

Google believes your CLS needs to be below 0.1, and if it's above 0.25, you're going to get that unwanted 'poor' rating. In the long run, that'll impact your SEO and affect how much traffic the search engines send your way.  

In the short term, however, it means your users could be having one of those days on your website, and that's bad for business.Layout shifts can cause some frustration, but they can also create angry customers from accidental purchases. If you want to keep those conversions coming and create meaningful customer relations, you'll want to make sure those shifts aren't happening so much. 

Now, we know a lot of websites like using fancy animations to make the magic happen. And sometimes these animations can cause layout shifts. There's no need to worry though, the good news is not all of them will count towards your CLS score. Google will ignore CSS transform changes, so you'll mostly avoid an impact on your score. 

Google pinpoints a handful of things as common causes of Cumulative Layout Shift such as:

1.    Dynamically injected content

2.    Images without dimensions

3.    Web fonts causing flashes of invisible text

First Input Delay (FID) 

First Input Delay (or FID to you and I) is all about response times. This metric measures the delay between the moment your user clicks something – like a button, image or link – and the time it takes the browser to start processing it. 

Unlike LCP, FID is measured in milliseconds and doesn’t count continuous user interactions like zooming in and out or scrolling up and down the page.  

If you remember just one thing when it comes to FID, remember it’s all about first impressions. Sure, it’s no industry secret that the first time your users start exploring your website can be the most important. It’s their earliest memories of their experience with you – and it’ll paint their perception of you as a business and as a brand. 

When someone first shows up on your site, it’s when critical resources are loading up. Clunky and irresponsive websites are avoided like the plague, so if you’re looking to create more conversions, make sure to keep an eye on your FID scores. 

If user experience (UX) matters to you – and if it doesn’t, find out why it should here then FID will be the Core Web Vital you’ll want to care even more for. It’s not something you can just pick up and test; it requires real, authentic user interactions. Therefore, FID is interested in your users, and the experience they have the moment they arrive on your website.  

According to top sources, 0.1 seconds is the absolute limit for users getting that instantaneous buzz from a response. So with that in mind, you’ll want to make sure to keep your FID under 100ms. If you’re going above 300ms, Google will rank you as ‘poor’ and when it comes to your SEO, you don’t want that.   

Quick fixes for slow FID scores often lie with your JavaScript or CSS usage as it’s likely not optimised. CSS files should always be downloaded and parsed as soon as possible for rendering, whilst JavaScript tasks can take up a whole chunk of the delay. Breaking up longer back-office tasks into smaller ones and minimising just how much data needs to be processed will reduce the work needed to render, helping improve your score.

 

And that’s your starter for ten

That’s everything you need to know to get started on understanding what Core Web Vitals are, why they’re important, and what you should be looking out for.

As it’s a new set of measurements, Google is likely going to grow what’s included as time goes on into a page experience garden.It’s likely things like FID will become stricter, CLS will become increasingly more impactful, and metrics for animation performance may be introduced.

If you’re still scratching your head at any of the above – don’t worry! Our developers and digital marketers are experts in all things SEO, so get in touch with us today to find out how we can help you get those Core Web Vitals in order.

1.

I want a
website.

LIFT OFF

Start your journey with Star Digital by finding out the best route to take when creating your website.

Start Now