Datos públicos de Google y Akamai: un segundo más de carga reduce la conversión entre 7% y 20%. Si tu web tarda más de 3 segundos, estás perdiendo dinero. Esta es la guía técnica que aplicamos en auditorías reales.
Diagnóstico antes de optimizar
Herramientas gratuitas y precisas:
- PageSpeed Insights: lab data + field data (CrUX).
- WebPageTest: análisis detallado por waterfall.
- Lighthouse en Chrome DevTools: perfil completo.
- Chrome User Experience Report (CrUX): datos reales de usuarios.
- Vercel Speed Insights, SpeedCurve, Calibre: monitoring continuo.
Optimizar imágenes (la palanca #1)
- Formatos modernos: WebP o AVIF en lugar de JPEG/PNG.
- Dimensiones reales: nunca sirvas 4000x3000 si se muestra a 800x600.
- Lazy loading: loading="lazy" en imágenes below-the-fold.
- srcset y sizes para responsive correcto.
- fetchpriority="high" en la imagen LCP del hero.
- CDN con transformación dinámica: Cloudinary, ImageKit, Imgix.
Reducir JavaScript
- Code splitting: cargar solo el JS necesario para la ruta actual.
- Tree shaking: eliminar código no usado en producción.
- Defer / async en scripts de terceros (analytics, chats).
- Eliminar librerías masivas para tareas pequeñas (jQuery, Moment.js).
- Server-side rendering (SSR) o static (SSG) cuando se pueda.
- Web Workers para tareas pesadas (PDF, búsqueda, validación).
Optimizar fuentes
- Self-host de fuentes en vez de cargar desde Google Fonts (mejor LCP y privacidad).
- font-display: swap u optional para no bloquear render.
- Subset solo de los caracteres usados.
- Preload de las fuentes críticas.
- Formato: WOFF2 (no TTF/OTF en producción).
CSS crítico
- Critical CSS inline para above-the-fold.
- Resto de CSS asíncrono con preload + onload.
- Eliminar CSS no usado: PurgeCSS, UnCSS.
- Minificación obligatoria.
Hosting y CDN
- CDN obligatorio si audiencia internacional: Cloudflare, Fastly, BunnyCDN.
- HTTP/2 o HTTP/3 (multiplexing y mejor latencia).
- Gzip o Brotli compression.
- Cache headers correctos (Cache-Control, ETag).
- TLS 1.3 (handshake más rápido).
Objetivos por métrica (Core Web Vitals 2025)
| Métrica | Bueno | Mejorable | Malo |
|---|---|---|---|
| LCP | < 2,5 s | 2,5 - 4 s | > 4 s |
| INP | < 200 ms | 200 - 500 ms | > 500 ms |
| CLS | < 0,1 | 0,1 - 0,25 | > 0,25 |
| TTFB | < 800 ms | 800 - 1.800 ms | > 1.800 ms |
Errores frecuentes
- Optimizar lab data (Lighthouse) sin mirar field data (CrUX).
- Olvidar móvil: 80% del tráfico es móvil y suele ser más lento.
- Hero gigante con vídeo autoplay y carrusel de 8 slides.
- No medir tras cada cambio: optimizar a ciegas.
- Sobrecargar el sitio de apps "que ayudan al CRO" pero matan performance.
