Core Web Vitals Flashcards
What are the metrics that make up Core Web Vitals?
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- First Contentful Paint (FCP)
- Cumulative Layout Shift (CLS)
What are the browser rendering steps?
- Connect to website server
- Download HTML
- Begin rendering page - “Painting”
- Download CSS, JS, images and fonts
- Execute JS, apply CSS
- Construct the DOM
- Execute remaining JS
- Page completes rendering
What does LCP stand for?
Largest Contentful Paint
What is Largest Contentful Paint?
Measures loading performance. For a Good UX, it should occur within 2.5 seconds of when the page first starts loading.
How do you go about improving Largest Contentful Paint?
1) Critical CSS and Asynchronous Asset Loading
2) Optimizing images
3) Reducing server response time
What is First Input Delay (FID)?
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.
What is Cumulative Layout Shift (CLS)?
Measures visual stability. A good user experi