Core Web Vitals

Question 1

What are the metrics that make up Core Web Vitals?

Answer 1

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. First Contentful Paint (FCP)
4. Cumulative Layout Shift (CLS)

Question 2

What are the browser rendering steps?

Answer 2

1. Connect to website server
2. Download HTML
3. Begin rendering page - “Painting”
4. Download CSS, JS, images and fonts
5. Execute JS, apply CSS
6. Construct the DOM
7. Execute remaining JS
8. Page completes rendering

Question 3

What does LCP stand for?

Answer 3

Largest Contentful Paint

Question 4

What is Largest Contentful Paint?

Answer 4

Measures loading performance. For a Good UX, it should occur within 2.5 seconds of when the page first starts loading.

Question 5

How do you go about improving Largest Contentful Paint?

Answer 5

1) Critical CSS and Asynchronous Asset Loading
2) Optimizing images
3) Reducing server response time

Question 6

What is First Input Delay(FID)?

Answer 6

Measures interactivity. A good user experience will have an FID of less than 100 milliseconds. This will be replaced by Interaction to Next Paint in March 2024.

Question 7

What is Cumulative Layout Shift (CLS)?