Core Web Vitals Intro
Understanding LCP, INP, and CLS¶
Core Web Vitals are a set of metrics introduced by Google to measure user experience on the web. They focus on three key aspects of performance: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These metrics provide a standardized way to evaluate how quickly a page loads, how responsive it is to user interactions, and how stable its layout is during load.
LCP: Largest Contentful Paint¶
Definition: LCP measures the time it takes for the largest content element in the viewport to be rendered. This is typically a large image, video, or block of text.
What It Measures:
- Load Speed: LCP reflects how quickly the main content becomes visible. A faster LCP improves perceived performance.
- User Experience: A slow LCP can make users think the page is unresponsive or broken.
Why It Matters:
- LCP is a critical indicator of perceived load speed. Google recommends an LCP of 2.5 seconds or faster for good performance.
- Slow LCP often indicates issues like large images, unoptimized assets, or inefficient server responses.
Example:
A blog post with a hero image that takes 3 seconds to load will have an LCP of 3 seconds.
Command: Audit LCP using Lighthouse:
Diagram:
A timeline showing the load process, with the LCP element being painted at the end.
INP: Interaction to Next Paint¶
Definition: INP measures the time between a user’s interaction (e.g., a click or tap) and the browser’s response, specifically the time until the next paint occurs after the interaction.
What It Measures:
- Responsiveness: INP captures how quickly the browser can respond to user input.
- User Engagement: A slow INP can lead to frustration and higher bounce rates.
Why It Matters:
- INP replaces the older First Input Delay (FID) metric. Google recommends an INP of 100 milliseconds or faster for good performance.
- Poor IN,P often stems from long-running JavaScript tasks or blocked rendering.
Example:
If a user clicks a button, and the browser takes 200ms to render the next frame, the INP is 200ms.
Command: Analyze INP in Chrome DevTools:
1. Open DevTools → Performance tab.
2. Record a load, then click an element.
3. Inspect the "First Input Delay" and "Interaction to Next Paint" metrics.
Diagram:
A timeline showing user interaction, JavaScript execution, and the next paint event.
CLS: Cumulative Layout Shift¶
Definition: CLS measures the total distance the layout shifts during page load. It quantifies unexpected movements of elements, which can disrupt user experience.
What It Measures:
- Layout Stability: CLS tracks how much content moves around as the page loads.
- Predictability: Unexpected shifts (e.g., ads loading after content) can confuse users.
Why It Matters:
- Google recommends a CLS of 0.1 or lower for good performance.
- High CLS often results from dynamically injected content, missing layout-shift attributes, or poor image sizing.
Example:
If a banner ad shifts content down by 100px during load, the CLS increases by 100px.
Command: Check CLS with Lighthouse:
Diagram:
A visual representation of layout shifts during page load, with arrows indicating movement.
Key takeaways¶
- LCP ensures the main content loads quickly, reducing perceived load time.
- INP guarantees the page responds promptly to user interactions, improving engagement.
- CLS prevents layout shifts, ensuring a stable and predictable user experience.
- All three metrics are critical for achieving a high Core Web Vitals score and improving user satisfaction.