Web Performance Optimization: Core Web Vitals Guide

Introduction

Slow site = lost customer.

According to Google's research, when page load time increases from 1 second to 3 seconds, bounce rate increases by 32%. When it reaches 5 seconds, that rate hits 90%.

Performance isn't just about user experience — it's also critical for SEO. Google uses Core Web Vitals as a ranking factor.

What Are Core Web Vitals?

Three fundamental metrics defined by Google:

LCP (Largest Contentful Paint)

The time it takes for the largest content element on the page to become visible.

• Good: < 2.5 seconds
• Needs improvement: 2.5 - 4 seconds
• Poor: > 4 seconds

INP (Interaction to Next Paint)

Measures the visual response time of user interactions (clicks, taps, keyboard). Replaced FID in 2024 — covers all interactions, not just the first one.

• Good: < 200 ms
• Needs improvement: 200 - 500 ms
• Poor: > 500 ms

CLS (Cumulative Layout Shift)

How much content "shifts" while the page is loading.

• Good: < 0.1
• Needs improvement: 0.1 - 0.25
• Poor: > 0.25

How to Measure?

Lighthouse

Built into Chrome DevTools. Simulation-based, ideal for development.

Chrome → F12 → Lighthouse → Analyze page load

PageSpeed Insights

Google's online tool. Shows both lab data and real user data.

https://pagespeed.web.dev/

Web Vitals Extension

Real-time measurement as a Chrome extension.

Search Console

Core Web Vitals report in Google Search Console. Real user data.

LCP Optimization

1. Image Optimization

Use modern formats:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Description">
</picture>

Specify dimensions:

<img src="hero.jpg" width="1200" height="600" alt="Hero">

Lazy loading:

<img src="below-fold.jpg" loading="lazy" alt="Below fold content">

2. Font Optimization

Preload critical fonts:

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

Font-display swap:

@font-face {
  font-family: 'Manrope';
  font-display: swap;
  src: url('/fonts/manrope.woff2') format('woff2');
}

3. Server Optimization

• CDN usage
• GZIP/Brotli compression
• HTTP/2 or HTTP/3
• Server-side caching

INP Optimization

1. Reduce JavaScript

Code splitting:

// Dynamic import
const HeavyComponent = dynamic(() => import('./HeavyComponent'));

Tree shaking: Let unused code be automatically removed. Modern bundlers handle this.

2. Offload Main Thread

Web Workers: Separate heavy computations from the main thread.

requestIdleCallback: Defer non-critical tasks to idle time.

3. Third-party Script Control

Analytics, chat widgets, and ad scripts negatively affect INP. Use defer or async:

<script src="analytics.js" defer></script>

CLS Optimization

1. Size Reservation

For images:

<img src="photo.jpg" width="800" height="600" alt="Photo">

For videos:

.video-container {
  aspect-ratio: 16 / 9;
}

2. Prevent Font FOUT

@font-face {
  font-family: 'Manrope';
  font-display: optional; /* or swap */
}

3. Dynamic Content

Reserve space for ads and embeds:

.ad-slot {
  min-height: 250px;
}

Next.js Specific Optimizations

Image Component

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority // For LCP
  alt="Hero"
/>

Font Optimization

import { Manrope } from 'next/font/google';

const manrope = Manrope({ subsets: ['latin'] });

Script Component

import Script from 'next/script';

<Script src="analytics.js" strategy="lazyOnload" />

Practical Checklist

Mandatory (Every Project)

• Image dimensions specified
  
• WebP/AVIF formats
  
• Font preload
  
• Lazy loading (below fold)
  
• GZIP compression
  

Recommended

• CDN usage
  
• Code splitting
  
• Critical CSS inline
  
• Third-party script audit
  

Advanced

• Service Worker (PWA)
  
• Edge caching
  
• Prefetching strategy
  

Conclusion

Performance optimization isn't something done after the project is finished. It should be considered from the start and measured continuously.

Our targets:

• Lighthouse Performance: 90+
• LCP: < 2.5s
• INP: < 200ms
• CLS: < 0.1

We track these metrics in every project.