Core Web Vitals: The Complete Speed and UX Guide

Core Web Vitals are Google's measurable indicators of real-world user experience — and they directly impact your search rankings. But optimizing for them isn't about gaming metrics; it's about building websites that load fast, respond instantly, and remain visually stable. Combine that with accessibility, and you have a site that works for everyone, everywhere. Having achieved 30%+ page load improvements in production React applications, this is my comprehensive playbook for performance and accessibility excellence.

Understanding Core Web Vitals (2026)

The Three Metrics

Metric	What It Measures	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	Loading speed	≤ 2.5s	2.5s – 4s	> 4s
INP (Interaction to Next Paint)	Responsiveness	≤ 200ms	200ms – 500ms	> 500ms
CLS (Cumulative Layout Shift)	Visual stability	≤ 0.1	0.1 – 0.25	> 0.25

INP replaced FID in March 2024 — it measures the latency of ALL interactions (clicks, taps, keyboard), not just the first one. This is a higher bar and requires different optimization strategies.

LCP Optimization: Loading Speed

LCP measures when the largest visible element (usually a hero image, heading, or video thumbnail) finishes rendering.

1. Optimize the LCP Element

Identify your LCP element using Chrome DevTools → Performance tab → Timings → LCP.

Common LCP elements:

Hero images
<h1> headings with web fonts
Background images
Video poster frames

2. Image Optimization in Next.js

// ✅ Optimized hero image
import Image from 'next/image';

function HeroSection() {
  return (
    <section className="relative h-screen">
      <Image
        src="/images/hero-banner.jpg"
        alt="Modern web development workspace"
        fill
        priority                    // Preloads this image (critical for LCP)
        sizes="100vw"
        className="object-cover"
        quality={85}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold text-white">
          Senior Frontend Engineer
        </h1>
      </div>
    </section>
  );
}

Key optimizations:

priority adds <link rel="preload"> for above-the-fold images
sizes tells the browser which image size to download
Next.js automatically serves AVIF/WebP based on browser support
quality={85} balances visual quality with file size

3. Font Loading Strategy

Web fonts are a common LCP blocker. Optimize them:

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',                    // Show fallback immediately
  preload: true,
  variable: '--font-inter',
  fallback: ['system-ui', 'sans-serif'],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

For self-hosted fonts:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0000-00FF;  /* Only load Latin characters initially */
}

4. Server-Side Rendering for Fast LCP

// Server Components render HTML on the server — no client JS needed for LCP
// app/page.tsx (Server Component by default)
export default async function HomePage() {
  const projects = await getProjects(); // Fetched at request time

  return (
    <main>
      <h1 className="text-5xl font-bold">Sameer Sabir</h1>
      <p className="text-xl text-gray-400">Senior Frontend Engineer</p>
      {/* This content is in the initial HTML — fast LCP */}
      <ProjectGrid projects={projects} />
    </main>
  );
}

5. Preload Critical Resources

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* Preload LCP image */}
        <link
          rel="preload"
          href="/images/hero-banner.jpg"
          as="image"
          type="image/webp"
        />
        {/* Preconnect to external resources */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="dns-prefetch" href="https://analytics.google.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}

INP Optimization: Responsiveness

INP measures how quickly your page responds to user interactions. Every click, tap, and keypress should produce a visual response within 200ms.

1. Avoid Long Tasks

Break up JavaScript execution that blocks the main thread:

// ❌ Long task — blocks interactions
function processLargeDataset(items: Item[]) {
  return items
    .filter(item => item.active)
    .map(item => transformItem(item))
    .sort((a, b) => a.date.localeCompare(b.date));
}

// ✅ Yield to the browser between chunks
async function processLargeDatasetAsync(items: Item[]) {
  const CHUNK_SIZE = 100;
  const results: TransformedItem[] = [];

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    const processed = chunk
      .filter(item => item.active)
      .map(item => transformItem(item));
    results.push(...processed);

    // Yield to the browser
    await new Promise(resolve => setTimeout(resolve, 0));
  }

  return results.sort((a, b) => a.date.localeCompare(b.date));
}

2. Use `startTransition` for Non-Urgent Updates

import { useState, useTransition } from 'react';

