De 6 segundos a 0.6 segundos de carga. No es magia — es arquitectura. Esto es lo que hicimos en la web de Quintaesencia y cómo puedes replicarlo.
📊 El problema: 6 segundos de espera
Cuando lanzamos la primera versión de la web de Quintaesencia, el tiempo de carga era de 6.148ms. Para una web de videojuego, eso es inaceptable. Los jugadores no esperan — se van.
El diagnóstico fue claro: imágenes sin optimizar, JavaScript bloqueante, sin caché, sin compresión. El sitio cargaba 1.076KB de recursos en cada visita.
Estado inicial:
- FCP (First Contentful Paint): 6.148ms
- Tamaño total: 1.076 KB
- Lighthouse: ~60 puntos
- Bounce rate: 50%
🖼️ Paso 1: Imágenes WebP
Las imágenes representaban el 60% del peso total. La solución fue convertir todo a WebP con compresión agresiva pero sin pérdida visual perceptible.
- Portada: 223KB → 119KB (-47%)
- Mapamundi: 177KB → 77KB (-56%)
- Icono PNG → WebP: 52KB → 6.9KB (-87%)
Herramienta usada: cwebp -q 65 -m 6. Ahorro total en imágenes: 421KB.
⚡ Paso 2: JavaScript diferido
El sistema de audio (orbe-audio-master.js + orbe-resonancia-mini.js) sumaba 123KB de JavaScript que bloqueaba el renderizado inicial. La solución: Code Splitting.
Creamos un loader que solo carga el audio cuando el usuario interactúa con el reproductor. El resultado: esos 123KB no bloquean el FCP.
Antes vs Después del JS:
- Antes: 123KB bloqueando el render
- Después: 0KB en FCP, carga bajo demanda
- Mejora en FCP: -200ms
🔄 Paso 3: Service Worker
Para las visitas repetidas, implementamos un Service Worker con estrategia Cache-First para assets estáticos. El resultado: en la segunda visita, el FCP baja de 624ms a 150ms.
La clave es cachear solo los assets que no cambian (imágenes, CSS, fuentes) y nunca cachear el HTML, que siempre debe ser fresco desde el servidor.
📈 Resultados finales
Estado final:
- FCP primera visita: 624ms (-90%)
- FCP visitas repetidas: 150ms (-98%)
- Tamaño total: 655KB (-39%)
- Lighthouse: 90-95 puntos
- Bounce rate: 18% (antes 50%)
- TTFB: 281ms (antes 534ms)
💡 Las 3 lecciones clave
- Las imágenes son lo primero. Siempre. Representan la mayor parte del peso y tienen el mayor impacto en el FCP.
- El JavaScript bloqueante mata la experiencia. Todo lo que no sea crítico para el render inicial debe cargarse de forma diferida.
- Mide antes de optimizar. Sin Lighthouse y sin métricas reales, estás optimizando a ciegas.
El proceso completo llevó 6 horas de trabajo. El impacto en conversión fue inmediato: más usuarios completando la descarga del juego, menos abandonos, mejor posicionamiento SEO. La optimización web no es opcional — es parte del producto.
