Optimización de aplicaciones React para Core Web Vitals

El rendimiento en una app React no es solo velocidad — es cómo el sitio se siente para quien lo usa. Google lo mede con tres métricas principales:

• LCP (Largest Contentful Paint): tiempo hasta que aparece el contenido principal.
• INP (Interaction to Next Paint): cuánto tarda la interfaz en responder tras un clic o toque.
• CLS (Cumulative Layout Shift): cuánto “salta” el layout al cargar.

La buena noticia: mejorar estas métricas no requiere magia. Hay que medir, priorizar y aplicar buenas prácticas.

---

1. Evita re-renderizaciones innecesarias

Cada render consume CPU. Si un componente re-renderiza sin necesidad, pierdes rendimiento sin ganar nada.

Usa React.memo, useMemo y useCallback solo donde ayude:

tsxCopiar
const ExpensiveList = React.memo(({ data }) => {
  // renderiza lista grande
});

const Container = ({ items }) => {
  const sortedItems = useMemo(() => sortData(items), [items]);
  const handleClick = useCallback(() => console.log('clicked'), []);

  return <ExpensiveList data={sortedItems} onClick={handleClick} />;
};

Consejo: úsalos en listas grandes o cálculos pesados. Aplicarlos en todo puede complicar el código e incluso empeorar el rendimiento.

---

2. Divide el bundle con React.lazy

Las apps grandes envían mucho JavaScript en la primera visita. Eso retrasa el LCP. Carga solo lo que el usuario necesita ahora:

tsxCopiar
import React, { Suspense } from 'react';
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Rutas o módulos pesados entran bajo demanda y la primera carga queda más ligera.

---

3. Optimiza imágenes y fuentes

• Usa WebP o AVIF cuando puedas.
• En fuentes, font-display: swap evita texto invisible mientras bajan.
• Sirve imágenes en el tamaño correcto con srcset y loading="lazy".

Estos cambios impactan directamente el LCP — la métrica más ligada a lo que aparece en pantalla.

---

4. Mede antes de optimizar

Herramientas como Lighthouse, WebPageTest y el React Profiler muestran dónde se va el tiempo.

Sin medición, optimizas a ciegas.

---

5. Referencias útiles

• React Docs – Performance
• Google Web.dev – Core Web Vitals
• Webpack Bundle Analyzer
• React Profiler
• Lighthouse CLI

---

Conclusión

Mejorar Core Web Vitals en React es trabajo continuo: menos re-renderizaciones, bundles más pequeños, imágenes y fuentes bien configuradas — y medición constante.

El resultado es un sitio más rápido y más cómodo de usar.