Core Web Vitals: Everything you need to know

Here at Flixmedia we provide a broad range of services in order for your rich content to be syndicated to our global retailer network. However, it is important to understand how your product pages are performing. Core Web Vitals are a set of standardised metrics from Google to help you understand how users experience a web page. The metrics break down a user’s real-world experience on a web page to measure loading experience (LCP), interactivity (FID) and visual stability (CLS). Each metric targets a threshold to help developers qualitatively understand whether the experience of the website is good, needs improvement or is poor. In this article, we’ll go through each Core Web Vital metric, what each means, and how they are all impacted.

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint is a metric that measures page speed. It tells you how long it takes for the main content of a webpage to load. This metric also refers to the content above the fold rather than the entire page, such as the following:

• Images

• Video poster images

• Background images

• Text elements

Why is LCP important?

LCP is integral to user experience. LCP measures the perceived load speed of a website and marks the time at which the main content of a page is fully loaded; a delay in this can result in a website being slow and users searching elsewhere.

LCP is also important for Search Engine Optimisation (SEO). Google considers the LCP as part of the Core Web Vitals and is a vital parameter which feeds the search algorithm. Since LCP is directly related to page load time it also affects user experience, which means that Google will use this metric when calculating a website ranking.

What is a good LCP score?

A good LCP score to aim for is 2.5 seconds or less. Web developers recommend hitting this target for most users, across both mobile and desktop devices:

What is First Contentful Paint (FCP)?  

First Contentful Paint is a metric that measures the time from when a page starts loading to when any part of that page’s content is rendered on the screen. For this metric ‘content’ refers to text, images (including background images), SVG (scalable vector graphics) elements, and non-white canvas elements.

In the above image, FCP occurs in the second frame (4.0s) as this is when the first text and image elements are rendered to the screen. You’ll notice that though some of the content has been rendered, not all of it has been. This is an important distinction to make between FCP and LCP, the latter of which aims to measure when a page’s main contents have finished loading.

Why is FCP important?  

FCP is one of the six metrics used in Google’s Lighthouse performance report, along with the following:

1. Time to Interactive

2. Speed Index

3. Total Blocking Time

4. Largest Contentful Paint

5. Cumulative Layout Shift

Each metric covers an aspect of page load speed and is an important factor for website performance. A slow page load speed can cause a user to leave a page before converting.

What is a good FCP score?

Google puts FCP times in three categories: good, needs improvement, or poor. A good user experience has a score of 1.8 seconds or less. To ensure you’re hitting this target, a good threshold to measure is the 75th percentile of page loads that are segmented across mobile and desktop devices.

What is a response time?

Response time refers to the amount of time it takes for a server to respond to a client’s request. Measured in milliseconds, the timer starts from the moment a client sends out a request and stops when the server sends back its first response.

Response time is sometimes defined as Time to First Byte (TTFB), which is the amount of elapsed time from the point of a client request until the first packet of data is sent back to that client. Response time does not include the amount of time it takes for a client’s device to render or process any of the received data.

Response time is the sum of five parts:

1. DNS lookup time

2. Authentication and connection time

3. Redirect time

4. Time to first byte

5. Time to last byte

Why does response time matter?

Webpage response time is an important metric to track and monitor as it provides insight into server performance. If your server’s response time is high, it may indicate that your server is overloaded and having difficulties in processing requests.

Google considers the response time to have a ranking factor for both mobile and desktop searches. When your website or application continually generates long response times, search engines will rank it lower on the Search Engine Results Page (SERP). This has the potential to harm your website’s traffic and growth.

High website response times also create an unpleasant user experience (UX). Web developers have known for a long time that if your page takes too long to load, users are likely to leave your site, which can have an adverse effect on your business.

Response time vs page load time

Response time refers to the speed at which a server can respond to a request while page load time is the time it takes for a page to load completely. Page load time is generally impacted by the server response time for every request a webpage has, as the server will have to respond with a message. A slow response time will increase the page load time, while a fast response will decrease it.

It’s worth noting that both these metrics can tell you a lot about the performance of your pages and should be measured and monitored constantly.

What is a good response time?

According to Google, the average response time should be under 200 milliseconds as this gives the impression of an instant response.

A web response time ranging between 200 milliseconds and 1 second is considered acceptable as users are unlikely to notice the delay. For better user satisfaction, you should optimise it for better performance.

Any response time over 1 second is problematic and needs to be fixed. The higher the response time, the higher the chance of users leaving your website or application.

What is First Input Delay (FID)?

First Input Delay (FID) is a metric that calculates the time it takes for a browser to respond to the first client request. It’s measured in milliseconds.

To be more explicit, FID is the time between when the content is painted (FCP) and when the site in question is ready to execute and process the event handlers. This delay can vary from site to site depending on how much JavaScript needs to be downloaded and executed, the size of the images, the custom fonts, etc. The higher the FID, the more frustrating it is for a user.

Why is FID important?

If left unchecked, FID can have dire consequences for the performance of your websites. It can cause uncomfortable long wait times for your users that will undoubtedly lead to a bad user experience, lost users, and ultimately lost revenue.

FID is also important when it comes to Search Engine Optimisation (SEO). As part of Google’s Core Web Vitals, FID is a core metric that directly feeds into the ranking algorithm used to display sites in the search results. Having a bad FID will not only frustrate your users but also prevent new users from finding your websites via search engines.

What is a good FID score?

A good FID time would be below 100 milliseconds, while the average FID is between 100 to 300 milliseconds, and a bad FID is anything over 300 milliseconds. The difference between 100 and 300 milliseconds may seem unnoticeable. However, these add up fast on a modern website and can result in a negative experience for your users.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a metric that calculates the shifting of elements while a page is being downloaded and rendered. The more common occurrences are on images, buttons and other interactive elements (it can easily be spotted on text as well).

Why is CLS important?

CLS causes a bad experience overall for your users and should therefore be minimised as much as possible. In addition, there’s the matter of SEO. Since Google and most other search engines have qualified CLS as a Core Web Vital metric that directly feeds into the algorithm and displays search results, this metric will also influence how well you perform within search pages.

What is a good CLS score?

A good CLS score is anything below 0.1 while anything above 0.25 is considered poor.

What causes Cumulative Layout Shift?

Google asserts that there are five main causes of a poor CLS score:

1. Images move around once the JavaScript and CSS are loaded, which will most likely cause the images to get resized

2. Ads and embeds that don’t have dimensions specified in the Document Object Model (DOM)

3. Content created dynamically

4. Fonts that get loaded after a page has been created

5. Third parties that need to wait for network responses in order to update the DOM

It is important to understand what Google’s Core Web Vital metrics mean in order to understand how your product pages are performing. With Flixmedia’s broad range of services your branded content is syndicated across our global network of retailers. Boost your conversions by getting started with your content syndication journey today!