Learn about three pillars of Web experience : LCP, FID & CLS6 min read

In online business, Time play a vital role in both SEO and Sales. Changing your site load time from 3 second to 2 second make lot of difference. For this you must learn about LCP, FID & CLS.

Three Pillars of Web experience

  • Largest Contentful Paint – LCP
  • First Input Delay – FID
  • Content Layout Shift – CLS

Largest Contentful PaintLCP

Largest Contentful Paint measures the point at which the largest content element appears on the screen. It doesn’t measure the time it takes for your page to fully load, but it simply looks at when the most important part loads.

lcp - largest contentful paint

The LCP is also dynamic, as the first thing that loads might not immediately be that large image. The LCP shifts to that large image when that appears on screen.

lcp load order
This image from Google gives you a good idea of how the LCP is measured

On the left, you first see the logo and ‘Visual stories’ line appear. In the second screen, the large headline appears as a candidate for LCP. In the last screen, however, you see that big image overtakes the header as LCP. If you have just one big piece of content, that might be the LCP the whole time.

First Input Delay – FID

The First Input Delay measure the time it takes for the browser to respond to the first interaction by the user. The faster the browser reacts, the more responsive the page will appear.

first input delay

The FID measures all interaction that happen during the loading of the page. These are input actions like taps, clicks and keypresses, but not interactions like zooming and scrolling. Google’s new metrics call for an FID of less than 100ms to appear responsive. Anything between 100ms and 300ms needs improvement and you can view anything above that as performing poorly.

Content Layout Shift – CLS

The third Core Web Vital is a brand-new one: Content Layout Shift. This metric tries to determine how ‘stable’ stuff loads onto your screen. It looks at how often stuff jumps around while loading and by how much. You can imagine that sometimes a button loads on the screen, inviting users to click it. In the background, however, there’s still a large content area being loaded. The result? When the content finally fully loads, the button pushes down a bit — just as you want to hit that button.

These layout shifts happen a lot with ads. Now, ads are a lifeline for many sites, but these are often loaded so poorly that they frustrate users. In addition, many complex sites have so much going on that these are heavy to load and content gets loaded whenever it’s ready. This can also result in content or CTAs that jumps around on screen, making room for slower loading content.

content layout shift
cumulative layout shift

The Cumulative Layout Shift compares frames to determine the movement of elements. It takes all the points at which layout shifts happen and calculates the severity of those movements. Google considers anything below 0.1 good, while anything from 0.1 to 0.25 needs work. You can consider everything above 0.25 as poor.

LCP, FID and CLS are the important things in your Business website, If you want big profit.

Recommended Tools

Read More: What is Web Beacon/Bug ?