Web Vitals — LCP, FID, CLS, INP

1. Introduction

Core Web Vitals are a set of metrics defined by Google to measure the user experience of web pages. They focus on three key aspects of performance: Loading speed, Interactivity, and Visual stability.

2. Why It Matters

Web vitals directly impact search engine optimization (SEO) ranking and user retention. Slow pages have higher bounce rates. Optimizing these metrics ensures that pages render quickly, respond immediately to user clicks, and prevent layout shifts.

3. Real-World Analogy

Think of visiting a New Restaurant:

• Largest Contentful Paint (LCP - Service delay): The time it takes for your main meal to arrive at the table. If you wait more than 40 minutes, you get annoyed.
• First Input Delay (FID - Ordering speed): The time it takes for the waiter to walk over and write down your order after you raise your hand.
• Cumulative Layout Shift (CLS - Shifting table): As you eat, the waiter suddenly swaps your plate or table position, causing you to spill food. You want visual stability.
• Interaction to Next Paint (INP - Interaction feedback): When you ask the waiter for water (interaction), the time it takes for them to nod or acknowledge your request.

4. Core Web Vitals Metrics

Let's examine the four primary Web Vitals metrics:

1. Largest Contentful Paint (LCP):

Measures loading performance. It tracks the time it takes to render the largest visible element in the viewport (such as a hero image or heading block).
• Good: < 2.5 seconds.

2. First Input Delay (FID):

Measures responsiveness. It tracks the time between when a user first interacts with the page (e.g. clicks a button) and when the browser begins processing the event handler.
• Good: < 100 milliseconds.

3. Cumulative Layout Shift (CLS):

Measures visual stability. It calculates the score of unexpected layout shifts that occur during the page life cycle.
• Good: < 0.1.

4. Interaction to Next Paint (INP):

Replaced FID in March 2024. Measures page-wide interactivity responsiveness. It tracks the delay of all user interactions on the page, recording the longest delay before visual feedback is rendered.
• Good: < 200 milliseconds.

5. Practical Example

This script demonstrates using the browser's native PerformanceObserver API to collect and log Core Web Vitals metrics locally:

6. Common Mistakes

• Rendering images without width and height attributes: Forgetting dimensions forces the browser to recalculate layouts when images download, shifting surrounding content down and ruining your CLS score. Always define width and height or reserve layout space using CSS aspect-ratio properties.

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

const btn = document.getElementById('sort-btn');
btn.addEventListener('click', () => {
  // Bug: running expensive operations synchronously inside event handler!
  sortThousandsOfRecordsSynchronously(); 
  // UI remains frozen for 400ms during sort, delaying render!
});

btn.addEventListener('click', () => {
  // Yield to main thread to allow browser to render click feedback
  setTimeout(() => {
    sortThousandsOfRecordsSynchronously();
  }, 0);
});

10. Interview Questions

11. Production Considerations

• • Web Vitals Library: In production environments, use Google's official web-vitals library to track Core Web Vitals from real users (Real User Monitoring) and send metrics to your analytics backend.