Optimización de performance: de 3s a 300ms

Este es un caso de estudio real. Tenía una aplicación que tardaba 3 segundos en cargar. Hoy carga en 300ms. Así lo logré.

El diagnóstico inicial

Usé Lighthouse y Chrome DevTools para identificar los problemas:

• LCP: 3.2s (Malo)

• FID: 180ms (Malo)

• CLS: 0.25 (Malo)

• Bundle size: 2.4MB

Paso 1: Analizar el bundle

npx @next/bundle-analyzer

Descubrimientos:

• moment.js: 300KB (innecesario)

• lodash completo: 200KB

• Iconos sin tree-shaking: 400KB

Paso 2: Eliminar dependencias innecesarias

// Antes import moment from 'moment'; import _ from 'lodash';
// Después import { format } from 'date-fns'; import groupBy from 'lodash/groupBy';

Resultado: -600KB del bundle

Paso 3: Lazy loading agresivo

// Componentes pesados const Chart = dynamic(() => import('./Chart'), {   loading: () => <ChartSkeleton />,   ssr: false });
// Imágenes <Image   src="/hero.jpg"   loading="lazy"   placeholder="blur"   blurDataURL={blurHash} />

Paso 4: Optimizar imágenes

• Convertir a WebP/AVIF

• Usar srcset para diferentes tamaños

• Implementar blur placeholders

Paso 5: Caching estratégico

// API con cache export async function GET() {   return Response.json(data, {     headers: {       'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400'     }   }); }

Resultados finales

MétricaAntesDespuésMejora

LCP3.2s0.8s-75% FID180ms12ms-93% CLS0.250.02-92% Bundle2.4MB380KB-84%

Lección clave: La optimización no es magia. Es medición + acción sistemática.

¿Tu app necesita optimización? Empieza por medir. Los números no mienten.