What Are Core Web Vitals & What Makes Them Vital?

• Largest Contentful Paint (LCP)

LCP is a metric that tells us how quickly the biggest image or text block on a webpage appears when you first visit‌ it. It helps us understand how fast or slow the main content shows up for users.

To provide a good user experience, your website should have a 2.5 sec or less LCP score.

• First Input Delay (FID)

FID, or First Input Delay, tracks the time from when a user first does something on a page, like clicking a link, tapping a button, or using a custom JavaScript-powered control, to when the browser can actually start doing something about it, like processing event handlers in response to that action.

As of March 2024, FID is going to be replaced by Interaction to the Next Paint (INP) which was introduced in 2022 & has been a pending Core Web Vital since then. However, it has shown enough value to replace FID as a stable metric.

INP calculates the latency of interaction by the user, which means how long a user takes to perform any action on the webpage. In simpler terms, it checks a webpage’s responsiveness towards a user.

A good FID is considered 100 ms or less, & a good INP is 200 ms or below.

• Cumulative Layout Shift (CLS)

CLS, or Cumulative Layout Shift, measures the largest abrupt change in layout scores for each unforeseen layout shift that takes place during a page’s entire existence. A layout shift happens whenever a visible element changes its position from one displayed frame to the next.

A good CLS score should be ‌0.1 or less.

• Largest Contentful Paint

As mentioned earlier, LCP is the metric that shows how quickly your webpage loads its important elements. A webpage loads in stages, so with each stage, the biggest (largest) elements change, too.

To keep track of this, the browser sends out a message called a PerformanceEntry with the type “largest-contentful-paint.” This tells us about the largest thing on the page as soon as the first part of the page is visible. But, if the page keeps loading and the biggest thing changes, the browser sends another message with the updated info.

We only call something the Largest Contentful Element once it is visible to the user. For example, even if the smallest element on the webpage is visible to the user in the first roll & is reported via PerformanceEntry, it becomes the Largest Contentful Element for that roll until another bigger element is rendered via PerformanceEntry.

This process only goes on until the user interacts with the webpage because when a user takes an action on the webpage, it will change the visible elements. To keep things simple, it is recommended to report the most recent entry to the analytics service.

An example of how a webpage loads in stages

What Affects LCP?

Elements that affect LCP include:

• Pictures with <img> tag.
• Images inside an <svg> element with <image> tag.
• <video> Videos with a preview image (the time it takes for this image to load is counted).
• Elements with a background image using the URL () function (not CSS).
• Blocks that have text or other smaller text things inside them.
• The very first frame is shown when a video starts playing automatically (since August 2023).
• The opening frame of animated pictures like GIFs (since August 2023).

How to Improve the LCP Score?

To provide ‌a good user experience a website should achieve a 2.5s or less for at least 75% of the website visits. LCP can be broken down into 4 subparts:

Time To First Byte	The time from when the user starts loading a page to when the browser gets the first piece (byte) of information, which is the HTML document response.
Resource Load Delay	The time difference between TTFB and when the browser begins loading the Largest Contentful Paint (LCP) resource.
Resource Load Time	The time taken to load the resource.
Element Redener Delay	The time ‌taken from resource load till it’s rendered (It’s visible)

Each of these elements is responsible for delivering an optimum LCP & here is how you can improve them.

• Reduce TTFB

One common reason for a slow Time To First Byte (TTFB) on a typically speedy website is when visitors have to go through multiple redirects before reaching the actual URL.

This situation often occurs with visitors coming from ads or through URL shorteners. It’s advisable to keep the number of redirects to a minimum to enhance the visitor’s experience.

• Eliminate Resource Delay

This suggests that you should work on minimizing the time being taken by the resources to load after TTFB. While in theory, this is possible, in real life, there is always some delay.

You can improve by changing some settings on how a resource is placed & how it is prioritized.

• Eliminate Element Render Delay

The goal is here for the element to render immediately after it finishes loading. The main reasons why an element is not being rendered or it is being blocked from rendering can be as follows:

1. The whole page has been rendered but they are stuck because of stylesheets in <head> which have not loaded.
2. The largest element on the page (LCP resource) is loading, but it has not been added to the page yet. It’s waiting for some JavaScript code to finish loading.
3. Something else on the page, like an A/B testing tool, is hiding the main thing you’re supposed to see. It’s figuring out which version of the page you should be in.
4. The main data of the webpage is stuck because other tasks are being completed, and they need to finish those before it can finish showing you the page.

