Demystifying Google’s Core Web Vitals: Cumulative Layout Shift

Read Time: 3 Minutes 21 Seconds

In the final instalment of our SEO: Demystifying Google’s Core Web Vitals series – where we dissect each of the core web vital metrics in an easy and practical manner to prepare you for what lies ahead – we’ll be discussing Cumulative Layout Shift (CLS), the measurement of visual stability.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is the third and final metric that makes up the new Google Core Web Vitals metrics. CLS measures the extent at which elements move around on the page whilst it’s loading and is most likely the area where we are seeing the majority of websites perform poorly. Google explains CLS as  “the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.” 

What this means is that CLS is a measurement of every visible element on the screen that moves from its original position whilst the page is loading. Google says that sites should aim to have a CLS of less than 0.1  and, to ensure you’re hitting this target, they recommend a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Why is CLS  Important

CLS is important as it helps to quantify how often users experience elements of the page jumping around – a page that has unexpected elemental shifts will provide a poor user experience. It is however important to remember that not all layout shifts are bad, with Google stating it’s only an issue when the shift is unexpected – such as when a page link button unexpectedly shifts resulting in the user performing an undesired outcome. 

Here is an example, provided by Google of an unexpected layout shift on their WebDev site:

How do you measure CLS

CLS can be measured both in the lab, or in the field, using the same set of tools used to measure LCP (see our previous article Demystifying Google’s Core Web Vitals: First Input Delay). It’s important to note that, when measuring your CLS using lab tools, pages will load in a synthetic environment meaning values could be less than what users are experiencing in the real world.  We recommend using a combination of lab and field data to understand how your site is performing.

When calculating CLS, there are two key metrics to be aware of – Impact Fraction and Distance Fraction:

  • Impact fraction is the measure of how unstable elements impact the visible area of the screen (viewport) between two frames.
  • Distance fraction is the measure of the distance that unstable elements have moved, relative to the viewport. The Distance fraction is the largest distance any element has moved in a horizontal or vertical direction.

How to Improve CLS

There are common causes behind unexpected layout shift and following some simple guidelines can see some drastic improvements in your CLS score:

  • Size attributes
    • Ensure you always include size attributes on images and videos as a best practice.
    • Alternatively you can use CSS to style any container elements to the same size or aspect ratio before the content is loaded.
  • Advertising
    • Ads are one of the biggest offenders to layout shift issues and can significantly impact the user experience by pushing content down the page with Publishers and networks often using dynamic ad sizes.
    • One solution is to remove the advertising completely from your site, however, if this isn’t an option you can pre-allocate space for the ad using CSS to style the element for the dynamic ad contents load. Much in the same way you would for images and videos.
  • New Content
    • Keep unexpected layout shifts to a minimum by never inserting content (e.g. ads, forms, pop-ups etc.) above existing content unless it’s in response to a user initiated action.

Want to learn more? Explore the series; Demystifying Google’s Core Web Vitals. Or for more information on what the algorithm update will look like, have a read of our previous article Google’s New Search Criteria to familiarize yourself with Page Experience Signals, and what the update will mean for the marketing industry.

This blog was originally published on Incubeta.

Demystifying Google’s Core Web Vitals: First Input Delay (FID)

Read Time: 3 Minutes 10 Seconds

In the second instalment of our SEO: Demystifying Google’s Core Web Vitals series – where we dissect each of the core web vital metrics in an easy and practical manner to prepare you for what lies ahead – we’ll be discussing First Input Delay (FID), the measurement of time between an interaction and a response.

What is First Input Delay (FID)?

First Input Delay (FID) is the second metric of the three Core Web Vitals being introduced by Google. Each of the three metrics focus on different elements of user experience, with FID being the metric used by Google to measure the interactivity of a page. 

“The lights are on but nobody’s home”

Google explains FID as the measurement of time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction. To put it simply, FID is the delay between when you interact (ie. click or tap) with something like a link or a button, and the time that the browser responds to your action and starts processing it. 

Why is First Input Delay Important for SEO?

It’s important because Google has decided to incorporate it into its algorithm from May, so a poor FID could cause a negative impact to your website as you appear lower down on the search engine results page. 

FID is a measure of how quickly a user can engage with your site and Google wants to make sure that, along with returning the most relevant search results, it’s returning the sites that offer users the best experience as well. FID provides a user-centric metric for measuring load responsiveness – quantifying the experience users feel when trying to interact with unresponsive pages.

How do you measure First Input Delay?

FID is measured in milliseconds and, to receive the highest perceived responsiveness of the page, you want to keep this as low as possible, 

Google classes a good FID scoring as under 100 milliseconds, with a score between 100 and 300 milliseconds requiring improvement. If your FID exceeds 300 milliseconds then this is considered to be poor, and your page experience score, and credibility is jeopardised. If you’re seeing a significant number of your pages fall into this category then you can expect that visitors to your site are receiving a very poor experience.

It’s worth noting that FID measurement can only be calculated using field data and can’t be derived from lab data. This is because it requires visitors to interact with your site and can’t be modelled, much like the other metrics can.

How to Improve your FID

