Performance web: Optimización desde el código

La performance web es crucial para el éxito de cualquier proyecto digital. Un sitio lento no solo frustra a los usuarios, sino que también afecta directamente a tu negocio.

Métricas que importan

Core Web Vitals

Google ha definido tres métricas fundamentales:

• LCP (Largest Contentful Paint): Mide la velocidad de carga del contenido principal
• FID (First Input Delay): Evalúa la interactividad
• CLS (Cumulative Layout Shift): Cuantifica la estabilidad visual

Técnicas de optimización

1. Lazy Loading inteligente

No cargues todo de inmediato. Usa lazy loading para imágenes y componentes que están fuera del viewport inicial.

<Image
  src="/hero.jpg"
  alt="Hero"
  loading="lazy"
  quality={85}
/>

2. Code Splitting

Divide tu código en chunks más pequeños. Next.js hace esto automáticamente con:

const Component = dynamic(() => import('./Component'), {
  loading: () => <Skeleton />,
  ssr: false
})

3. Optimización de fuentes

Las fuentes web pueden ser pesadas. Usa variable fonts y subset para cargar solo los caracteres necesarios.

Herramientas de medición

• Lighthouse
• WebPageTest
• Chrome DevTools
• Vercel Analytics

Conclusión

La performance no es una característica opcional, es fundamental. Cada milisegundo cuenta.