Otimização dos Core Web Vitals - Atingindo as metas de LCP, INP e CLS para desempenho no mundo real

// Instale a biblioteca web-vitals para medição de usuários reais
// 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;
    // Envie para seu endpoint de análise
    fetch("/api/vitals", {
      method: "POST",
      body: JSON.stringify({ name, value, rating }),
    });
  });
  return null;
}
 
// Metas:
// LCP (Largest Contentful Paint): abaixo de 2,5s
// INP (Interaction to Next Paint): abaixo de 200ms
// CLS (Cumulative Layout Shift): abaixo de 0,1
// TTFB (Time to First Byte): abaixo de 800ms
// FCP (First Contentful Paint): abaixo de 1,8s

// ---- ANTES: Vitals ruins - LCP 4,1s, INP 380ms, CLS 0,28 ----
 
// app/page.tsx - Componente cliente com recursos bloqueadores
"use client";
 
import { useState, useEffect } from "react";
import { motion } from "framer-motion"; // Importação bloqueadora de 44KB
 
export default function HomePage() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
 
  // Busca após a hidratação - atrasa o LCP
  useEffect(() => {
    fetch("/api/products")
      .then((r) => r.json())
      .then((data) => {
        setProducts(data);
        setLoading(false);
      });
  }, []);
 
  // Problema de INP: filtragem síncrona pesada a cada clique
  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+ síncrono
    setProducts(sorted);
  };
 
  if (loading) return <div>Carregando...</div>;
 
  return (
    <div>
      {/* CLS: Imagem sem dimensões */}
      <img src="/hero.jpg" alt="Hero" />
 
      {/* CLS: Fonte externa causa reflow de texto */}
      <h1 style={{ fontFamily: "'Fancy Font', serif" }}>Nossos Produtos</h1>
 
      {/* CLS: Conteúdo dinâmico empurra o layout */}
      {products.length > 0 && (
        <p className="text-sm text-gray-500">{products.length} produtos 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} /> {/* Sem lazy loading, sem otimização */}
            <p>{p.name} - ${p.price}</p>
          </div>
        ))}
      </motion.div>
    </div>
  );
}
 
// ---- DEPOIS: Bons vitals - LCP 1,8s, INP 85ms, CLS 0,03 ----
 
// app/page.tsx - Server Component com recursos otimizados
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() {
  // Correção de LCP: Busca no lado do servidor - dados disponíveis na primeira renderização
  const products = await db.product.findMany({
    orderBy: { name: "asc" },
    take: 50,
  });
 
  return (
    <div className={inter.className}>
      {/* Correção de LCP: Imagem otimizada com pré-carga prioritária */}
      <Image
        src={heroImage}
        alt="Vitrine de produtos apresentando nossa última coleção"
        priority
        placeholder="blur"
        sizes="100vw"
        className="w-full h-auto"
      />
 
      {/* Correção de CLS: Fonte auto-hospedada via next/font - zero mudança de layout */}
      <h1 className="text-4xl font-bold mt-8">Nossos Produtos</h1>
 
      {/* Correção de CLS: Espaço reservado para a contagem de produtos */}
      <p className="text-sm text-gray-500 h-6">
        {products.length} produtos encontrados
      </p>
 
      <Suspense fallback={<div className="grid grid-cols-3 gap-4 h-96" />}>
        <ProductGrid initialProducts={products} />
      </Suspense>
    </div>
  );
}
 
// ProductGrid.tsx - Componente cliente com interações otimizadas
"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();
 
  // Correção de INP: useTransition marca a filtragem como não 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}>
            {/* Correção de CLS: largura + altura evitam mudança de layout */}
            {/* LCP: prioridade nas 3 primeiras imagens */}
            <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 para confiabilidade durante o descarregamento da 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;
 
  // Filtragem adiada - a digitação permanece responsiva
  const filtered = items.filter((item) =>
    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
  );
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Pesquisar..."
      />
      <div className={isStale ? "opacity-50" : ""}>
        {filtered.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

// 1. Sempre defina as dimensões da imagem
<Image src={url} alt="" width={800} height={600} />
 
// 2. Reserve espaço para conteúdo dinâmico
<div className="min-h-[200px]">
  {data ? <Content data={data} /> : <Skeleton />}
</div>
 
// 3. Use next/font em vez de stylesheets externos
import { Inter } from "next/font/google";
 
// 4. Evite inserir conteúdo acima do conteúdo existente
// RUIM: O banner aparece na dobra após o carregamento
// BOM: Reserve espaço para o banner desde o início
 
// 5. Use contain CSS para anúncios e incorporações
<div style={{ contain: "layout", minHeight: 250 }}>
  <AdSlot />
</div>