function SearchableProjectList({ projects }: { projects: Project[] }) {
  const [query, setQuery] = useState('');
  const [filteredProjects, setFilteredProjects] = useState(projects);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (value: string) => {
    setQuery(value); // Urgent: update input immediately

    startTransition(() => {
      // Non-urgent: filter can be deferred
      const filtered = projects.filter(p =>
        p.title.toLowerCase().includes(value.toLowerCase()) ||
        p.technologies.some(t => t.toLowerCase().includes(value.toLowerCase()))
      );
      setFilteredProjects(filtered);
    });
  };

  return (
    <div>
      <input
        type="search"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search projects..."
        className="w-full bg-gray-800 rounded-lg px-4 py-3 text-white"
      />
      <div className={isPending ? 'opacity-60 transition-opacity' : ''}>
        {filteredProjects.map(p => <ProjectCard key={p.id} project={p} />)}
      </div>
    </div>
  );
}

3. Debounce Expensive Handlers

import { useCallback, useRef } from 'react';

function useDebounce<T extends (...args: never[]) => void>(fn: T, delay: number) {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  return useCallback((...args: Parameters<T>) => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => fn(...args), delay);
  }, [fn, delay]) as T;
}

// Usage
const debouncedSearch = useDebounce((query: string) => {
  // Expensive filtering/API call
  fetchSearchResults(query);
}, 300);

4. Minimize Hydration Cost

// ❌ Heavy client component that hydrates slowly
'use client';
import { FullCalendar } from '@fullcalendar/react';
import { Chart } from 'react-chartjs-2';
// These libraries add 200KB+ to the hydration budget

// ✅ Dynamic import — hydrate only when needed
import dynamic from 'next/dynamic';

const Calendar = dynamic(() => import('@fullcalendar/react'), { ssr: false });
const Chart = dynamic(() => import('react-chartjs-2').then(m => m.Chart), { ssr: false });

CLS Optimization: Visual Stability

CLS measures unexpected layout shifts — elements moving around as the page loads.

1. Reserve Space for Images

// ✅ Always specify dimensions
<Image
  src="/project-screenshot.jpg"
  alt="Project dashboard"
  width={800}
  height={450}
  className="rounded-xl"
/>

// ✅ For responsive images with unknown aspect ratio
<div className="aspect-video relative">
  <Image
    src="/project-screenshot.jpg"
    alt="Project dashboard"
    fill
    className="object-cover rounded-xl"
  />
</div>

2. Prevent Font-Swap Layout Shifts

/* Use font-display: optional for non-critical fonts */
@font-face {
  font-family: 'DecorativeFont';
  src: url('/fonts/decorative.woff2') format('woff2');
  font-display: optional; /* Skip if not cached — no layout shift */
}

/* Use size-adjust to match fallback metrics */
@font-face {
  font-family: 'CustomSans';
  src: url('/fonts/custom-sans.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;         /* Adjust to match system font metrics */
  ascent-override: 90%;
  descent-override: 20%;
}

3. Avoid Dynamic Content Injection Above the Fold

// ❌ Banner inserted after load pushes content down
function Layout({ children }: { children: React.ReactNode }) {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    // This causes CLS when the banner appears
    setShowBanner(shouldShowPromoBanner());
  }, []);

  return (
    <div>
      {showBanner && <PromoBanner />}   {/* CLS! */}
      <Header />
      {children}
    </div>
  );
}

// ✅ Reserve space or use transforms
function Layout({ children }: { children: React.ReactNode }) {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    setShowBanner(shouldShowPromoBanner());
  }, []);

  return (
    <div>
      {/* Fixed height container prevents CLS */}
      <div className="h-12 overflow-hidden">
        {showBanner && (
          <PromoBanner className="animate-slide-down" />
        )}
      </div>
      <Header />
      {children}
    </div>
  );
}

4. Skeleton Loaders that Match Final Layout

function ProjectCardSkeleton() {
  return (
    <div className="bg-gray-800 rounded-xl overflow-hidden animate-pulse">
      {/* Match exact dimensions of the real card */}
      <div className="w-full h-48 bg-gray-700" />
      <div className="p-6 space-y-3">
        <div className="h-6 bg-gray-700 rounded w-3/4" />
        <div className="h-4 bg-gray-700 rounded w-full" />
        <div className="h-4 bg-gray-700 rounded w-2/3" />
        <div className="flex gap-2 mt-4">
          <div className="h-6 w-16 bg-gray-700 rounded-full" />
          <div className="h-6 w-20 bg-gray-700 rounded-full" />
          <div className="h-6 w-14 bg-gray-700 rounded-full" />
        </div>
      </div>
    </div>
  );
}

