Optimización de rendimiento en aplicaciones web

El rendimiento web no es solo una métrica técnica — es una experiencia de usuario. Google lo sabe, y por eso los Core Web Vitals son ahora un factor de ranking en su algoritmo de búsqueda.

Los tres pilares: LCP, INP y CLS

• LCP (Largest Contentful Paint): Mide cuánto tarda en renderizarse el elemento más grande visible. Objetivo: < 2.5s.
• INP (Interaction to Next Paint): Mide la latencia de las interacciones del usuario. Objetivo: < 200ms.
• CLS (Cumulative Layout Shift): Mide la estabilidad visual de la página. Objetivo: < 0.1.

Optimización de imágenes

Las imágenes son el recurso más pesado en la mayoría de sitios web. Algunas técnicas clave:

<img
  src="hero.webp"
  alt="Hero image"
  width="800" height="400"
  loading="lazy"
  fetchpriority="high"
/>

• Usa formatos modernos como WebP o AVIF.
• Define width y height para evitar CLS.
• Usa loading="lazy" para imágenes below the fold.
• Usa fetchpriority="high" para la imagen del hero.

Code Splitting y Lazy Loading

No cargues todo el JavaScript de golpe. Angular facilita esto con rutas lazy:

{
  path: 'dashboard',
  loadComponent: () => import('./dashboard/dashboard')
    .then(m => m.Dashboard)
}

Preconnect y prefetch

Anticipa las conexiones que tu aplicación necesitará:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/api/critical-data">

El rendimiento web es un proceso continuo. Mide, optimiza y vuelve a medir. Herramientas como Lighthouse y PageSpeed Insights son tus mejores aliados.