Speed Index: qué mide y cómo mejorarlo

Por qué importa

Dos páginas pueden terminar de cargar a la vez y dar sensaciones muy distintas: una muestra casi todo desde el principio y la otra se queda en blanco hasta el final. El Speed Index recoge esa diferencia, que es la que percibe el visitante.

No es una Core Web Vital ni un dato que Google use directamente para posicionar, y pesa un 10 % en la puntuación de rendimiento de Lighthouse; por eso le damos poco peso en el informe. Aun así, un Speed Index alto suele delatar problemas que afectan también al LCP: CSS o JavaScript que bloquean el renderizado, fuentes web lentas o un servidor que tarda en responder.

Cómo lo comprueba Posiciona

Tomamos el Speed Index que mide Lighthouse 13 en la prueba móvil de PageSpeed Insights y usamos su nota de 0 a 100: unos 90 puntos con 3,4 segundos, 50 con 5,8 segundos y menos a partir de ahí. Si pasa de 3,4 segundos, te recomendamos revisar el orden en que se cargan los recursos. Es un check de peso menor en la nota de velocidad.

En la nota de Velocidad esta comprobación cuenta como “detalle” (peso 1 de 5).

Cómo solucionarlo

Reduce el CSS que bloquea el renderizado: incluye en el <head> solo el CSS imprescindible para la primera pantalla (el llamado CSS crítico) y carga el resto después.
Añade defer a los scripts que no hagan falta para pintar la página, sobre todo a los que están en el <head>.
Precarga la fuente principal con <link rel="preload"> y usa font-display: swap para que el texto se vea aunque la fuente aún no haya llegado. Limita el número de familias y grosores.
Mejora el tiempo de respuesta del servidor con caché de página y compresión: todo empieza cuando llega el HTML.
Evita pantallas de carga y animaciones de entrada en la parte superior: retrasan el momento en que se ve el contenido.

Precargar la fuente principalHTML

<link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>

En WordPress

WP Rocket, LiteSpeed Cache y Autoptimize pueden generar el CSS crítico o eliminar el CSS sin usar, y aplazar el JavaScript. Activa las opciones de una en una y revisa que la web se sigue viendo bien.
Si tu tema carga fuentes de Google, alójalas en tu propio servidor (muchos temas y plugins de rendimiento lo permiten) y quita los grosores que no uses.

En Shopify

En Shopify, en la configuración de tipografía del tema (Tienda online → Temas → Personalizar), usa pocas familias y estilos: cada uno es una descarga más.
Si tu tema tiene animaciones de aparición al hacer scroll, valora desactivarlas en la configuración del tema, al menos para la primera pantalla.

Preguntas frecuentes

¿Qué diferencia hay entre Speed Index y LCP?

El LCP mide un único momento: cuándo aparece el elemento más grande. El Speed Index mide cómo progresa toda la pantalla durante la carga, así que premia a las páginas que muestran contenido pronto aunque tarden en terminar. Suelen ir de la mano; si el Speed Index es malo y el LCP bueno, busca elementos que aparecen tarde alrededor del principal.

¿Qué es un buen Speed Index?

En la prueba móvil de Lighthouse, con 3,4 segundos o menos la nota ya es de 90 o más, y con 5,8 segundos baja a 50. En la prueba de ordenador los umbrales son más exigentes, porque la conexión y el procesador simulados son más rápidos. Compara siempre resultados de la misma prueba: móvil con móvil y ordenador con ordenador.