Accessibility as a Performance Feature

Accessibility and performance are deeply connected. Accessible sites tend to be faster, and fast sites tend to be more accessible.

Semantic HTML Reduces JavaScript

<!-- ❌ Custom JavaScript-heavy components -->
<div onclick="toggleMenu()" role="button" tabindex="0" aria-expanded="false">Menu</div>

<!-- ✅ Native elements with free accessibility -->
<button onclick="toggleMenu()" aria-expanded="false">Menu</button>
<details><summary>FAQ Question</summary><p>Answer here</p></details>
<dialog id="modal"><form method="dialog">...</form></dialog>

Native elements provide keyboard support, focus management, and ARIA semantics without a single line of JavaScript.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <a
          href="#main-content"
          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4
                     bg-cyan-600 text-white px-4 py-2 rounded-lg z-[100] text-sm"
        >
          Skip to main content
        </a>
        <Navigation />
        <main id="main-content" tabIndex={-1}>
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

Color Contrast Automation

// lib/accessibility.ts
export function getContrastRatio(fg: string, bg: string): number {
  const fgLum = getRelativeLuminance(fg);
  const bgLum = getRelativeLuminance(bg);
  const lighter = Math.max(fgLum, bgLum);
  const darker = Math.min(fgLum, bgLum);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = rgb.map((c) => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// WCAG AA requirements:
// Normal text (< 18px): 4.5:1
// Large text (≥ 18px bold or ≥ 24px): 3:1
// UI components: 3:1

Reduced Motion Support

/* Global animation respecter */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// Hook for JavaScript animations
export function usePrefersReducedMotion(): boolean {
  const [prefersReduced, setPrefersReduced] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReduced(mq.matches);
    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  return prefersReduced;
}

Performance Auditing Workflow

1. Lighthouse CI in GitHub Actions

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: pull_request

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: .lighthouserc.json
          uploadArtifacts: true

// .lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:best-practices": ["error", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.95 }]
      }
    }
  }
}

2. Real User Monitoring

// lib/web-vitals.ts
import { onCLS, onINP, onLCP, type Metric } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    navigationType: metric.navigationType,
    url: window.location.href,
  });

  // Use sendBeacon for reliable delivery
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/analytics/vitals', body);
  }
}

export function initWebVitals() {
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
  onLCP(sendToAnalytics);
}

3. Bundle Analysis

# Check what's in your bundle
npx @next/bundle-analyzer

# Find unused JavaScript
npx next build --debug
# Check .next/analyze/ for detailed breakdown

Performance Budget

Set budgets and enforce them:

// performance-budget.json
{
  "budgets": [
    {
      "resourceType": "script",
      "budget": 200
    },
    {
      "resourceType": "stylesheet",
      "budget": 50
    },
    {
      "resourceType": "image",
      "budget": 300
    },
    {
      "resourceType": "total",
      "budget": 600
    }
  ],
  "vitals": {
    "LCP": 2500,
    "INP": 200,
    "CLS": 0.1
  }
}

The Complete Checklist

Performance

LCP element has priority loading
Fonts use display: swap with next/font
Heavy components are dynamically imported
Images have explicit width/height or aspect-ratio
Third-party scripts are deferred or loaded after interaction
startTransition used for non-urgent state updates
Bundle size under 200KB JavaScript (gzipped)

Accessibility

SEO

Meta title and description on every page
JSON-LD structured data (Person, FAQ, Breadcrumb, etc.)
Sitemap.xml and robots.txt present
Open Graph and Twitter Card meta tags
Canonical URLs set correctly
Pages are server-rendered for crawler access

Key Takeaways

LCP: Preload hero images, optimize fonts, use server rendering
INP: Break long tasks, use startTransition, debounce handlers
CLS: Reserve space for images/ads, avoid dynamic content injection above fold
Accessibility: Semantic HTML first, ARIA second, test with keyboard and screen reader
Automate auditing: Lighthouse CI in PRs, real user monitoring in production
Set budgets: Measurable limits prevent performance regression