• Reduce Resource Load Time

When a resource takes much time to travel from the network to the user side, it can cause a delay in loading. This can be tackled in the following ways:

1. Reduce ‌resource size
2. Reduce the travel time ‌taken by the resource
3. Reduce the amount of data being transferred to improve ‌network bandwidth
4. Eliminate ‌network travel time entirely

In simpler terms, to improve LCP

• Cut out unnecessary third-party scripts, which can seriously slow down your page speed.
• Consider upgrading your web host for faster load times, including the Largest Contentful Paint (LCP).
• Turn on lazy loading for images, so they only load when they’re about to be seen (like when someone scrolls down). This can make your LCP much quicker.
• Get rid of large elements on your page that might be slowing down your LCP. Tools like PageSpeed Insights can help identify these.
• Shrink down your CSS (Cascading Style Sheets) to minimize delays in LCP times caused by bulky styles.

• First Input Delay

A website that loads at good speed but takes forever to respond, is not going to please the user. First Input Delay is the metric that helps you measure just that.

FID goes beyond a basic page speed score and considers the time it takes for users to perform actions on your page.

For pages filled with content, such as blogs or articles, FID usually isn’t a major concern since the interaction often involves simple scrolling. However, when a page demands user input, especially on interactive pages like a login page or one requiring birthdate input for age-restricted access, FID becomes a significant factor.

The first interaction is considered the first user input required once the browser loads the webpage. FID is the time that is measured from a user input to a response received by the user in the main thread.

Extended delays in the first input usually happen after the First Contentful Paint (FCP) and before the Time to Interactive (TTI). This is because some content has appeared on the page, but it isn’t fully responsive yet.

How to Improve FID?

• Break Up Long Tasks

Any code that blocks the main thread for more than 50ms is considered a long task. Longer tasks take time to be executed & make the page unresponsive for that particular time.

When you break up longer tasks into sections of smaller tasks, the main thread doesn’t stay blocked for long which ultimately makes your page responsive enough for users to take an interest.

• Optimize Your Page for Interactions

1. Reduce ‌resource size
2. Reduce the travel time ‌taken by the resource
3. Reduce the amount of data being transferred to improve ‌network bandwidth
4. Eliminate the network travel time entirely
5. First Party execution takes a longer time which delays the interactions. To avoid this, you can move a more logical script on the server side & let content roll as it is to free the main thread
6. Many third-party tags & analytics can keep the network busy, so try to explore on-demand third-party execution.
7. Decrease the data that needs to be post-processed on the client side.

• Reduce Javascript Execution Time

Reducing the volume of JavaScript on your page cuts down the time the browser spends running JavaScript code. This accelerates the browser’s responsiveness to user interactions.

To minimize the JavaScript executed on your page you can

1. Defer unused JavaScript.
2. Reduce unused polyfills.

• Make Use of Web Worker

Input delays often occur due to a main thread being blocked, using a web worker can help reduce this. Web workers allow running JavaScript on a background thread.

By shifting non-UI operations to a separate worker thread, you can reduce main thread blocking time and enhance the First Input Delay (FID).

You can consider using the following libraries to utilize web workers on your site.

1. Comlink: A helper library that abstracts postMessage and makes it easier to use
2. Workway: A general-purpose web worker exporter
3. Workerize: Move a module into a web worker

As we know, as of March 2024, INP is going to replace FID as a stable vital. Before we discuss INP in detail, let’s see how it differs from FID.

How INP Differs From FID?

FID only considers the First Interaction Delay, which means it doesn’t count any delay that happens in running the event or any delays after that. While INP Measures all page interactions.

This means, that FID suggests that if your first input delay is minimal then your website has made a good impression. However, INP is more than just the first impressions, hence it focuses more on the overall user experience  than just the initial interactions.

Why INP is Important?

Effective responsiveness implies that a page quickly reacts to user interactions. When a page acknowledges an interaction, it generates visual feedback, which the browser displays in the subsequent frame.

Visual feedback serves to confirm actions like adding an item to a shopping cart, opening a mobile navigation menu, authenticating login form contents with the server, and similar activities.

