In this guide we are going to take a detailed look at what Google’s Core Web Vitals are, what they mean, Google bench-marking, and what you can do to improve your website.

Core Web Vitals are detailed performance stats for your website, which can be found using Google’s PageSpeed Insights tool – see how to improve your website’s score in my quick guide to Core Web Vitals.

Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) make up Google’s Core Web Vitals to measure the performance and optimisation of your website. From 2021, these will become direct ranking factors for your website.

Want to see how to improve your website’s performance? Skip to the relevant section here;

Get a head-start with this guide and learn all about the Core Web Vitals.

Core Web Vitals Assessment

To see how your website is performing against Google’s bench mark for the Core Web Vitals, go to PageSpeed Insights and analyse your website.

The updated report adds a new section at the start, detailing the new performance stats.

To note: if your website does not get much traffic, the ‘Field Data’ area might not always show.

Core Web Vitals Field Data on PageSpeed Insights Report

You can see that in this example, it is clear that the page analysed did not pass the assessment.


Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)

‘The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.’

The LCP reports on how fast elements of your website load in the ‘viewport’ – the ‘viewport’ is the screen or device a user is visiting your website from. If elements on your website are correctly optimised, loading should be quite smooth.

What does LCP analyse?

  • <img> elements
  • <image> elements inside an <svg> element
  • <video> elements (the poster image is used)
  • An element with a background image loaded via the url() function (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text elements children.

The new update on PageSpeed Insights will show you what percent of elements load quickly.

How to improve your LCP performance

Here are the main items that can reduce your website’s loading speed and improve your LCP performance;

  • Preload key requests
  • Eliminate render-blocking resources
  • Defer offscreen images
  • Serve images in next-gen formats
  • Efficiently encode images
  • Avoid multiple page redirects

With the help of a web designer, you can implement these changes to the code of your website. If you are using a WordPress theme, some of these items can be built-in directly.

When looking for a WordPress theme, it should have details on loading speed and how it is technically optimised.

If your website theme is not technically optimised for loading speed, you can always install a plugin to help. I would suggest Autoptimize, and you can find a guide on how to use it here.

First Input Delay (FID)

First Input Delay (FID) Core Web Vitals

‘The First Input Delay (FID) metric helps measure your user’s first impression of your site’s interactivity and responsiveness.’

The ‘first input’ relates to the responsive elements on your page that load. These could be links, buttons or pop-ups – something that a user on your website can interact with.

Input delay (or ‘input latency’) happens when the browser’s main thread is busy loading something else, so it can’t yet respond to the user. For example, if your website is loading a large Java script file, it won’t load other items until it is finished.

FID Explained – Loading Graph Example

First Input Delay (FID) Explanation
Image Credit: Google

The chart above shows grey boxes and gold boxes. Grey boxes are network requests, these usually take up the most of your loading time. Gold boxes are ‘main thread’ tasks; code, script and visual elements that load on your website.

Where ‘FID’ is shown on the graph, this indicates when the first responsive element has started loading, and the time it takes to fully load.

There are several interactive elements on a website; the navigation menu, the cookies pop-up, a contact form – FID measures the time it takes for the first interactive element to fully load.

Large files and long network requests cause delays to the loading of your website. Your website may have rendered several items on the page, but is still waiting to load the interactive elements.

You are also going to see FCP in the PageSpeed Insights report, this is ‘First Contentful Paint’, this works together with the FID.

The First Contentful Paint (FPC) measures the time it takes for your website to start loading interactive elements.

Whereas First Input Delay (FID) looks at how long it takes until the first interactive element has loaded.

There are several elements that load on your website, and a delay with any can cause a bad user experience. Google are only considering the first input delay because this is the first impression of your website, and that most of the issues loading interactive elements on a website occur when the page is loading.

How to improve your FID performance

Here are the main items of code that can improve how fast your website is responsive, and improve your FID performance;

  • Minify CSS
  • Remove unused CSS
  • Minify JavaScript
  • Remove unused JavaScript

Cumulative Layout Shift (CLS)

Cumulative Layout Shift Core Web Vitals

‘CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.’

A layout shift is when an element on the viewport loads in one position, and then moves to another. This can be caused by other elements loading at different times.

The benchmark for the Cumulative Layout Shift is fractional, and takes into account the space the element has moved (impact fraction), and multiplies it by the total space the element has created (distance fraction).

Google give the example of a block of text loading on a website.

Impact Fraction Layout Shift - Core Web Vitals

Image credit: Google

The first mobile view shows the text loading at the top of the viewport, and then it moves down the page.

The text element is approximately 50% of the viewport. It is now calculated that the text element has moved down 25%. Meaning that the element now takes up 75% of the viewport. Giving an impact fraction of 0.75.

Distance Fraction Shift Layout - Core Web VitalsImage credit: Google

The distance fraction is calculated by measuring the space the element has physically moved. The space created above the text is 25%. Giving a distance fraction of 0.25.

To get the Cumulative Shift Layout score, multiple the impact fraction by the distance fraction.

The CLS score for this example is 0.1875 – which is within Google’s benchmark.

It is important to note that CLS only measures unexpected layout shifts. Google define layout shifts into 2 categories, User-initiated layout shifts, and Animation and transitions.

Layout shifts

An expected layout shift is when a layout changes due to activity on the site from the User, or elements that load when the website or page is first visited.

The difference between layout shifts is from the User. If a layout changes on your website that the User is not expecting, this is classed as un-expected. Take for example a button appearing in place of another button, that you accidentally click on, you wouldn’t expect that.

Whereas if a layout shift is expected, this will not affect your CLS score – as long as it is not a big shift.

Expected layout shifts

If we look at my Resources menu, this contains an expected layout shift. The 4 posts you see will automatically update, and do take a moment to load when you hover over the menu.

An example of an expected layout shift

I have image optimisation and minified java script, which allows this section of posts to load very quickly.

If for example, you hovered over the first post, ‘How to improve your website’s Core Web Vitals’ – and just as you click, it changes to a new post and pushes the other posts to the right – this is un-expected and would impact my CLS score.

Un-expected layout shifts

Un-expected layout shifts occur when elements on the page load in different orders. Google show the example of 2 blocks of text loading first, then a button loading between the blocks of text.

This pushes the 2nd block of text down, and is classed an un-expected layout shift.

Example of an un-expected layout shiftImage credit: Google

To avoid any un-expected layout shifts, you need to ensure that all the elements on your website load in order of appearance – or at least load together. But this is not as simple as moving the button in the example.

How to improve your CLS performance

From the data that Google have provided, it does point towards the fact the your LCP and FID attribute to your CLS score.

To improve your CLS performance, I would look to improve your LCP and FID performance.

  • Preload key requests
  • Eliminate render-blocking resources
  • Defer offscreen images
  • Serve images in next-gen formats
  • Efficiently encode images
  • Avoid multiple page redirects
  • Minify CSS
  • Remove unused CSS
  • Minify JavaScript
  • Remove unused JavaScript

From my research, it seems that the above list directly impact your Core Web Vitals. Below is a further list of several audits from PageSpeed Insights, which could or could not impact your score.

  • Properly size images
  • Enable text compression
  • Preconnect to required origins
  • Initial server response time was short
  • Avoid multiple page redirects
  • Preload key requests
  • Use video formats for animated content
  • Avoids enormous network payloads
  • Avoids an excessive DOM
  • User Timing marks and measures
  • JavaScript execution
  • Minimise main-thread work
  • All text remains visible during webfont loads
  • Minimise third-party usage
  • Avoids document.write()

I hope that this guide has given you an insight into Google’s Core Web Vitals. If you need help to optimise your website, contact me directly, I am happy to assist.

Measure Core Web Vitals

There are several tools that you can use to see more details about your Core Web Vitals;

Field Tools

Lab Tools

Google Resources

FAQs

Yes you can. When using PageSpeed Insights, it will tell you if your website has passed the Core Web Vitals performance tests, or not.
No. PageSpeed Insights will only analyse the page you enter. You can analyse multiple pages, but not all your pages at once.
Google use a colour coded system.

Red is for Poor 0 – 49. Orange / Yellow is for Needs Improvement 50 – 89. Green is for Good 90 – 100.


See more resources and updates on phil-isherwood.co.uk

Found this guide useful? Share it with your friends and colleagues ⬇

You May Also Like