Performance and accessibility aren't afterthoughts — they're architecture decisions. Build them into your foundation, automate the guardrails, and your users will thank you with engagement, conversions, and loyalty.

Field data rarely matches the lab score, and the gap is where the real work is. Closing it is what React and Next.js performance optimization means in practice — send me your URL.

Related Blogs

Performance

React Performance Case Study: Code Splitting, Lazy Loading, and Data Caching in Production

A practical React performance optimization case study covering code splitting, lazy loading, caching, Core Web Vitals, and faster page loads.

May 22, 2026Read

Next.js

The Complete Guide to SEO Optimization in Next.js 15 Applications

Master Next.js 15 SEO: structured data, dynamic metadata, canonical URLs, Core Web Vitals, sitemaps, and international targeting that ranks.

Feb 18, 2026Read

Next.js

Building a Website Audit Platform with Next.js, Playwright, Lighthouse, and axe-core

Learn how to build a production website audit platform with Next.js, Playwright, Lighthouse, axe-core, SEO checks, and accessibility reports.

May 12, 2026Read

Understanding Core Web Vitals (2026)

The Three Metrics

Metric	What It Measures	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	Loading speed	≤ 2.5s	2.5s – 4s	> 4s
INP (Interaction to Next Paint)	Responsiveness	≤ 200ms	200ms – 500ms	> 500ms
CLS (Cumulative Layout Shift)	Visual stability	≤ 0.1	0.1 – 0.25	> 0.25

LCP Optimization: Loading Speed

LCP measures when the largest visible element (usually a hero image, heading, or video thumbnail) finishes rendering.

1. Optimize the LCP Element

Identify your LCP element using Chrome DevTools → Performance tab → Timings → LCP.

Common LCP elements:

Hero images
<h1> headings with web fonts
Background images
Video poster frames

2. Image Optimization in Next.js

// ✅ Optimized hero image
import Image from 'next/image';

function HeroSection() {
  return (
    <section className="relative h-screen">
      <Image
        src="/images/hero-banner.jpg"
        alt="Modern web development workspace"
        fill
        priority                    // Preloads this image (critical for LCP)
        sizes="100vw"
        className="object-cover"
        quality={85}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold text-white">
          Senior Frontend Engineer
        </h1>
      </div>
    </section>
  );
}

Key optimizations:

priority adds <link rel="preload"> for above-the-fold images
sizes tells the browser which image size to download
Next.js automatically serves AVIF/WebP based on browser support
quality={85} balances visual quality with file size

3. Font Loading Strategy

Web fonts are a common LCP blocker. Optimize them:

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',                    // Show fallback immediately
  preload: true,
  variable: '--font-inter',
  fallback: ['system-ui', 'sans-serif'],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

For self-hosted fonts:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0000-00FF;  /* Only load Latin characters initially */
}

4. Server-Side Rendering for Fast LCP

// Server Components render HTML on the server — no client JS needed for LCP
// app/page.tsx (Server Component by default)
export default async function HomePage() {
  const projects = await getProjects(); // Fetched at request time

  return (
    <main>
      <h1 className="text-5xl font-bold">Sameer Sabir</h1>
      <p className="text-xl text-gray-400">Senior Frontend Engineer</p>
      {/* This content is in the initial HTML — fast LCP */}
      <ProjectGrid projects={projects} />
    </main>
  );
}

5. Preload Critical Resources

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* Preload LCP image */}
        <link
          rel="preload"
          href="/images/hero-banner.jpg"
          as="image"
          type="image/webp"
        />
        {/* Preconnect to external resources */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="dns-prefetch" href="https://analytics.google.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}

INP Optimization: Responsiveness

INP measures how quickly your page responds to user interactions. Every click, tap, and keypress should produce a visual response within 200ms.

1. Avoid Long Tasks

Break up JavaScript execution that blocks the main thread:

// ❌ Long task — blocks interactions
function processLargeDataset(items: Item[]) {
  return items
    .filter(item => item.active)
    .map(item => transformItem(item))
    .sort((a, b) => a.date.localeCompare(b.date));
}

// ✅ Yield to the browser between chunks
async function processLargeDatasetAsync(items: Item[]) {
  const CHUNK_SIZE = 100;
  const results: TransformedItem[] = [];

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    const processed = chunk
      .filter(item => item.active)
      .map(item => transformItem(item));
    results.push(...processed);

    // Yield to the browser
    await new Promise(resolve => setTimeout(resolve, 0));
  }

  return results.sort((a, b) => a.date.localeCompare(b.date));
}