The most common cause of a poor FID is usually down to Javascript, and render blocking resources. Removing 3rd party code, keeping the number of request counts low and reducing JavaScript execution time will all help improve FID.

You can do this by:

  • Breaking up long tasks
  • Merging and minifying
  • Deferring unused JavaScript
  • Using web workers.

There’s also a strong relationship between the time it takes from First Contentful Paint (FCP) to Time to Interactive (TTI), and First Input Delay.

The time between FCP & TTI is the time that it takes the browser to render the page fully. During that time, if a user makes an interaction with a web page, there will most likely be a delay due to network requests blocking the main thread. Advertisers should consider focusing on refining their page rendering if the time between first contentful paint and time to interactive is over a second or so.

Want to learn more? Explore the previous article in the series Demystifying Google’s Core Web Vitals – Largest Contentful Paint (LCP). Or more information on what the algorithm update will look like, have a read of our previous article Google’s New Search Criteria to familiarize yourself with Page Experience Signals, and what the update will mean for the marketing industry.

This blog was originally posted on Incubeta.

Demystifying Google’s Core Web Vitals – Largest Contentful Paint (LCP)

Read Time: 4 Minutes 8 Seconds

As we draw closer to May, and the launch date of Google’s Page Experience algorithm update we’re thrilled to introduce our latest series ‘SEO: Demystifying Google’s Core Web Vitals’. In this three part series we’ll be dissecting each of the core web vital metrics in an easy and practical manner to unpack the technical jargon, and prepare you for what lies ahead. This week we’ll be discussing Largest Contentful Paint (LCP) – the measurement of loading performance.

Despite Google shrouding the exact launch date in mystery, the new Page Experience algorithm update should eventually roll into action across the search engine in May. First introduced in spring last year, Google’s update is forcing brands to take Page Experience seriously and ensure they offer users a good mobile experience. Ultimately, Google wants a faster and better web, and will be introducing Core Web Vitals into the search algorithm to achieve this – much in the same way that they rolled out the mobile-friendly update last year. 

What is Largest Contentful Paint (LCP)?

LCP is the one of three Core Web Vitals metrics that Google introduced last year, alongside First Input Delay (FID) and Cumulative Layout Shift (CLS). Core Web Vitals signals are aimed at helping brands measure the “experience” of interacting with a website, helping to improve areas that may be frustrating the user – specifically, the loading of the site (speed), interactivity (can the site be used) and the visual stability (do things jump around and move). 

LCP is the speed element of the three metrics and Google defines it as ‘the render time of the largest image or text block visible within the viewport (screen)’.

What this means simply, is how quick does the page load the content. LCP is the measure of how long it takes for the main content of the page to be fully downloaded, and ready to be used. It’s important to note that this doesn’t mean the site is fully loaded, LCP measurement finishes when the largest content element becomes visible to the user.

There are a number of elements that can qualify as the LCP; such as images, video or a block of text. LCP only includes viewable elements, and anything below the fold or outside of the viewable area doesn’t impact the LCP score.

Why is LCP Important for SEO?

Google’s decision to include Core Web Vitals as part of its algorithm from May means that, if your site suffers from a poor LCP score, you’ll likely see a negative impact on your Google search ranking performance as a result. Especially if your competitors are improving their scores prior to the update.

There are a number of other metrics that exist that can be used to measure page speed, and in the past Google has recommended these – First Meaningful Paint (FMP) and Speed Index (SI). These can however be fairly complex and difficult to measure, whereas LCP is a user centric measurement specifically designed by Google. Additionally, the older metrics used to measure page speeds aren’t good indicators of a user centric experience – not necessarily corresponding to what the user was seeing on screen – whereas a fast LCP will reassure the user that the page is useful.

With LCP, Google is going for a simpler approach and, based on their research in conjunction with W3C Performance Working Group, they’ve determined that a more accurate method of measuring when the main content of a page is loaded is to identify when the largest element was rendered.

How do you measure LCP

Largest Contentful Paint has a simple scoring criteria of Good, Needs Improvement, and Poor. Anything under 2.5 seconds is good, while anything over 4 seconds is poor.

There are two ways in which LCP can be measured:

  1. In the lab using tools to simulate a page load in a consistent way
  2. In the field using real users loading and interacting with the page 

There are a number of different tools that you can use to measure LCP both in the Lab and in the Field and Google recommends using a combination of both data types when optimising LCP.

The Field tools you can use are:

  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • Chrome User Experience Report (Requires a Google account and a Google Cloud Project)
  • web-vitals JavaScript library

The Lab tools you can use are:

  • Chrome DevTools
  • Lighthouse
  • WebPageTest

How to Improve your LCP

Improving the LCP of your site can be a complex task as the LCP element will likely differ between pages and by device. However there are some common causes of a poor LCP:

  1. Slow server
  2. Resource load times
  3. Client-side rendering
  4. Render-blocking JavaScript and CSS

Google recommends before anything else improving a slow server response time. This one factor will impact every single page-load metric, as a faster server means the browser will receive the content more quickly from the server.

For more information on what the algorithm update will look like, have a read of our previous article Google’s New Search Criteria to familiarize yourself with Page Experience Signals, and what the update will mean for the marketing industry. 

This blog was originally published on Incubeta.