Skip to content
StackPractices
EN
intermediate Por Mathias Paulenko

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.

bundle-splitting caching cdn compression core-web-vitals devops images lazy-loading performance
Temas: performance devops

Nota para desarrolladores hispanohablantes: Esta guía incluye ejemplos y convenciones de nomenclatura adaptadas a equipos que trabajan en español. Cuando existen diferencias significativas en terminología técnica entre el inglés y el español, se indican explícitamente para facilitar la comunicación en equipos multiculturales.

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étricaObjetivoMide
LCP< 2.5sLargest Contentful Paint — velocidad de carga del contenido principal
INP< 200msInteraction to Next Paint — capacidad de respuesta
CLS< 0.1Cumulative 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

FormatoCaso de UsoAhorro
WebPReemplazo general de JPEG/PNG25-35%
AVIFMáxima compresión50% vs JPEG
SVGIconos, logos, gráficos simplesEscalable, 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é

EstrategiaCaso de UsoHeader
ImmutableAssets versionados (nombres con hash)Cache-Control: public, max-age=31536000, immutable
RevalidatePáginas HTML que pueden actualizarseCache-Control: max-age=0, must-revalidate
Stale-while-revalidateRespuestas de APICache-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

EstrategiaCuándo Usar
Basada en rutasCada página tiene su propio bundle
Basada en componentesComponentes pesados se cargan bajo demanda
Basada en libreríasVendors 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

EstrategiaFormatoBeneficio
GzipGeneralReducción del 60-70%
BrotliGeneralReducció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 defer o async
  • 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

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.

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 optimizacion

Como 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.

Recursos Relacionados

Recipe

Caching & Memoization

How to cache expensive computations and API responses using in-memory, LRU, and distributed caches across Python, JavaScript, and Java.

Guide

CI/CD Pipeline Guide

A practical guide to building CI/CD pipelines with GitHub Actions, testing, deployment strategies, and rollback procedures.

Recipe

Middleware

How to implement request/response middleware for logging, auth, and error handling across Python, JavaScript, and Java.

Recipe

Caching Strategies

Implement useful caching strategies for databases, APIs, and frontends using Redis, CDNs, and browser caches.

Doc

Load Test Execution Plan Template

A template to plan, execute, and document load tests that measure system behavior under realistic or peak traffic.

Recipe

Redis Cache Patterns for High-Performance Applications

How to implement cache-aside, write-through, and write-behind patterns with Redis to reduce database load and improve response times

Recipe

Log Rotation and Compression in Bash

Rotate and compress application logs automatically with bash scripts