2. Use `startTransition` for Non-Urgent Updates

import { useState, useTransition } from 'react';

function SearchableProjectList({ projects }: { projects: Project[] }) {
  const [query, setQuery] = useState('');
  const [filteredProjects, setFilteredProjects] = useState(projects);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (value: string) => {
    setQuery(value); // Urgent: update input immediately

    startTransition(() => {
      // Non-urgent: filter can be deferred
      const filtered = projects.filter(p =>
        p.title.toLowerCase().includes(value.toLowerCase()) ||
        p.technologies.some(t => t.toLowerCase().includes(value.toLowerCase()))
      );
      setFilteredProjects(filtered);
    });
  };

  return (
    <div>
      <input
        type="search"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Search projects..."
        className="w-full bg-gray-800 rounded-lg px-4 py-3 text-white"
      />
      <div className={isPending ? 'opacity-60 transition-opacity' : ''}>
        {filteredProjects.map(p => <ProjectCard key={p.id} project={p} />)}
      </div>
    </div>
  );
}

3. Debounce Expensive Handlers

import { useCallback, useRef } from 'react';

function useDebounce<T extends (...args: never[]) => void>(fn: T, delay: number) {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  return useCallback((...args: Parameters<T>) => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => fn(...args), delay);
  }, [fn, delay]) as T;
}

// Usage
const debouncedSearch = useDebounce((query: string) => {
  // Expensive filtering/API call
  fetchSearchResults(query);
}, 300);

4. Minimize Hydration Cost

// ❌ Heavy client component that hydrates slowly
'use client';
import { FullCalendar } from '@fullcalendar/react';
import { Chart } from 'react-chartjs-2';
// These libraries add 200KB+ to the hydration budget

// ✅ Dynamic import — hydrate only when needed
import dynamic from 'next/dynamic';

const Calendar = dynamic(() => import('@fullcalendar/react'), { ssr: false });
const Chart = dynamic(() => import('react-chartjs-2').then(m => m.Chart), { ssr: false });

CLS Optimization: Visual Stability

CLS measures unexpected layout shifts — elements moving around as the page loads.

1. Reserve Space for Images

// ✅ Always specify dimensions
<Image
  src="/project-screenshot.jpg"
  alt="Project dashboard"
  width={800}
  height={450}
  className="rounded-xl"
/>

// ✅ For responsive images with unknown aspect ratio
<div className="aspect-video relative">
  <Image
    src="/project-screenshot.jpg"
    alt="Project dashboard"
    fill
    className="object-cover rounded-xl"
  />
</div>

2. Prevent Font-Swap Layout Shifts

/* Use font-display: optional for non-critical fonts */
@font-face {
  font-family: 'DecorativeFont';
  src: url('/fonts/decorative.woff2') format('woff2');
  font-display: optional; /* Skip if not cached — no layout shift */
}

/* Use size-adjust to match fallback metrics */
@font-face {
  font-family: 'CustomSans';
  src: url('/fonts/custom-sans.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;         /* Adjust to match system font metrics */
  ascent-override: 90%;
  descent-override: 20%;
}

3. Avoid Dynamic Content Injection Above the Fold

// ❌ Banner inserted after load pushes content down
function Layout({ children }: { children: React.ReactNode }) {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    // This causes CLS when the banner appears
    setShowBanner(shouldShowPromoBanner());
  }, []);

  return (
    <div>
      {showBanner && <PromoBanner />}   {/* CLS! */}
      <Header />
      {children}
    </div>
  );
}

// ✅ Reserve space or use transforms
function Layout({ children }: { children: React.ReactNode }) {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    setShowBanner(shouldShowPromoBanner());
  }, []);

  return (
    <div>
      {/* Fixed height container prevents CLS */}
      <div className="h-12 overflow-hidden">
        {showBanner && (
          <PromoBanner className="animate-slide-down" />
        )}
      </div>
      <Header />
      {children}
    </div>
  );
}

