Core Web Vitals: What They Are & How to Improve Your Site’s Performance

Core Web Vitals are a set of key performance metrics defined by Google to measure a website's speed, interactivity, and visual stability. These metrics play a crucial role in providing a good user experience and are essential for SEO rankings.

Tools to Measure Website Performance
Several tools are available to analyze and improve website performance:

1. Google PageSpeed Insights
2. Lighthouse (Chrome DevTools)
3. Web Vitals Chrome Extension
4. Google Search Console
5. Core Web Vitals Metrics

1. Largest Contentful Paint (LCP) — Measures Loading Performance

LCP measures the time taken to load and render the largest visible content element (e.g., an image, video, or text block) within the viewport. It is a key indicator of how quickly users perceive a page to load.

Ideal LCP: Less than 2.5 seconds.

How to Optimize LCP

1. Optimize Images

• Use next-generation image formats such as WebP and AVIF instead of JPEG/PNG.
• Lazy-load non-critical images using the loading="lazy" attribute.

<img src="image.webp" alt="Lazy Loaded Image" loading="lazy" width="600" height="400">

• Do not lazy-load above-the-fold images to ensure faster rendering.
• Use responsive images (srcset) to serve different sizes for different screen resolutions.

<img 
  src="image.jpg" 
  srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="Responsive image">

• Enable efficient caching by setting a long cache expiration for static images.

2. Reduce Render-Blocking Resources

• Minimize CSS and JavaScript blocking by:
  Deferring non-critical JavaScript (defer or async).
  Use defer for scripts that modify the DOM (main.js, app.js).
  Use async for scripts that are independent (analytics.js, ads.js).

• Removing unused CSS using tools like PurgeCSS.

• Using Critical CSS for above-the-fold content.

3. Optimize Fonts

• Preload important fonts for faster rendering.

 <link rel="preload" href="fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• Use font-display: swap; to avoid render delays.

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

• Self-host fonts instead of relying on external services to reduce dependency on third-party networks.

4. Optimize JavaScript Execution

• Minimize long-running scripts by breaking them into smaller tasks.
• Avoid excessive DOM manipulations.
• Defer third-party scripts such as analytics, ads, and social media embeds.

5. Prioritize Above-the-Fold Content

• Ensure that the LCP element loads first without being delayed by other resources.
• Avoid dependency on slow third-party scripts for LCP elements.

2. Interaction to Next Paint (INP) — Measures Interactivity

INP (previously FID - First Input Delay) measures the time between a user's first interaction (e.g., clicking a button or link) and the browser's response. It assesses a website's interactivity and responsiveness.

Ideal INP: Less than 200ms.

How to Optimize INP

1. Reduce JavaScript Execution Time

• Minimize long tasks by breaking them into smaller chunks.
• Defer non-essential JavaScript (defer or async).
• Use Web Workers for background tasks to prevent main-thread blocking.

2. Optimize Third-Party Scripts

• Limit the use of third-party scripts such as ads, social media widgets, and analytics.
• Load third-party scripts asynchronously.

<script async src="https://www.example.com/"></script>

3. Reduce Main Thread Work

• Minimize reflows and repaints by optimizing CSS and layout.
• Use requestIdleCallback() to schedule non-critical tasks.
• Use efficient JavaScript frameworks, such as React with Concurrent Mode.
• Use Web Workers for Heavy Computation **Js file**

const worker = new Worker('worker.js');
worker.postMessage({ data: "Heavy Task" });

worker.onmessage = function (event) {
  console.log("Processed result:", event.data);
};

**worker.js**

self.onmessage = function (event) {
  const result = heavyComputation(event.data);
  self.postMessage(result);
};

function heavyComputation(data) {
  // Simulate heavy calculations
  return data + " processed";
}

4. Optimize Event Listeners

• Avoid heavy computations in input event handlers (keydown, click, etc.). Use passive event listeners for scroll and touch events:

document.addEventListener('scroll', handler, { passive: true });

• Use debounce to optimize the event listeners

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// Example usage: Optimizing an input field event
const searchInput = document.getElementById("search");
searchInput.addEventListener(
  "input",
  debounce((event) => {
    console.log("Search:", event.target.value);
  }, 300)
);

5. Improve Web Performance Techniques

• Utilize a Content Delivery Network (CDN) for faster content delivery.
• Enable Gzip/Brotli compression to reduce page size.
• Reduce DOM size to prevent excessive processing.
• Minimize the css and js file using gulp/webpack

3. Cumulative Layout Shift (CLS) — Measures Visual Stability

CLS measures unexpected shifts in visible content while a page is loading. It impacts the user experience by ensuring that elements remain visually stable.

Ideal CLS: Less than 0.1.

How to Optimize CLS

1. Set Explicit Width & Height for Images & Videos

• Always define width and height attributes in <img> and <video> tags to prevent layout shifts.
• Use aspect-ratio in CSS to reserve space before images load.

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

2. Reserve Space for Ads, Embeds, and Iframes

• Use min-height in CSS to allocate space for ads and iframes.
• Avoid dynamically inserting ads that push content down.

.ad-slot {
  min-height: 250px; /* Reserve space */
  background: #f0f0f0;
}

3. Avoid Dynamically Injected Content Above Existing Content

• Avoid banners or pop-ups that push content down.
• Use position: fixed or position: absolute for pop-ups to prevent layout shifts.

4. Optimize Fonts to Prevent FOUT/FOIT

• Use font-display: swap; in CSS to prevent text shifts.
• Preload fonts for faster rendering.

<link rel="preload" href="fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

5. Use Stable Animations & Transitions

• Avoid animations that cause layout shifts.
• Use transform: translate() instead of modifying layout properties (width, height, margin).

.animated-element {
  transform: translateY(10px);
  transition: transform 0.3s ease-in-out;
}

Conclusion
Optimizing Core Web Vitals is essential for providing a seamless and engaging user experience. By following these best practices, you can improve your site's performance, enhance user satisfaction, and boost your search engine rankings.