Guía de Optimización de Performance Web
manual detallado para optimizar el rendimiento de aplicaciones web con mejores Core Web Vitals y experiencia de usuario.
Resumen
La performance es un aspecto clave. Los sitios lentos pierden usuarios, ingresos y rankings de búsqueda. A continuación: técnicas prácticas para mejorar Core Web Vitals y ofrecer experiencias rápidas.
Core Web Vitals
Google mide tres métricas para la experiencia de página:
| Métrica | Objetivo | Mide |
|---|---|---|
| LCP | < 2.5s | Largest Contentful Paint — velocidad de carga del contenido principal |
| INP | < 200ms | Interaction to Next Paint — capacidad de respuesta |
| CLS | < 0.1 | Cumulative Layout Shift — estabilidad visual |
Cómo Medir
- Lighthouse: Integrado en Chrome DevTools
- PageSpeed Insights: Herramienta online con datos de campo
- Web Vitals Extension: Extensión de Chrome para monitoreo en tiempo real
Optimización de Imágenes
Las imágenes suelen ser el recurso más pesado de una página.
Formatos Modernos
| Formato | Caso de Uso | Ahorro |
|---|---|---|
| WebP | Reemplazo general de JPEG/PNG | 25-35% |
| AVIF | Máxima compresión | 50% vs JPEG |
| SVG | Iconos, logos, gráficos simples | Escalable, diminuto |
Lazy Loading
<!-- Lazy loading nativo -->
<img src="photo.jpg" loading="lazy" alt="...">Estrategias de Caché
Un caché adecuado elimina solicitudes de red redundantes.
Encabezados HTTP de Caché
| Estrategia | Caso de Uso | Header |
|---|---|---|
| Immutable | Assets versionados (nombres con hash) | Cache-Control: public, max-age=31536000, immutable |
| Revalidate | Páginas HTML que pueden actualizarse | Cache-Control: max-age=0, must-revalidate |
| Stale-while-revalidate | Respuestas de API | Cache-Control: max-age=3600, stale-while-revalidate=86400 |
Optimización de JavaScript
Bundle Splitting
// Vite / Webpack: imports en vivo para rutas
const HomePage = () => import('./pages/HomePage.js');
const Dashboard = () => import('./pages/Dashboard.js');Estrategias de Code Splitting
| Estrategia | Cuándo Usar |
|---|---|
| Basada en rutas | Cada página tiene su propio bundle |
| Basada en componentes | Componentes pesados se cargan bajo demanda |
| Basada en librerías | Vendors comunes en un chunk separado |
Optimización de CSS
/* CSS crítico inline en <head> */
<style>
/* Estilos above-the-fold únicamente */
.header { ... }
.hero { ... }
</style>
<!-- CSS no crítico cargado asíncronamente -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">Optimizaciones del Servidor
Compresión
| Estrategia | Formato | Beneficio |
|---|---|---|
| Gzip | General | Reducción del 60-70% |
| Brotli | General | Reducción del 70-80% |
Uso de CDN
- Servir assets estáticos desde ubicaciones edge
- Usar HTTP/2 o HTTP/3 para multiplexación
- Habilitar optimización automática de imágenes
Lo que funciona
- Establecer width/height explícitos en imágenes para prevenir CLS
- Diferir JavaScript no crítico con
deferoasync - Preload recursos críticos: fuentes, imágenes hero, CSS principal. Consulta lazy loading.
- Usar resource hints:
dns-prefetch,preconnect,prefetch - Medir antes de optimizar: Perfilear con DevTools primero
Errores Comunes
- Optimización prematura sin medición
- Cachear excesivamente respuestas de API que cambian frecuentemente
- Cargar todas las imágenes eager en páginas largas
- No comprimir respuestas de API (JSON)
Puntos Clave
- Aplica guía de optimización de performance web cuando necesites una solución práctica para tu caso de uso.
- Monitorea el rendimiento después de implementar; mide latencia, errores y uso de recursos antes y después.
- Revisa la sección de Troubleshooting ante errores comunes; la mayoría tienen causa raíz documentada con solución.
- Mantén dependencias actualizadas y ejecuta tests en CI para prevenir regresiones en producción.
Temas Avanzados
Escenario: Optimizacion de Web App E-commerce
Sistema: E-commerce, 3s LCP, 0.3s INP, 0.25 CLS
Objetivo: LCP < 1.5s, INP < 0.2s, CLS < 0.1
Fase 1: Diagnostico (Lighthouse + WebPageTest)
| Metrica | Antes | Objetivo | Herramienta |
|---------|-------|----------|-------------|
| LCP | 3.2s | < 1.5s | Lighthouse |
| INP | 320ms | < 200ms | WebPageTest |
| CLS | 0.25 | < 0.1 | Lighthouse |
| TTFB | 800ms | < 200ms | curl |
| Total weight | 3.2MB | < 1MB | DevTools |
| JS bundle | 850KB | < 200KB | webpack-bundle-analyzer |
Fase 2: Optimizacion de imagenes (mayor impacto)
- Convertir JPG/PNG a WebP (50% reduccion)
- Convertir hero a AVIF (70% reduccion)
- Responsive images: srcset + sizes
- Lazy loading: loading="lazy" en below-the-fold
- Width/height en todas las imagenes (prevenir CLS)
- Resultado: LCP 3.2s -> 1.8s, weight 3.2MB -> 1.8MB
Fase 3: Optimizacion de JavaScript
- Code splitting: route-based lazy loading
- Tree shaking: eliminar imports no usados
- Diferir scripts no criticos: defer + async
- Reemplazar librerias pesadas:
moment.js -> date-fns (280KB -> 13KB)
lodash -> lodash-es + tree shaking
- Resultado: JS bundle 850KB -> 180KB, INP 320ms -> 180ms
Fase 4: Optimizacion de red
- CDN para assets estaticos (CloudFront)
- HTTP/2 o HTTP/3 (multiplexing)
- Brotli compression (mejor que gzip)
- Cache-Control: max-age=31536000 para assets hashed
- Service Worker para cache offline
- Resultado: TTFB 800ms -> 180ms
Fase 5: Optimizacion de CSS
- Critical CSS inline (above-the-fold)
- Async load del resto: media="print" onload
- PurgeCSS para eliminar estilos no usados
- Resultado: CLS 0.25 -> 0.05
Fase 6: Resultados finales
| Metrica | Antes | Despues | Objetivo |
|---------|-------|---------|----------|
| LCP | 3.2s | 1.3s | < 1.5s |
| INP | 320ms | 165ms | < 200ms |
| CLS | 0.25 | 0.05 | < 0.1 |
| TTFB | 800ms | 180ms | < 200ms |
| Weight | 3.2MB | 0.9MB | < 1MB |
| JS bundle | 850KB | 180KB | < 200KB |
Lecciones:
- Optimizacion de imagenes es el win mas rapido
- Code splitting reduce bundle y mejora INP
- CDN + HTTP/2 reduce TTFB dramaticamente
- Critical CSS inline mejora LCP y CLS
- Mide antes y despues: sin datos no hay optimizacionComo priorizo optimizaciones de performance?
Empieza por LCP: es la metrica que mas afecta UX. Optimiza el elemento mas grande (usualmente una imagen hero). Despues CLS: fijar width/height en imagenes e iframes. Finalmente INP: dividir tareas largas de JS y deferir scripts. Usa Lighthouse para identificar oportunidades por impacto estimado. Una optimizacion que reduce 1s de LCP vale mas que una que reduce 50ms de TTFB.
End of document. Review and update quarterly.
Troubleshooting
- Largest Contentful Paint is high: optimize images, preload critical resources, and reduce server response time.
- JavaScript bundle size grows: analyze the bundle, split code by route, and tree-shake unused dependencies. Lazy-load non-critical components.
- Cache hit rate is low: review cache keys, TTLs, and invalidation patterns.
- Database CPU spikes: find the top queries by execution time and frequency. Add indexes, rewrite queries, or cache results.
- Throughput drops under load: profile for contention, garbage collection, and blocked threads. Scale horizontally only after optimizing the hot path.
Errores Comunes en Producción
- Tratar la guía como un checklist para completar una vez en lugar de una práctica por evolucionar.
- Adoptar cada recomendación de golpe en lugar de comenzar con un cambio medido.
- Saltar la evaluación de madurez e imponer prácticas avanzadas a un equipo no preparado.
- No actualizar runbooks y expectativas de guardia al introducir nuevas prácticas.
- Ignorar datos reales de incidentes al priorizar qué partes de la guía aplicar primero.
- No asignar un responsable que revise decisiones trimestralmente.
- Copiar ejemplos sin adaptarlos a las herramientas y restricciones reales del equipo.
- Olvidar medir resultados antes de agregar la siguiente mejora.
Preguntas frecuentes
Cuál es la optimización de performance más útil para web apps?
La optimización de imágenes típicamente entrega el mayor impacto. Convertir a WebP/AVIF, usar imágenes responsive y lazy loading de imágenes below-the-fold a menudo reduce el peso de página en 50% o más.
Debería usar un CDN para assets estáticos?
Sí. Un CDN reduce la latencia sirviendo assets desde ubicaciones edge cercanas a tus usuarios. También descarga tráfico de tu servidor origen y provee compresión y HTTP/2 integrados.
Cómo mejoro Core Web Vitals rápidamente?
Para LCP: optimiza tu elemento de contenido más grande (usualmente una imagen hero). Para CLS: siempre establece width/height en imágenes e iframes. Para INP: divide tareas largas de JavaScript y diferir scripts no críticos.
Recursos Relacionados
Caché y Memoización en Python, JavaScript y Java
Cómo cachear computaciones costosas y respuestas de API usando caches en memoria, LRU, TTL y distribuidos en Python, JavaScript y Java.
GuideGuía de Pipelines CI/CD
Una guía práctica para construir pipelines CI/CD con GitHub Actions, testing, estrategias de deployment y procedimientos de rollback.
RecipeMiddleware: Interceptores HTTP
Cómo implementar middleware de request/response para logging, auth y manejo de errores en Python, JavaScript y Java.
RecipeEstrategias de Caching
Implementa estrategias de caching útiles para bases de datos, APIs y frontends usando Redis, CDNs y caches de navegador.
DocPlantilla de Plan de Ejecucion de Pruebas de Carga
Una plantilla para planificar, ejecutar y documentar pruebas de carga que miden el comportamiento del sistema bajo trafico realista o pico.
RecipePatrones de Cache de Redis para Aplicaciones de Alto
Como implementar patrones cache-aside, write-through y write-behind con Redis para reducir carga de base de datos y mejorar tiempos de respuesta