Aprender
Speed Index: qué significa y cómo hacer que las páginas parezcan más rápidas
Speed Index muestra lo rápido que se llena la parte visible. Aprende a mejorar el progreso visual, no solo el tiempo de carga final.
Ejecuta una auditoría nueva en DomainLens y usa el informe como lista de prioridades.
Qué mide Speed Index
Speed Index estima lo rápido que el viewport visible se vuelve visualmente completo durante la carga. Un valor más bajo significa que el usuario ve contenido útil antes y la página se siente más rápida, incluso antes de que todos los assets terminen de descargarse.
A diferencia de una marca única como FCP o LCP, Speed Index observa el progreso visual a lo largo del tiempo. Es útil para detectar páginas que revelan contenido demasiado lento porque CSS, imágenes, JavaScript o scripts de terceros bloquean la zona above the fold.
Por qué empeora Speed Index
- Archivos CSS grandes o estilos que bloquean el renderizado y retrasan el primer layout visible.
- Imágenes hero y medios above the fold que cargan tarde o con tamaño incorrecto.
- JavaScript pesado que bloquea renderizado y deja el viewport vacío o incompleto.
- Respuesta lenta del servidor y caché débil que retrasan todas las peticiones posteriores.
- Scripts de terceros que compiten con recursos críticos al inicio.
Cómo mejorar Speed Index
Prioriza el primer viewport. Mantén simple el layout inicial, inserta solo el CSS crítico, precarga la imagen o fuente más importante y difiere todo lo que no sea necesario para la primera pantalla. El objetivo es progreso visible constante, no solo un evento load más rápido.
Reduce la presión del main thread eliminando JavaScript sin usar, dividiendo bundles, retrasando tags de terceros y evitando renderizado cliente costoso para contenido que podría llegar como HTML. Combínalo con redimensionado de imágenes, formatos modernos, caché y CDN.
Errores comunes
- Mejorar el peso total de la página mientras el primer viewport sigue esperando CSS bloqueante.
- Cargar en diferido imágenes above the fold que deberían tener alta prioridad.
- Enviar una gran app JavaScript antes de renderizar texto y layout básicos.
- Probar solo una ejecución desktop rápida y perder el progreso visual lento en móvil.
- Tratar Speed Index separado de LCP, FCP y TTFB en vez de leerlos juntos.
Cómo validar la mejora
Compara filmstrips o capturas antes y después, no solo la puntuación. El primer viewport debería llenarse antes y con más fluidez. Luego revisa si FCP, LCP, TTFB y oportunidades de renderizado bloqueante mejoraron en la misma dirección.
Tras desplegar, vuelve a ejecutar DomainLens y revisa primero los datos Lighthouse móviles. Si Speed Index mejora pero LCP sigue mal, continúa con el elemento LCP específico y las mejoras de respuesta del servidor.