Your Essential Guide to Core Web Vitals: Defining, Measuring and Optimising

27 July 2021

There are multiple ways in which Google can rank your webpage but core web vitals are Google’s latest scoring metrics introduced in May 2021. Core web vitals are characterised by three crucial factors — largest contentful paint, first input delay and cumulative layout shift. These properties are measured by Google to gauge how effective your page experience is and, subsequently, your page’s user experience (UX).

These are all factors that heavily attribute to your site’s SEO so a satisfactory core web vitals score should always be the aim if you are looking to boost your organic Google ranking as well as UX. This guide will take you through the three key vitals you must satisfy, what comprises them and how to measure their score yourself.

 

Measuring your core web vitals

Before we dive into the first of the three core web vitals, it’s worth mentioning that they can all be measured using the same tools; whilst there are many tools, there are two simple ones that are actually owned by Google.

  • PageSpeed Insights: Simply enter your URL and it will display your results as well as other useful page experience metrics.
  • Google Search Console: Navigate to Experience > Core web vitals in the sidebar and the metrics will be displayed.

 

Largest contentful paint (LCP)

Considered to be quite a significant core web vital, LCP actually sounds quite niche when you explain it. Largest contentful paint is the factor that measures how fast the largest content element on your page loads; this is defined by Google as what a user will first see without scrolling, the element above the fold. For example, say your homepage features a large banner with a video graphic at the top of your page, and that is the most taxing UX element above the fold — LCP measures how fast that particular banner loads.

Whilst the visual aesthetic of the banner is associated with UI, how fast it loads and is interactable with falls under UX and, that’s what LCP ensures — that the presentation of the page is adequate for the user. If the aforementioned banner takes too long to completely load, then the user will not be able to enjoy the full experience of the website and will most likely leave.

Largest contentful paint tests should be conducted whenever a page is updated to ensure the score is adequate as this does not only affect the user’s experience but also how Google will rank the page; the ideal speed for LCP is 2.5 seconds or under, anything above will need improvement. Your LCP speed can be enhanced by:

  • Removing unnecessary third-party scripts;
  • Implementing lazy loading below the fold; and
  • Optimising your image sizes (always use the correct/suggested sizing, anything larger will slow your loading time).

 

First input delay (FID)

First input delay is the time elapsed between the user’s first interaction (this can be a click or scroll) and the page’s ability to process that interaction. Basically, FID encompasses any element or action that involves the first user interaction before it has completely finished loading. This is important as FID does not actually measure how fast your page takes to become completely interactive (that is measured by the time to interactive metric) — but how fast the first interaction is processed by your site.

For example, you could navigate to a local plumber’s home page and as soon as the first elements appear, before the entire page has actually loaded, you might click on their service page from the menu. How long it takes between the site registering that first click and loading the rest of the page is the first input delay — the home page should be loading completely before moving onto the service page in the above example.

You should be trying to optimise your webpage so that its FID measures at 100 milliseconds or less. Anything longer and you might want to consider remedies such as:

  • Browser caching;
  • Optimising your first-party JavaScript or CSS; and
  • Implementing idle until urgent code strategy.

 

Cumulative layout shift (CLS)

The final core web vital is cumulative layout shift and this is measured by how stable your page is as it loads; elements that are jumping around during the loading phase are signs of a high CLS metric — the higher the CLS metric, the worse your score is. When you create a website, you want everything to be in the same spot every time the web page is loaded.

Not only is this expected by most people, but it can also confuse users if elements are constantly changing position. Looking at Google’s measurements, any CLS score coming in at 0.1 or below is considered good. If your page is registering above 0.1, then you will need to optimise it to improve it, as well as the overall page experience score. Some improvement options include:

  • Adding additional UI elements below the fold;
  • Ensuring that if your website runs ads that they have their own assigned space; and
  • Attributing the correct dimensions to all media/graphic elements. Alternatively, you may also reserve the space using CSS aspect ratio boxes (or similar elements) whilst the media/graphics load.

 

Melbourne’s own digital agency

AWD Digital is a full-service holistic digital agency capable of providing complete custom web design, construction and implementation in addition to a series of digital marketing services to propel your website to the top of Google’s search results. Operating in Melbourne, our team of passionate and skilled specialists will ensure that your custom website is completely optimised to surpass the ideal core web vitals criteria.

If you would like to know more about our services or are interested in booking a free 30-minute introductory workshop, then please contact us on 03 9001 6255 or by filling out our online enquiry form.