A Complete Guide to Core Web Vitals: Understanding and Optimizing Performance Metrics

What It Measures:

CLS quantifies unexpected layout shifts during the page's lifecycle. These shifts happen when content moves around while the page is still loading (e.g., images loading late or ads resizing).

How It's Calculated:

CLS = Impact Fraction × Distance Fraction

• Impact Fraction: Percentage of the viewport affected by the unstable element.
• Distance Fraction: Distance the element moved as a fraction of the viewport.

What Impacts CLS:

• Images or videos without fixed dimensions.
• Ads, embeds, or iframes resizing dynamically.
• Font loading causing text shifts.
• Dynamically injected content above existing content.

How to Improve CLS:

• Always specify width and height attributes for images and videos.
• Use placeholders (e.g., skeleton loaders) for dynamic content.
• Preload important web fonts.
• Avoid inserting content above existing elements unless necessary.

What It Measures:

LCP tracks how long it takes for the largest visible content (image, video, or text block) to fully render on the viewport.

How It's Calculated:

The browser determines the largest content element visible in the viewport and measures when it's fully loaded. It's tracked up until the user's interaction or the page load event.

What Impacts LCP:

• Slow server response times.
• Render-blocking resources (e.g., CSS, JavaScript).
• Unoptimized images and videos.
• Large CSS or font files delaying content rendering.

How to Improve LCP:

• Optimize server performance with CDNs and caching.
• Compress images using modern formats like WebP or AVIF.
• Minify and defer non-critical CSS and JavaScript.
• Preload key resources (e.g., hero images, fonts).

What It Measures:

FID measures the time delay between a user's first interaction (e.g., click or tap) and the browser's ability to process that event. It reflects how interactive your website feels.

How It's Calculated:

The time difference between the user's input and the browser processing the event. This is tracked during the first meaningful interaction after the page starts loading.

What Impacts FID:

• Long JavaScript execution times (main thread blocking).
• Heavy third-party scripts.
• Large JavaScript bundles.
• Slow event listeners.

How to Improve FID:

• Break up large JavaScript bundles into smaller chunks.
• Use code splitting and lazy loading.
• Optimize critical JavaScript to run asynchronously.
• Minimize the impact of third-party scripts.

What It Measures:

TTFB measures the time it takes from when the user's browser makes a request to the server to when it receives the first byte of data. It's a server-related metric.

How It's Calculated:

TTFB = (Redirect Time) + (Connection Time) + (Backend Response Time)

What Impacts TTFB:

• Slow server response times.
• Inefficient backend processing.
• Network latency between the client and server.
• Lack of caching.

How to Improve TTFB:

• Use a Content Delivery Network (CDN) to reduce latency.
• Optimize backend processes (database queries, API responses).
• Cache frequently accessed data at the edge.
• Reduce server-side rendering overhead.

What It Measures:

INP captures the latency of all interactions a user has with the page (e.g., clicks, taps, keypresses) and summarizes them into a single metric. It's a comprehensive metric for interaction responsiveness.

Tracking the time from a user's click/tap/keypress to the browser showing the next visual update (paint).

How It's Calculated:

INP = Maximum latency of user interactions during the page lifecycle.

If there are many interactions, it uses the longest interaction delay to represent responsiveness.

What Impacts INP:

• Main thread being blocked by heavy tasks.
• Large JavaScript tasks causing delays.
• Non-optimized event handlers.

How to Improve INP:

• Break up long tasks into smaller chunks.
• Use web workers to handle background tasks off the main thread.
• Ensure event handlers are optimized for minimal latency.
• Use frameworks with efficient rendering (e.g., React, Vue) and reduce unnecessary re-renders.

1. First Contentful Paint (FCP)

• Definition: Measures the time from when the page starts loading to when any content (text, image, canvas) is rendered on the screen.
• What it indicates: The first point at which the user sees something on the screen. It is an early indicator of the loading experience.
• Focus: Focuses on "first visible feedback" to users.
• Example: If a website loads a logo or some text before anything else, the time it takes for that element to appear is the FCP.

2. Largest Contentful Paint (LCP)

• Definition: Measures the time from when the page starts loading to when the largest visible content element (such as a hero image, a heading, or a block of text) is rendered on the screen.
• What it indicates: Marks the most meaningful point of content visibility, indicating when the main content of the page is fully visible to the user.
• Focus: Focuses on "main content loading".
• Example: If a website has a large banner or hero image, the time it takes to render that element is the LCP.