Core Web Vitals Optimization — Hit LCP, INP, and CLS targets for real-world performance

// Install the web-vitals library for real user measurement
// npm install web-vitals
 
// app/components/WebVitals.tsx
"use client";
 
import { useReportWebVitals } from "next/web-vitals";
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    const { name, value, rating } = metric;
    // Send to your analytics endpoint
    fetch("/api/vitals", {
      method: "POST",
      body: JSON.stringify({ name, value, rating }),
    });
  });
  return null;
}
 
// Targets:
// LCP (Largest Contentful Paint): under 2.5s
// INP (Interaction to Next Paint): under 200ms
// CLS (Cumulative Layout Shift): under 0.1
// TTFB (Time to First Byte): under 800ms
// FCP (First Contentful Paint): under 1.8s

// ---- BEFORE: Poor vitals — LCP 4.1s, INP 380ms, CLS 0.28 ----
 
// app/page.tsx — Client component with blocking resources
"use client";
 
import { useState, useEffect } from "react";
import { motion } from "framer-motion"; // 44KB blocking import
 
export default function HomePage() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
 
  // Fetch after hydration — delays LCP
  useEffect(() => {
    fetch("/api/products")
      .then((r) => r.json())
      .then((data) => {
        setProducts(data);
        setLoading(false);
      });
  }, []);
 
  // INP problem: heavy synchronous filtering on every click
  const handleFilter = (category: string) => {
    const sorted = products
      .filter((p) => p.category === category)
      .sort((a, b) => a.name.localeCompare(b.name))
      .map((p) => ({ ...p, score: computeExpensiveScore(p) })); // 200ms+ sync
    setProducts(sorted);
  };
 
  if (loading) return <div>Loading...</div>;
 
  return (
    <div>
      {/* CLS: Image with no dimensions */}
      <img src="/hero.jpg" alt="Hero" />
 
      {/* CLS: External font causes text reflow */}
      <h1 style={{ fontFamily: "'Fancy Font', serif" }}>Our Products</h1>
 
      {/* CLS: Dynamic content pushes layout */}
      {products.length > 0 && (
        <p className="text-sm text-gray-500">{products.length} products found</p>
      )}
 
      <div className="flex gap-2 my-4">
        {categories.map((cat) => (
          <button key={cat} onClick={() => handleFilter(cat)}>
            {cat}
          </button>
        ))}
      </div>
 
      <motion.div className="grid grid-cols-3 gap-4">
        {products.map((p) => (
          <div key={p.id}>
            <img src={p.image} alt={p.name} /> {/* No lazy loading, no optimization */}
            <p>{p.name} — ${p.price}</p>
          </div>
        ))}
      </motion.div>
    </div>
  );
}
 
// ---- AFTER: Good vitals — LCP 1.8s, INP 85ms, CLS 0.03 ----
 
// app/page.tsx — Server Component with optimized resources
import Image from "next/image";
import { Inter } from "next/font/google";
import { Suspense } from "react";
import { db } from "@/lib/db";
import { ProductGrid } from "./ProductGrid";
import heroImage from "@/public/hero.jpg";
 
const inter = Inter({ subsets: ["latin"], display: "swap" });
 
export default async function HomePage() {
  // LCP fix: Server-side fetch — data available on first paint
  const products = await db.product.findMany({
    orderBy: { name: "asc" },
    take: 50,
  });
 
  return (
    <div className={inter.className}>
      {/* LCP fix: Optimized image with priority preload */}
      <Image
        src={heroImage}
        alt="Product showcase featuring our latest collection"
        priority
        placeholder="blur"
        sizes="100vw"
        className="w-full h-auto"
      />
 
      {/* CLS fix: Self-hosted font via next/font — zero layout shift */}
      <h1 className="text-4xl font-bold mt-8">Our Products</h1>
 
      {/* CLS fix: Reserved space for product count */}
      <p className="text-sm text-gray-500 h-6">
        {products.length} products found
      </p>
 
      <Suspense fallback={<div className="grid grid-cols-3 gap-4 h-96" />}>
        <ProductGrid initialProducts={products} />
      </Suspense>
    </div>
  );
}
 
// ProductGrid.tsx — Client component with optimized interactions
"use client";
 
import { useState, useTransition } from "react";
import Image from "next/image";
 
export function ProductGrid({ initialProducts }: { initialProducts: Product[] }) {
  const [products, setProducts] = useState(initialProducts);
  const [isPending, startTransition] = useTransition();
 
  // INP fix: useTransition marks filtering as non-urgent
  const handleFilter = (category: string) => {
    startTransition(() => {
      const filtered = initialProducts
        .filter((p) => category === "all" || p.category === category)
        .sort((a, b) => a.name.localeCompare(b.name));
      setProducts(filtered);
    });
  };
 
  return (
    <div>
      <div className="flex gap-2 my-4">
        <button onClick={() => handleFilter("all")}>All</button>
        {categories.map((cat) => (
          <button key={cat} onClick={() => handleFilter(cat)}>
            {cat}
          </button>
        ))}
      </div>
 
      <div
        className={`grid grid-cols-3 gap-4 ${isPending ? "opacity-60" : ""}`}
      >
        {products.map((p, index) => (
          <div key={p.id}>
            {/* CLS fix: width + height prevent layout shift */}
            {/* LCP: priority on first 3 images */}
            <Image
              src={p.image}
              alt={p.name}
              width={400}
              height={300}
              priority={index < 3}
              sizes="(max-width: 768px) 100vw, 33vw"
              className="rounded-lg"
            />
            <p className="mt-2 font-medium">{p.name} — ${p.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// app/vitals.ts
import { onCLS, onINP, onLCP, onFCP, onTTFB } from "web-vitals";
 
function sendToAnalytics(metric: { name: string; value: number; rating: string }) {
  const body = JSON.stringify(metric);
  // Use sendBeacon for reliability during page unload
  if (navigator.sendBeacon) {
    navigator.sendBeacon("/api/vitals", body);
  } else {
    fetch("/api/vitals", { method: "POST", body, keepalive: true });
  }
}
 
export function reportWebVitals() {
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
  onLCP(sendToAnalytics);
  onFCP(sendToAnalytics);
  onTTFB(sendToAnalytics);
}

"use client";
 
import { useState, useTransition, useDeferredValue } from "react";
 
function SearchableList({ items }: { items: Item[] }) {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;
 
  // Filtering deferred — typing stays responsive
  const filtered = items.filter((item) =>
    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
  );
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <div className={isStale ? "opacity-50" : ""}>
        {filtered.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

// 1. Always set image dimensions
<Image src={url} alt="" width={800} height={600} />
 
// 2. Reserve space for dynamic content
<div className="min-h-[200px]">
  {data ? <Content data={data} /> : <Skeleton />}
</div>
 
// 3. Use next/font instead of external stylesheets
import { Inter } from "next/font/google";
 
// 4. Avoid inserting content above existing content
// BAD: Banner appears above the fold after load
// GOOD: Reserve space for the banner from the start
 
// 5. Use CSS contain for ads and embeds
<div style={{ contain: "layout", minHeight: 250 }}>
  <AdSlot />
</div>