Optimización de Core Web Vitals — Alcanza los objetivos de LCP, INP y CLS para rendimiento en el mundo real

// Instala la librería web-vitals para medición de usuarios reales
// 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;
    // Envía al endpoint de analytics
    fetch("/api/vitals", {
      method: "POST",
      body: JSON.stringify({ name, value, rating }),
    });
  });
  return null;
}
 
// Objetivos:
// LCP (Largest Contentful Paint): menor a 2.5s
// INP (Interaction to Next Paint): menor a 200ms
// CLS (Cumulative Layout Shift): menor a 0.1
// TTFB (Time to First Byte): menor a 800ms
// FCP (First Contentful Paint): menor a 1.8s

// ---- ANTES: Vitales pobres — LCP 4.1s, INP 380ms, CLS 0.28 ----
 
// app/page.tsx — Componente cliente con recursos bloqueantes
"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 después de hidratación — retrasa LCP
  useEffect(() => {
    fetch("/api/products")
      .then((r) => r.json())
      .then((data) => {
        setProducts(data);
        setLoading(false);
      });
  }, []);
 
  // Problema de INP: filtrado síncrono pesado en cada clic
  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>Cargando...</div>;
 
  return (
    <div>
      {/* CLS: Imagen sin dimensiones */}
      <img src="/hero.jpg" alt="Hero" />
 
      {/* CLS: Fuente externa causa reflujo de texto */}
      <h1 style={{ fontFamily: "'Fancy Font', serif" }}>Nuestros productos</h1>
 
      {/* CLS: Contenido dinámico empuja el layout */}
      {products.length > 0 && (
        <p className="text-sm text-gray-500">{products.length} productos encontrados</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} /> {/* Sin lazy loading, sin optimización */}
            <p>{p.name} — ${p.price}</p>
          </div>
        ))}
      </motion.div>
    </div>
  );
}
 
// ---- DESPUÉS: Buenos vitales — LCP 1.8s, INP 85ms, CLS 0.03 ----
 
// app/page.tsx — Server Component con recursos optimizados
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() {
  // Corrección de LCP: fetch del lado del servidor — datos disponibles en primera renderización
  const products = await db.product.findMany({
    orderBy: { name: "asc" },
    take: 50,
  });
 
  return (
    <div className={inter.className}>
      {/* Corrección de LCP: imagen optimizada con precarga de prioridad */}
      <Image
        src={heroImage}
        alt="Product showcase featuring our latest collection"
        priority
        placeholder="blur"
        sizes="100vw"
        className="w-full h-auto"
      />
 
      {/* Corrección de CLS: fuente auto-hospedada vía next/font — sin cambio de layout */}
      <h1 className="text-4xl font-bold mt-8">Nuestros productos</h1>
 
      {/* Corrección de CLS: espacio reservado para el contador de productos */}
      <p className="text-sm text-gray-500 h-6">
        {products.length} productos encontrados
      </p>
 
      <Suspense fallback={<div className="grid grid-cols-3 gap-4 h-96" />}>
        <ProductGrid initialProducts={products} />
      </Suspense>
    </div>
  );
}
 
// ProductGrid.tsx — Componente cliente con interacciones optimizadas
"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();
 
  // Corrección de INP: useTransition marca el filtrado como no urgente
  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")}>Todos</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}>
            {/* Corrección de CLS: width + height previenen cambio de layout */}
            {/* LCP: prioridad en las primeras 3 imágenes */}
            <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);
  // Usa sendBeacon para confiabilidad durante descarga de página
  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;
 
  // Filtrado diferido — escribir se mantiene responsivo
  const filtered = items.filter((item) =>
    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
  );
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Buscar..."
      />
      <div className={isStale ? "opacity-50" : ""}>
        {filtered.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

// 1. Siempre establece dimensiones de imagen
<Image src={url} alt="" width={800} height={600} />
 
// 2. Reserva espacio para contenido dinámico
<div className="min-h-[200px]">
  {data ? <Content data={data} /> : <Skeleton />}
</div>
 
// 3. Usa next/font en lugar de hojas de estilo externas
import { Inter } from "next/font/google";
 
// 4. Evita insertar contenido encima del contenido existente
// MAL: Banner aparece encima del pliegue después de cargar
// BIEN: Reserva espacio para el banner desde el inicio
 
// 5. Usa CSS contain para anuncios e embeds
<div style={{ contain: "layout", minHeight: 250 }}>
  <AdSlot />
</div>