4. Skeleton Loaders that Match Final Layout

function ProjectCardSkeleton() {
  return (
    <div className="bg-gray-800 rounded-xl overflow-hidden animate-pulse">
      {/* Match exact dimensions of the real card */}
      <div className="w-full h-48 bg-gray-700" />
      <div className="p-6 space-y-3">
        <div className="h-6 bg-gray-700 rounded w-3/4" />
        <div className="h-4 bg-gray-700 rounded w-full" />
        <div className="h-4 bg-gray-700 rounded w-2/3" />
        <div className="flex gap-2 mt-4">
          <div className="h-6 w-16 bg-gray-700 rounded-full" />
          <div className="h-6 w-20 bg-gray-700 rounded-full" />
          <div className="h-6 w-14 bg-gray-700 rounded-full" />
        </div>
      </div>
    </div>
  );
}

Accessibility as a Performance Feature

Accessibility and performance are deeply connected. Accessible sites tend to be faster, and fast sites tend to be more accessible.

Semantic HTML Reduces JavaScript

<!-- ❌ Custom JavaScript-heavy components -->
<div onclick="toggleMenu()" role="button" tabindex="0" aria-expanded="false">Menu</div>

<!-- ✅ Native elements with free accessibility -->
<button onclick="toggleMenu()" aria-expanded="false">Menu</button>
<details><summary>FAQ Question</summary><p>Answer here</p></details>
<dialog id="modal"><form method="dialog">...</form></dialog>

Native elements provide keyboard support, focus management, and ARIA semantics without a single line of JavaScript.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <a
          href="#main-content"
          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4
                     bg-cyan-600 text-white px-4 py-2 rounded-lg z-[100] text-sm"
        >
          Skip to main content
        </a>
        <Navigation />
        <main id="main-content" tabIndex={-1}>
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

Color Contrast Automation

// lib/accessibility.ts
export function getContrastRatio(fg: string, bg: string): number {
  const fgLum = getRelativeLuminance(fg);
  const bgLum = getRelativeLuminance(bg);
  const lighter = Math.max(fgLum, bgLum);
  const darker = Math.min(fgLum, bgLum);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = rgb.map((c) => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// WCAG AA requirements:
// Normal text (< 18px): 4.5:1
// Large text (≥ 18px bold or ≥ 24px): 3:1
// UI components: 3:1

Reduced Motion Support

/* Global animation respecter */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// Hook for JavaScript animations
export function usePrefersReducedMotion(): boolean {
  const [prefersReduced, setPrefersReduced] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReduced(mq.matches);
    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  return prefersReduced;
}

Performance Auditing Workflow

1. Lighthouse CI in GitHub Actions

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: pull_request

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: .lighthouserc.json
          uploadArtifacts: true

// .lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:best-practices": ["error", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.95 }]
      }
    }
  }
}

2. Real User Monitoring

// lib/web-vitals.ts
import { onCLS, onINP, onLCP, type Metric } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    navigationType: metric.navigationType,
    url: window.location.href,
  });

  // Use sendBeacon for reliable delivery
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/analytics/vitals', body);
  }
}

export function initWebVitals() {
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
  onLCP(sendToAnalytics);
}

3. Bundle Analysis

# Check what's in your bundle
npx @next/bundle-analyzer

# Find unused JavaScript
npx next build --debug
# Check .next/analyze/ for detailed breakdown

Performance Budget

Set budgets and enforce them:

// performance-budget.json
{
  "budgets": [
    {
      "resourceType": "script",
      "budget": 200
    },
    {
      "resourceType": "stylesheet",
      "budget": 50
    },
    {
      "resourceType": "image",
      "budget": 300
    },
    {
      "resourceType": "total",
      "budget": 600
    }
  ],
  "vitals": {
    "LCP": 2500,
    "INP": 200,
    "CLS": 0.1
  }
}

The Complete Checklist

Performance

LCP element has priority loading
Fonts use display: swap with next/font
Heavy components are dynamically imported
Images have explicit width/height or aspect-ratio
Third-party scripts are deferred or loaded after interaction
startTransition used for non-urgent state updates
Bundle size under 200KB JavaScript (gzipped)

Accessibility

SEO

