00:00:00 So what are the core parts of Web Vitals?

00:00:02 You may have come across terms like FCP, LCP, or CLS.

00:00:07 The core Web Vitals.

00:00:09 Three aspects of user experience.

00:00:11 Loading, interactivity, and visual stability.

00:00:15 Let's understand them one by one.

00:00:17 Largest Contentful Paint, or LCP, measures the loading performance of the website.

00:00:23 It's calculated by measuring the time it'll take to render the largest image or text block visible within the page, relative to when the page first started loading.

00:00:33 So what is a good LCP score?

00:00:36 For good user experience, websites should aim for a largest contentful paint time of 2.5 seconds or less.

00:00:43 And if I take you back to the course platform website, as you can see, the score is great.

00:00:49 Looks pretty good to me.

00:00:51 Next up are First Contentful Paint and First Input Delay.

00:00:55 We all know how important it is to make a good first impression.

00:00:59 And first impressions are crucial almost everywhere.

00:01:03 When meeting new people, appearing for a job interview, and even when building websites.

00:01:08 If your site is attractive with great UI and UX and is smooth, your interviewees will be interested in knowing more about you,

00:01:18 won't they?

00:01:19 On the other hand, for product companies, a good first impression of their website can make the difference between someone becoming a loyal user or leaving

00:01:28 them and never coming back.

00:01:30 The question now is, what makes a good first impression?

00:01:33 And how do you measure what kind of impression you're likely making on your users?

00:01:38 The FCP, or First Contentful Paint, measures the time it takes for the first piece of content to become visible in a user's web browser.

00:01:47 This content can be text, images, or any other element that's part of a page's content.

00:01:52 Whereas the FID, or the first input delay, is how responsive or interactive the site is when the user tries to interact with those pixels.

00:02:02 FID measures the time it takes for a webpage to respond to the first user interaction, such as clicking a button or a link.

00:02:11 So what are good FCP and FID scores?

00:02:14 For a good user experience, websites should aim for a first contentful paint of 1.8 seconds or less and a first input delay of 100 milliseconds or less.

00:02:26 Yes, you read that right.

00:02:27 The FID has to be less than 100 milliseconds.

00:02:31 The content shouldn't block users.

00:02:33 Otherwise, they might feel the website isn't working.

00:02:37 And the final performance metric is cumulative layout shift or CLS.

00:02:42 Have you ever been on a website like a news website?

00:02:45 And while you're reading, suddenly something on the page changes.

00:02:49 Or worse, you were just about to click a link and right before you touch it, bam, the link moves and you accidentally click on something else like an ad

00:02:59 or an annoying pop-up.

00:03:01 the sudden page changes occur when elements load or shift behind the scenes.

00:03:06 It might be due to images or videos of unknown sizes, fonts behaving unexpectedly, or third-party ads and widgets resizing.

00:03:16 So, yes, that's basically what CLS is.

00:03:19 It measures how much the content on a webpage unexpectedly jumps or shifts around while you're using it.

00:03:25 So what is a good CLS score?

00:03:27 Well, for a good user experience, a website should aim for a cumulative layout shift time of 0.1 or less.

00:03:34 Have you visited the BBC News website?

00:03:37 If you check the performance of their site, even though they have great FLP, their CLS is awful.

00:03:43 So, if I take you back to the performance of CLP of the JS Mastery Pro website, it's a nice and round zero, meaning the best.