Índice de velocidad: qué es y cómo optimizar su sitio web para él

El índice de velocidad (SI) es una métrica interesante cuando se considera la velocidad de la página. Es absolutamente una indicación del rendimiento de su página, pero es completamente diferente de otras métricas centradas en el usuario, como First Contentful Paint y Largest Contentful Paint. SI indica la rapidez con la que su sitio se carga en la mitad superior de la página. O para decirlo de otra manera, cuando todo el contenido dentro de la ventana gráfica del usuario es completamente visible. Al mirar los tiempos de carga de su página, es probable que no sea penalizado o recompensado por su índice de velocidad. Esa no es razón para ignorarlo. Como métrica única, es una de las pocas que abarca muchas otras métricas y puede brindarle una idea sólida de la velocidad, la eficiencia y el rendimiento generales de su sitio.

Suscríbete a nuestro canal de Youtube

¿Qué es el índice de velocidad?

Lighthouse, la columna vertebral de Google para PageSpeed ​​Insights, analiza múltiples métricas de rendimiento para calificar su sitio. El índice de velocidad (SI) es uno de esos, y el informe mostrará el tiempo en segundos en lugar de milisegundos como ocurre con otras métricas. Google define SI como "la rapidez con la que se rellenan visiblemente los contenidos de una página".

Bastante sencillo, ¿verdad?

Speed ​​Index no tiene en cuenta los scripts de back-end u otras cargas no pintadas. Sin embargo, sí lo afectan. SI es simplemente una medida de cuánto tiempo les toma a los usuarios ver su contenido en su totalidad. Ese es el truco. En su totalidad . Mientras que otras métricas, como LCP, se miden en el momento en que se muestra la mayor parte del contenido, Speed ​​Index tiene en cuenta todo el contenido que debería mostrarse.

Esta no es una medida de la velocidad general de la página. Eso tiene en cuenta cuándo el navegador procesa todos los elementos. Incluyendo scripts y elementos no visibles que afectan el rendimiento. Sin embargo, si desea un buen indicador de cuándo sus usuarios perciben que la página está completamente cargada , SI es la métrica a seguir. Debido a lo centrado en el usuario que está, SI puede ser una buena indicación del estado general del sitio, así como una línea de base para la experiencia del usuario (UX) de su sitio.

Cómo medir el índice de velocidad

Al igual que con la mayoría de las métricas de rendimiento del sitio, una de las principales herramientas a utilizar es PageSpeed ​​Insights de Google. Esta herramienta también es una de las más particulares en los resultados que arroja. Es relativamente crítico incluso con los sitios mejor organizados. PageSpeed ​​Insights proporciona con mayor frecuencia datos de laboratorio para su sitio, basados ​​en un total de los últimos 28 días de recopilación. Sin embargo, si tiene suficientes visitantes que transmiten información a Google a través de Chrome, también puede obtener datos de campo del mundo real del informe. Sin embargo, no todos los sitios pueden obtener esto.

Como puede ver, la velocidad de muchas de estas métricas está en verde. Esto indica que son "buenos". Obviamente, aquí es donde desea su sitio. Sin embargo, el índice de velocidad es de 4.0 segundos y es naranja. Eso es mucho tiempo para que el usuario espere a ver todo en la mitad superior de la página.

¿Qué es un buen índice de velocidad?

PageSpeed ​​Insights utiliza las siguientes puntuaciones para clasificar el índice de velocidad de su sitio y codificarlo con colores en consecuencia:

• Verde (bueno): de 0 a 3,4 segundos
• Naranja (moderado): 3,4 a 5,8 segundos
• Rojo (lento): más de 5,8 segundos

Como dijimos antes, PageSpeed ​​Insights es muy crítico en sus mediciones. Si está en naranja o rojo, es posible que desee utilizar una herramienta como GTmetrix o Pingdom's Speed ​​Test para ver qué muestran sus datos en tiempo real. Creemos que es mejor probar su sitio utilizando varias herramientas en diferentes momentos para obtener la mejor imagen del rendimiento general.

Cómo optimizar su puntaje de índice de velocidad

Puede seguir una serie de pasos para optimizar su puntaje de índice de velocidad. Si ha intentado optimizar su sitio para cualquier tipo de aumento de la velocidad de la página (o, técnicamente, disminución), es probable que de alguna manera también haya afectado su puntaje de SI. Le mostraremos algunas formas de orientar específicamente su tiempo de SI para que su página se cargue lo más rápido posible para brindar a sus visitantes la mejor experiencia posible.

Reducir los recursos de bloqueo de renderizado

Más específicamente, reducir el tiempo de ejecución de JavaScript es una de las mejores formas de aumentar su puntaje de índice de velocidad. Los recursos de bloqueo de procesamiento son scripts y código que evitan que otras partes de su sitio web se carguen al tener prioridad. En lugar de que el sitio cargue diferentes elementos al mismo tiempo, algunos elementos pausan todos los demás hasta que terminan.