INP is useful to ensure that the user is getting the required response in the shortest time for all the interactions made on the website.

The following visual shows how an interaction travels on the thread:

For INP, only the following are considered as interactions:

1. Clicking with a mouse.
2. Tapping on a device with a touchscreen.
3. Pressing a key on either a physical or onscreen keyboard.

How to Improve INP?

Improving your site’s Interaction with Next Paint (INP) is a continuous process. When you come across a slow interaction in the network, it’s possible that, especially for a highly interactive website, you’ll encounter additional slow interactions that require optimization.

The key to improving INP is practice. Over time, you can elevate your page’s responsiveness to a level that satisfies user expectations. As you introduce new features for your users, you’ll need to go through a similar optimization process for their specific interactions. While it demands time and effort, it is a worthwhile investment.

• Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) assesses the visual stability of a page during loading. Visual stability means that visible and interactive page elements remain relatively stable. A high CLS occurs when text, buttons, or images shift around during page loading, indicating a less desirable condition.

Ideally, you should aim for page elements to maintain their positions as the page loads. The primary concern with excessive shifting is the potential for user misinteraction.

For instance, a user might attempt to click a link or input information in a field, but if the elements shift unexpectedly, it can lead to a mis-click, resulting in a negative user experience.

Layout shifts are characterized by the Layout Instability API, which logs layout-shift entries whenever a visible element within the viewport alters its start position, like its top and left position in the default writing mode, between two frames. These elements are classified as unstable elements.

It’s important to note that layout shifts exclusively happen when existing elements modify their start position. The addition of a new element to the DOM (Document Object Model) or a change in the size of an existing element doesn’t qualify as a layout shift, as long as the alteration doesn’t make other visible elements to change their start position.

What Causes a Poor CLS & How to Improve It?

According to Google, there are five main reasons why Cumulative Layout Shift happens:

• Images With Unspecified Dimensions

For any layout always specify <width> and <height> size attributes for your images and video elements. Alternatively, designate the necessary space using CSS <aspect-ratio> or a similar technique. This ensures that the browser can properly allocate the correct amount of space in the document while the image is loading.

Images without specified sizes

Images with specified width & height

• Ads, Embeds, and iframes Without Specification & Late-loading Content

Ads significantly contribute to layout shifts on the web. Ad networks and publishers frequently endorse dynamic ad sizes, aiming to boost performance and revenue by increasing click rates and enhancing competition in auctions. Unfortunately, this can result in a less-than-optimal user experience as ads may push down the visible content on the page.

Embedded widgets enable the inclusion of portable web content, such as YouTube videos, Google Maps, and social media posts. However, these widgets often lack advanced awareness of the size of their content.

For instance, a social media post may contain an embedded image, video, multiple text rows, or other unpredictable elements. Consequently, platforms providing embeds might not always reserve space for their widgets, causing layout shifts upon loading.

The strategies to address these issues are quite similar, with the main differences lying in the level of control over the inserted content. If the content is inserted by a third party, like an ad partner, you might lack precise information about the content size and have limited control over potential layout shifts within those embeds.

If ads are being served by third-party tools, you may not have any control over them. However, the following are some tips to deal with this:

1. Reserve space for late-loading content
2. Avoid placing late-loading content in the top fold
3. Avoid interesting new content without user interaction

• Animations

Adjustments to CSS property values may necessitate the browser to respond with various processes like re-layout, paint, and composite. Certain values, such as those related to <box-shadow> and <box-sizing>, can prompt these reactions. It’s advisable to steer clear of animating these particular properties.

Alternatively, there are more efficient ways to modify certain CSS properties. For instance, using <transform> animations allows for translations, scaling, rotation, or skewing without triggering a re-layout, completely sidestepping layout shifts.

• Web Fonts Causing FOIT/FOUT (Flash of Invisible Text/Flash of Unstyled Text)

Downloading and rendering web fonts is typically handled in one of two ways before the web font is downloaded:

1. The fallback font is swapped with the web font (FOUT—Flash Of Unstyled Text)
2. “Invisible” text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—Flash Of Invisible Text)

It is important to understand that both of these can cause layout shifts. Even though the text is invisible, it is laid out using the fallback font. This means the text block using the font, and the surrounding content, shifts when the web font loads—in the same way as for the visible font for FOUT.