Blurred background image

A Deep Dive into Core Web Vitals

A Deep Dive into Core Web Vitals

We’ve covered what Core Web Vitals are. It’s now time to dig deeper and examine each of the three metrics to build out more of a 3D understanding.

So let’s go!

Largest Contentful Paint (LCP)

A Deep Dive into Core Web VitalsLargest Contentful Paint measures how long it takes from the page beginning to load to the largest text block or image loads on the screen. Essentially, the lower the LCP the better its performance.

Having a quick LCP sends a message to the user that this page not only works but is efficient.

As a page loads, the text and images may jump around the screen before it fully loads. Among these, the final piece of content to stop moving is the candidate for the Largest Contentful Paint.

FYI: the SVG elements don’t actually make the cut when considering the candidates for Largest Contentful Paint. So if you’re looking to squeeze your LCP time, if you’re working with SVG elements, note that this isn’t going to change your LCP.

What’s my LCP score?

Poor: 4 seconds or more

Okay: between 2.5 and 4 seconds

Good: 2.5 seconds or less

What’s making my LCP perform poorly?

There are a host of reasons that may explain why your LCP score is poor. Take for example, a slow server response time, or having a heavy largest content resource, or render-blocking JavaScript and CSS. 

How can I improve my LCP score?

Because there are many reasons for a poor LCP performance there are many possible remedies, too. You can optimize your critical rendering path, images, and CSS. Remove any unused CSS or instead move it on a separate page. And ask yourself: do you really need to use this specific image? Is it critical to get your message across?

First Input Delay (FID)

First Input Delay measures the time from when a user first interacts with a page (for example when they click a link or press a key) to when the browser can respond to that demand. It is measured in milliseconds.

It highlights the first impression that a user has of your page’s responsiveness. And like all impressions, the first one better be good.

FYI: there are user interactions that are not counted as actions, such as zooming or scrolling. That’s because by their nature they are continuous actions and are held within other performance constraints.

Of course, the lower the FID the better the performance. 

What’s my FID score?

Poor: 300 milliseconds or more

Okay: between 100 and 300 seconds

Good: 100 milliseconds or less

What’s making my FID perform poorly?

There is one common reason (although of course not the only one) for a poor FID performance: a browser’s main thread is too busy parsing and executing JavaScript code. And when it’s busy, it’s unable to respond to an interaction from a user.

How can I improve my FID score?

In order to boost the performance of FID, focus on what is holding back your browser from going interactive. Examples of this include reducing the impact that third-party code has; cut back on the execution time of JavaScript; and shorten the work done in the main thread.

A Deep Dive into Core Web Vitals

Cumulative layout shift measures the aggregated (cumulative) score of all the unexpected shifts in layout. It provides insight into a page’s visual stability because it demonstrates the user experience of a user.

A Deep Dive into Core Web VitalsUnlike the other two metrics, CLS isn’t measured in seconds – or milliseconds – but rather it relates to the movement between 2 frames. These are called unstable elements. So the score of CLS measures the movement of frames.

In fact, CLS consists of 2 components: the distance fraction and the impact fraction. The former measures the greatest distance that the unstable element moves, and is divided by the largest dimension; and the impact fraction measures the area of the viewport that the unstable element takes up in both frames.

What’s my CLS score?

Poor: more than 0.25

Okay: between 0.1 and 0.25 

Good: less than 0.1

What’s making my CLS perform poorly?

The reason why your page is experiencing a poor score is due to unexpected shifts of ads or images on the page with undefined dimensions. It can also be from resources that are loaded out of synch. Or it can be due to moments when new DOM elements are added to a page, but added above existing content that is already loaded. This is why content that has already been loaded is being pushed away.

How can I improve my CLS score?

There are ways that you can eliminate layout shifts. These include adding size attributes for videos and images. Not putting content above other content that’s already loaded.

FYI: testing properly for any unexpected layout shifts can actually be quite difficult. That’s because some functionality can be disabled or work not as expected there. Examples of this include cookie notifications, which may not be shown, or that the live chat support may be disabled, or personalized content may not load.

Related Ideas

If you got value from this article, you may enjoy these other articles, as well. We’re always adding value!

What is This 'Core Web Vitals' Thing Everyone is Talking About?
  • ArganoUV
  • Core Web Vitals

What is This 'Core Web Vitals' Thing Everyone is Talking About?

Affecting every single Google page performance is the new Core Web Vitals. But what are they...
How to Improve Your Core Web Vitals
  • ArganoUV
  • Core Web Vitals

How to Improve Your Core Web Vitals

What are some ways in which you can improve your website’s Core Web Vitals?
This Week in eCommerce Data: January 8th, 2021
  • ArganoUV
  • Commerce
  • This Week in eCommerce Data

This Week in eCommerce Data: January 8th, 2021

This week’s ecommerce round up focuses on overall growth of ecommerce and omnichannel in 2020, plus...

Latest ideas

Our latest thinking about SF Commerce Cloud.

Sprinting to Stellar eCommerce: Brooks Running & Salesforce Commerce Cloud
  • ArganoUV
  • Commerce
  • Salesforce Commerce Cloud

Sprinting to Stellar eCommerce: Brooks Running & Salesforce Commerce Cloud

Brooks Running sprints into a higher ecommerce gear with Salesforce Commerce Cloud.
From 2 Weeks to 30 Minutes: Xoom and its Content Creation
  • ArganoUV
  • Commerce
  • Contentful

From 2 Weeks to 30 Minutes: Xoom and its Content Creation

From 2 weeks to 30 minutes, Xoom can now create content in quick time.
This Week in eCommerce Data: June 11th, 2021
  • ArganoUV
  • Commerce
  • This Week in eCommerce Data

This Week in eCommerce Data: June 11th, 2021

This week’s ecommerce round up focuses on North American ecommerce growth, quarterly takings, and livestream ecommerce, plus more. ...

How can we achieve
awesomeness together?