Y eso reduce el índice de velocidad de su sitio. Para evitar esto, puede aplazar cualquier número de scripts y bits de código que se carguen hasta después de que los elementos visibles se hayan pintado en el DOM. Identificar a los culpables es relativamente fácil, ya que puede usar las herramientas de desarrollo de Chrome para ver su sitio mientras se carga, y la herramienta le indicará qué es lo que detiene la representación de los elementos.

Además, los usuarios de WordPress pueden usar un complemento de almacenamiento en caché (o un complemento de optimización del sitio) como W3 Total Cache o WP Rocket para manejar esto. A menudo, estos complementos tienen un interruptor simple para aplazar los recursos de bloqueo de procesamiento.

Los usuarios de Divi también tienen una gran ventaja para bloquear dichos recursos, ya que las opciones del tema le permiten alternar el aplazamiento de CSS que bloquea el renderizado, así como los scripts jQuery. Además de eso, las características de CSS crítico del tema dividen grandes trozos de código que pueden retrasar el contenido de su sitio y hacer que se carguen mucho más rápido de lo que lo harían de otra manera. Si bien algunos de estos son conmutadores, Divi habilita automáticamente otros. La instalación de Divi debería ayudar a su puntaje de SI inmediatamente en la mayoría de los casos.

Reducir el trabajo del hilo principal de su sitio

Al igual que los recursos de bloqueo de procesamiento, puede bloquear el rendimiento de su sitio cargando diferentes elementos que consumen mucha potencia de procesamiento de su servidor. Reducirlos puede ayudar a impulsar el sitio al navegador más rápidamente.

La solución más simple para esto es dejar de usar tanto JavaScript . GTmetrix lo expresa mejor:

En general, cuanto más JavaScript tenga su página, más largo será el proceso de análisis / compilación; lo que resulta en una espera más larga para que los usuarios vean el contenido e interactúen con su página.

Reconocemos que esto podría no ser fácil. Ha diseñado el sitio para que funcione de cierta manera. Sin embargo, es posible que haya código no utilizado que puede eliminar y es posible que pueda optimizar cualquier JavaScript de terceros que esté cargando en su sitio. Además, minimice su JavaScript.

Además de la auditoría de JS, asegúrese de minimizar su CSS y HTML. Esto aliviará aún más la tensión del hilo principal. Los complementos de optimización y almacenamiento en caché a menudo también tienen estas opciones.

Los usuarios de Divi, una vez más, tienen una ventaja aquí, ya que el tema minimiza y divide automáticamente CSS y JavaScript en trozos pequeños para un rendimiento más rápido, eliminando la necesidad de un montón de enfoque de su hilo principal.

Índice de velocidad Preguntas frecuentes

Speed ​​Index es un concepto simple que tiene ramificaciones complejas. Queremos responder algunas preguntas frecuentes sobre SI para ayudarlo a optimizar su sitio web de la mejor manera posible.

¿Cómo encaja el índice de velocidad en el rendimiento general de mi sitio web?

El índice de velocidad, como métrica única, es una muy buena indicación del rendimiento de su sitio web en varias áreas diferentes. Debido a que tiene en cuenta el contenido completamente visible en la mitad superior de la página, puede usarlo como un indicador no solo de la carga percibida por el usuario, sino también de una estimación aproximada de lo que está haciendo su sitio en varias áreas diferentes.

En realidad, no le brinda mucha información por sí solo en términos de lo que está haciendo su sitio web. Puede verse como una métrica general que, como GTmetrix dice, lo convierte en "un punto de referencia general útil para evaluar el rendimiento de su sitio web en su totalidad".

¿Debo concentrarme en mi puntaje de índice de velocidad específicamente?

Probablemente no, no.

Si bien es muy útil comparar su sitio, centrarse en otros problemas más granulares como First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to First Byte (TTFB) y First Input Delay (FID) son mucho más importantes. más importante. Puede tomar cualquier cantidad de pasos para mejorarlos individualmente, lo que a su vez mejorará su índice de velocidad. Y cuando se toma como un punto de referencia general, puede ver qué tan bien están funcionando sus optimizaciones a través de SI.

Conclusión

La optimización de la velocidad de la página es una batalla interminable en la que luchan los propietarios de sitios web. Debe encontrar el equilibrio entre usabilidad, experiencia y rendimiento, y encontrar ese equilibrio puede ser difícil. Cuando las pruebas arrojan tantos puntajes diferentes en tantos elementos diferentes, puede ser difícil saber dónde poner su energía y recursos. Speed ​​Index puede ayudar con eso, como una única métrica que le muestra qué tan bien le está yendo a su sitio mientras ajusta otras partes más específicas del rendimiento de su sitio.

¿Qué ha hecho para optimizar el índice de velocidad de su sitio web a lo largo de los años?

Imagen destacada del artículo por HappyDrawing / shutterstock.com