DEV Community

Cover image for How to Improve Core Web Vitals
Pixel Mosaic
Pixel Mosaic

Posted on

How to Improve Core Web Vitals

#webdev #programming #ai #javascript

If you care about SEO, user experience, and conversions, you must optimize Core Web Vitals.

Core Web Vitals are Google’s real-world performance metrics that measure how fast and stable your website feels to users.

They include:

  • Largest Contentful Paint (LCP) – Loading performance
  • Interaction to Next Paint (INP) – Responsiveness
  • Cumulative Layout Shift (CLS) – Visual stability

You can measure them using:

  • Google PageSpeed Insights
  • Google Lighthouse
  • Google Search Console

Let’s break down how to improve each one — with practical developer examples.

1. Improve Largest Contentful Paint (LCP)

Target: Under 2.5 seconds

LCP is usually:

  • Hero image
  • Large heading
  • Background banner

1.1 Optimize Images

Bad: 

<img src="hero.jpg">
Enter fullscreen mode Exit fullscreen mode

Good: 

<img 
  src="hero.webp" 
  width="1200" 
  height="600" 
  loading="eager" 
  fetchpriority="high" 
  alt="Hero Banner">
Enter fullscreen mode Exit fullscreen mode

Why?

  • Use WebP or AVIF
  • Set explicit width & height
  • Use fetchpriority="high" for hero image

1.2 Preload Critical Resources 

<link rel="preload" as="image" href="/hero.webp">
<link rel="preload" 
      as="font" 
      href="/fonts/inter.woff2" 
      type="font/woff2" 
      crossorigin>
Enter fullscreen mode Exit fullscreen mode

1.3 Reduce Render-Blocking CSS & JS

Bad: 

<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

Good: 

<script src="app.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Or for non-critical scripts:

<script src="analytics.js" async></script>
Enter fullscreen mode Exit fullscreen mode

2. Improve Interaction to Next Paint (INP)

Target: Under 200ms

INP measures how quickly your page responds to user interaction.

2.1 Break Long JavaScript Tasks

Bad: 

button.addEventListener("click", () => {
  heavyFunction(); // blocks main thread
});
Enter fullscreen mode Exit fullscreen mode

Better: 

button.addEventListener("click", () => {
  setTimeout(() => {
    heavyFunction();
  }, 0);
});
Enter fullscreen mode Exit fullscreen mode

Even Better (Modern API): 

button.addEventListener("click", async () => {
  await scheduler.postTask(() => heavyFunction());
});
Enter fullscreen mode Exit fullscreen mode

2.2 Use Code Splitting (Webpack Example) 

import("./checkout.js").then(module => {
  module.initCheckout();
});
Enter fullscreen mode Exit fullscreen mode

2.3 Reduce Third-Party Scripts

Audit scripts in:

  • Google Tag Manager
  • Analytics tools
  • Chat widgets

Load them after user interaction whenever possible.

3. Improve Cumulative Layout Shift (CLS)

Target: Under 0.1

CLS happens when content jumps while loading.

3.1 Always Set Image Dimensions 

<img src="product.webp" width="400" height="400" alt="Product">
Enter fullscreen mode Exit fullscreen mode

OR use CSS aspect ratio:

.image-wrapper {
  aspect-ratio: 1 / 1;
}
Enter fullscreen mode Exit fullscreen mode

3.2 Reserve Space for Ads & Embeds 

<div class="ad-slot"></div>
Enter fullscreen mode Exit fullscreen mode 
.ad-slot {
  width: 300px;
  height: 250px;
}
Enter fullscreen mode Exit fullscreen mode

3.3 Avoid Injecting Content Above Existing Content

Avoid: 

document.body.prepend(notification);
Enter fullscreen mode Exit fullscreen mode

Instead: 

document.querySelector("#notification-slot")
        .append(notification);
Enter fullscreen mode Exit fullscreen mode

Bonus: Monitor Core Web Vitals in Production

Use the Performance API:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.value);
  }
}).observe({ type: "largest-contentful-paint", buffered: true });
Enter fullscreen mode Exit fullscreen mode

For production monitoring, consider:

  • web-vitals
  • Real User Monitoring (RUM)

Advanced Optimization Tips

Use a CDN

  • Cloudflare
  • Fastly

Enable HTTP/2 or HTTP/3

Use Server-Side Rendering (SSR)

Enable Brotli compression

Use Early Hints (103 status)

Ideal Core Web Vitals Scores

Metric Good Needs Improvement Poor
LCP < 2.5s 2.5–4s > 4s
INP < 200ms 200–500ms > 500ms
CLS < 0.1 0.1–0.25 > 0.25

Final Checklist

✔ Optimize hero image
✔ Use preload for critical assets
✔ Defer non-critical JS
✔ Break long tasks
✔ Always define width & height
✔ Minimize third-party scripts
✔ Use CDN + compression

Conclusion

Improving Core Web Vitals is not about chasing scores — it’s about building fast, stable, delightful experiences.

Small optimizations = massive ranking & conversion improvements.

If you want next:

  • Next.js specific guide
  • WordPress specific guide
  • Advanced React optimization guide
  • Technical SEO + Core Web Vitals deep dive

Just tell me which one you want 👇

Top comments (0)