Core Web Vitals

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

The metrics that make up Core Web Vitals :

• Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have an FID of 100 milliseconds or less.
• Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

What is LCP?

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. What is a good LCP score? To provide a good user experience, sites should strive to have the Largest Contentful Paint of 2.5 seconds or less.

What elements are considered?

As currently specified in the Largest Contentful Paint API, the types of elements considered for Largest Contentful Paint are:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements with a poster image (the poster image load time is used)
• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children

What is CLS?

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. (See below for details on how individual layout shift scores are calculated.)

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1 second in between each shift and a maximum of 5 seconds for the total window duration.

What is FID?

FID measures the time from when a user first interacts with a page (that is, when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

What is a good FID score?

To provide a good user experience, sites should strive to have a First Input Delay of 100 milliseconds or less.

The above visualization shows a page that’s making a couple of network requests for resources (most likely CSS and JS files), and — after those resources are finished downloading — they’re processed on the main thread.

FID only measures the “delay” in event processing. It does not measure the event processing time itself nor the time it takes the browser to update the UI after running event handlers.

#CoreWebVitals #WebVitals #UserExperience #PageSpeed #WebPerformance #LargestContentfulPaint #FirstInputDelay #CumulativeLayoutShift #FrontEndDevelopment

Thank You for Reading!

If you found this post informative and valuable, I’d love for you to connect with me for more front-end development insights. Follow me here on Medium , Codepen, and connect with me on LinkedIn to stay updated on the latest in web development, design, and more.

Let’s connect!

?? ???????????????? — https://www.dhirubhai.net/in/dimple-kumari/

?? ???????????? — https://medium.com/@dimplekumari0228

?? ?????????????? — https://codepen.io/DIMPLE2802