Meta title and description on every page
JSON-LD structured data (Person, FAQ, Breadcrumb, etc.)
Sitemap.xml and robots.txt present
Open Graph and Twitter Card meta tags
Canonical URLs set correctly
Pages are server-rendered for crawler access

Key Takeaways

LCP: Preload hero images, optimize fonts, use server rendering
INP: Break long tasks, use startTransition, debounce handlers
CLS: Reserve space for images/ads, avoid dynamic content injection above fold
Accessibility: Semantic HTML first, ARIA second, test with keyboard and screen reader
Automate auditing: Lighthouse CI in PRs, real user monitoring in production
Set budgets: Measurable limits prevent performance regression

Field data rarely matches the lab score, and the gap is where the real work is. Closing it is what React and Next.js performance optimization means in practice — send me your URL.

Related Blogs

Performance

React Performance Case Study: Code Splitting, Lazy Loading, and Data Caching in Production

A practical React performance optimization case study covering code splitting, lazy loading, caching, Core Web Vitals, and faster page loads.

May 22, 2026Read

Next.js

The Complete Guide to SEO Optimization in Next.js 15 Applications

Master Next.js 15 SEO: structured data, dynamic metadata, canonical URLs, Core Web Vitals, sitemaps, and international targeting that ranks.

Feb 18, 2026Read

Next.js

Building a Website Audit Platform with Next.js, Playwright, Lighthouse, and axe-core

Learn how to build a production website audit platform with Next.js, Playwright, Lighthouse, axe-core, SEO checks, and accessibility reports.

May 12, 2026Read

Understanding Core Web Vitals (2026)

The Three Metrics

LCP Optimization: Loading Speed

1. Optimize the LCP Element

2. Image Optimization in Next.js

3. Font Loading Strategy

4. Server-Side Rendering for Fast LCP

5. Preload Critical Resources

INP Optimization: Responsiveness

1. Avoid Long Tasks

2. Use startTransition for Non-Urgent Updates

3. Debounce Expensive Handlers

4. Minimize Hydration Cost

CLS Optimization: Visual Stability

1. Reserve Space for Images

2. Prevent Font-Swap Layout Shifts

3. Avoid Dynamic Content Injection Above the Fold

4. Skeleton Loaders that Match Final Layout

Accessibility as a Performance Feature

Semantic HTML Reduces JavaScript

Skip Navigation Link

Color Contrast Automation

Reduced Motion Support

Performance Auditing Workflow

1. Lighthouse CI in GitHub Actions

2. Real User Monitoring

3. Bundle Analysis

Performance Budget

The Complete Checklist

Performance

Accessibility

SEO

Key Takeaways

Related Reading

Related Blogs

React Performance Case Study: Code Splitting, Lazy Loading, and Data Caching in Production

The Complete Guide to SEO Optimization in Next.js 15 Applications

Building a Website Audit Platform with Next.js, Playwright, Lighthouse, and axe-core

Understanding Core Web Vitals (2026)

The Three Metrics

LCP Optimization: Loading Speed

1. Optimize the LCP Element

2. Image Optimization in Next.js

3. Font Loading Strategy

4. Server-Side Rendering for Fast LCP

5. Preload Critical Resources

INP Optimization: Responsiveness

1. Avoid Long Tasks

2. Use startTransition for Non-Urgent Updates

3. Debounce Expensive Handlers

4. Minimize Hydration Cost

CLS Optimization: Visual Stability

1. Reserve Space for Images

2. Prevent Font-Swap Layout Shifts

3. Avoid Dynamic Content Injection Above the Fold

4. Skeleton Loaders that Match Final Layout

Accessibility as a Performance Feature

Semantic HTML Reduces JavaScript

Skip Navigation Link

Color Contrast Automation

Reduced Motion Support

Performance Auditing Workflow

1. Lighthouse CI in GitHub Actions

2. Real User Monitoring

3. Bundle Analysis

Performance Budget

The Complete Checklist

Performance

Accessibility

SEO

Key Takeaways

Related Reading

Related Blogs

React Performance Case Study: Code Splitting, Lazy Loading, and Data Caching in Production

The Complete Guide to SEO Optimization in Next.js 15 Applications

Building a Website Audit Platform with Next.js, Playwright, Lighthouse, and axe-core

2. Use `startTransition` for Non-Urgent Updates

2. Use `startTransition` for Non-Urgent Updates