What are they?

Googles’ web vitals are at the core of their mission to improve user experience. It is just one aspect that drives Googles mission for increased relevant search results for the user and a better experience.

Google Core Web Vitals

Three Main User Experience Elements

Google breaks the user experience ratings into three main categories: Largest Contentful Paint (LCP), which measures loading performance; First Input Delay (FID), which measures interactivity; and Cumulative Layout Shift (CLS), which measures visual stability. For a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading, FID should be less than 100 milliseconds, and CLS should be less than 0.1. This of course is in an ideal world.

FID – First Input Delay

The First Input Delay (FID) measures the interactivity of a page. It is the time between when a user first interacts with a page, such as tapping on a button or clicking on a link, and when the browser begins to process event handlers in response to that interaction. To ensure an optimal user experience, pages should have low FID values and be able to respond quickly.

The FID metric, which quantifies the experience users feel when attempting to interact with unresponsive pages, will be replaced by a more stable Core Web Vital metric for measuring page load responsiveness. The Interaction to Next Paint (INP) will become the new Core Web Vital in March 2024.

CLS – Cumulative Layout Shift

Cumulative Layout Shift (CLS) is a metric that measures the extent to which a webpage experiences unexpected shifts in layout during its above the fold loading time. It quantifies instances where elements on a page move or shift unexpectedly, causing disruption to the user experience. An example of this would be when a visitor loads a page and, while reading it, suddenly encounters a banner that causes the entire page to jump down abruptly. In such cases, the CLS score would be high, indicating poor user experience. The worst cases for this can result in customers on eCommerce stores actually pressing a buy now button rather than a cancel order button. It is often due to the slow loading of elements not being completed.

It is beneficial to achieve a score above the 75th percentile for Google Core Web Vitals. This is evidenced by the "Good" label in each of the LCP, FID and CLS thresholds. A score above this benchmark indicates successful performance across mobile and desktop devices. CLS is easy to resolve by prioritising the loading of different elements of content.

Largest Contentful Paint (LCP) – Arguably The Most Important

Largest Contentful Paint is a metric used to measure the time it takes for a website to display the most significant content on the screen, fully loaded and ready for user interaction. According to Google, this metric focuses solely on the content that is visible without scrolling, also known as "above the fold".

So how does Google measure LCP, and why is so important?

According to the specifications outlined in the Largest Contentful Paint API, the following types of elements are considered for the Largest Contentful Paint:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements with a poster image (the load time of the poster image is used)
• Elements with a background image loaded via the [url()]
• Block – Level elements that contain text nodes or other inline-level text element

Two new elements for LCP as of August this year 2023 are:

• The first frame painted for autoplaying <video> elements (NEW – August ‘23)
• The first frame of an animated image format, such as animated GIFs (NEW – August ‘23)

Improving LCP

First of all none of these three elements of Google Web Vitals are quick fixes. I would be amazed if just one element you fixed had a drastic change on your Google Web Vitals score. All SEO, while trying to justify what they do for clients will know this.

LCP can be measured using various tools, but it's important to note that not all of these tools measure LCP in the same way. While lab-based tools like Lighthouse or local testing can provide valuable insights and help improve LCP, they may not fully represent what real users are experiencing. To truly understand the LCP of real users, we should focus on their actual experiences.

To gather LCP data from real users, you can utilize Real User Monitoring (RUM) tools installed on your site or access the Chrome User Experience Report (CrUX). The CrUX collects anonymous data from millions of real Chrome users across different websites, providing valuable information about LCP based on real user experiences.

Images

Images play a crucial role in website loading speed. They are often the largest elements on a page, which can lead to delays if not optimized properly. That's why it's important to pay attention to image optimization.

While there are other factors that contribute to Largest Contentful Paint (LCP), images can have a significant impact on it. To ensure optimal performance, it's essential to compress and resize image files appropriately. Formats like WebP, JPEG, and PNG are recommended for their efficiency. I would always recommend WebP format and ideally get the images from a CDN, such as CloudFlare.

By optimizing images and improving LCP, you can enhance the overall user experience of your website. Make sure to regularly monitor your site's performance and implement optimizations when necessary. Fast-loading sites are less likely to provide a poor user experience as the code has been cleaned for errors and does not load unnecessary content or code.

Optimization tips for images:

• Compress image files
• Resize images appropriately – to the size of the view port, smaller for mobile
• Use efficient formats like WebP, JPEG, and PNG

Remember: Fast sites lead to better user experiences! Keep monitoring and optimizing your site's performance for improved Core Web Vitals..

Lighthouse

Lighthouse compares your site against various measurements to give you an overall score.

A significant portion of the fluctuations in your overall Performance score and metric values is not caused by Lighthouse. These variations usually occur due to changes in underlying conditions. Some common factors that can affect your Performance score include:

• Conducting A/B tests or making changes to the ads being served
• Modifications in internet traffic routing
• Testing on different devices, such as a high-performance desktop and a low-performance laptop
• The presence of browser extensions that inject JavaScript and add/modify network requests
• The impact of antivirus software

Moreover, while Lighthouse provides a single overall Performance score, it may be more beneficial to consider your site performance as a distribution of scores rather than just one number.