Un cliente llegó con una tienda online que tardaba 4.2 segundos en mostrar el contenido principal. Después de nuestra intervención, el LCP bajó a 0.9 segundos. Las conversiones subieron un 23% el primer mes. Esto es lo que hicimos.
Diagnóstico: identificar los cuellos de botella
Antes de optimizar, mide. Usamos Lighthouse, WebPageTest y Chrome DevTools para identificar: imágenes sin comprimir (3.2MB total), CSS render-blocking (800ms), JavaScript no diferido (1.1s de bloqueo) y sin CDN configurado.
Paso 1: Optimización de imágenes
Convertimos todas las imágenes a WebP con compresión al 80% (sin pérdida perceptible). Implementamos srcset para servir el tamaño adecuado a cada dispositivo. Resultado: de 3.2MB a 400KB (-87%).
<img
srcset="producto-400w.webp 400w,
producto-800w.webp 800w,
producto-1200w.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1024px) 800px,
1200px"
src="producto-800w.webp"
alt="Descripción del producto"
loading="lazy"
decoding="async"
width="800" height="600"
/>Paso 2: CSS crítico y carga diferida
Extrajimos el CSS necesario para el above-the-fold (critical CSS) y lo inyectamos inline en el HTML. El resto se carga de forma asíncrona con media='print' onload. Ganancia: -800ms de render-blocking.
Paso 3: JavaScript optimizado
Aplicamos code splitting para cargar solo el JS necesario por página. Los scripts de terceros (analytics, chat, pixels) se cargan con defer o después de la interacción del usuario. Ganancia: -1.1s de bloqueo del main thread.
Paso 4: CDN y caché agresiva
Configuramos CDN global con cache-control de 1 año para assets estáticos y stale-while-revalidate para HTML dinámico. El TTFB bajó de 350ms a 45ms para usuarios en España.
La velocidad web no es una feature, es un requisito. Si tu web tarda más de 2 segundos en cargar, estás perdiendo dinero cada día que pasa.