De 5 segundos a 0.5: anatomía de una optimización
Una web que tardaba 5 segundos en cargar ahora carga en medio segundo. Este es el proceso detallado de cómo lo conseguimos.
El punto de partida
La web cargaba en 5.2 segundos según Lighthouse. En móvil con 3G, superaba los 12 segundos. Largest Contentful Paint de 4.8 segundos. Core Web Vitals todos en rojo.
El cliente sabía que era lento pero no sabía por qué. Habían probado cambiar de hosting sin mejora significativa. Pensaban que necesitaban rehacer la web desde cero.
No era necesario.
El diagnóstico
Analizamos el waterfall de carga y encontramos los culpables:
Una imagen hero de 3.2MB en formato PNG sin optimizar.
Doce fuentes web diferentes, algunas usadas en un solo lugar.
JavaScript de terceros que bloqueaba el renderizado: analytics, chat widget, pixel de publicidad, tres scripts de marketing que ya no usaban.
Sin lazy loading en imágenes bajo el fold.
CSS de un framework completo cuando solo usaban un 8% de los estilos.
Fase 1: Las ganancias rápidas
Convertimos imágenes a WebP con compresión adecuada. La imagen hero pasó de 3.2MB a 89KB. Esta sola acción redujo el tiempo de carga en 1.8 segundos.
Activamos lazy loading para imágenes fuera del viewport inicial. Menos recursos que cargar antes del LCP.
Eliminamos los scripts de terceros obsoletos. Tres de ellos ni siquiera estaban conectados a cuentas activas.
Tiempo de carga después de fase 1: 2.9 segundos. Mejora del 44%.
Fase 2: Optimización de fuentes
Redujimos de 12 fuentes a 3. Las otras nueve eran variaciones que podían cubrirse con CSS o que simplemente no se justificaban.
Implementamos font-display: swap para que el texto sea visible inmediatamente con fuentes del sistema, mientras cargan las personalizadas.
Añadimos preload para las fuentes críticas usadas above the fold.
Tiempo de carga después de fase 2: 1.8 segundos.
Fase 3: JavaScript crítico
Movimos scripts no esenciales al final del body con defer.
El chat widget solo se carga después de que el usuario interactúa con la página, no en la carga inicial.
Analytics se carga de forma asíncrona sin bloquear nada.
Tiempo de carga después de fase 3: 1.1 segundos.
Fase 4: CSS crítico
Extrajimos el CSS necesario para el contenido above the fold y lo inlineamos en el head.
El resto del CSS se carga de forma asíncrona después del renderizado inicial.
Eliminamos CSS no utilizado. El framework completo pesaba 180KB, el CSS real necesario pesaba 23KB.
Tiempo de carga final: 0.52 segundos.
El impacto en negocio
El bounce rate en móvil bajó un 31%.
Las páginas por sesión aumentaron un 18%.
Las conversiones móviles aumentaron un 24%.
El cliente reportó que las quejas de usuarios sobre lentitud desaparecieron completamente.
Lo que aprendimos
La mayoría de problemas de rendimiento son acumulación de decisiones pequeñas. Nadie añadió 5 segundos de carga de golpe. Se fueron sumando con cada imagen sin optimizar, cada script añadido "por si acaso", cada fuente decorativa.
Las soluciones suelen ser mundanas. No hace falta tecnología revolucionaria, hace falta disciplina básica aplicada consistentemente.
El hosting casi nunca es el problema. Cambiar de hosting es lo primero que muchos prueban y casi nunca es donde está el problema real.
De 5.2 segundos a 0.52 segundos. Una mejora del 90% sin cambiar diseño, sin migrar tecnología, sin rehacer nada desde cero.
Solo aplicar sistemáticamente buenas prácticas que deberían haberse aplicado desde el principio.
El rendimiento no es magia. Es atención al detalle, medición constante, y voluntad de eliminar lo que no aporta.