6 métricas para evaluar el rendimiento de tu sitio web

El trabajo de quien gestiona un sitio web va más allá de mantenerlo actualizado. Es necesario seguir de cerca su rendimiento para evaluar si está cumpliendo los objetivos propuestos. 

Para ello, hay métricas específicas que debes analizar y estudiar minuciosamente. Descubre ahora 6 métricas que puedes utilizar para evaluar el rendimiento de tu sitio web. 

1 - Largest Contentful Paint (LCP)

Medir la velocidad de carga de un contenido en una página web y el tiempo que tarda en mostrarse a los usuarios es muy importante, pero también representa un desafío para los desarrolladores. 

No siempre la métrica más compleja es la mejor. Una de las formas más precisas de medir la carga de un contenido de una página es comprobar cuándo se renderizó el elemento más grande.

La métrica Largest Contentful Paint muestra en la ventana gráfica (viewport) el tiempo de renderizado de ese elemento más grande. 

2 - First Contentful Paint

Esta métrica no se refiere únicamente al tiempo de respuesta de un sitio web, sino que se centra en la experiencia del usuario y en lo primero que este percibe en el sitio, no en lo que se carga en segundo plano. 

Al optimizar la primera visualización de contenido de tu sitio web, además de acelerar el tiempo de carga, aumentas la clasificación de velocidad de la página y muestras a los visitantes que sus solicitudes se están procesando y que la carga no se ha detenido. 

El First Contentful Paint de tu sitio web se produce cuando el navegador renderiza el primer elemento DOM de la página, lo que incluye imágenes, elementos de lienzo (no blancos) o bloques de texto. 

En términos más sencillos, ocurre cuando el usuario puede ver que alguna parte de la página cambia, y muchas veces esto aparece como una barra de encabezado o una imagen de fondo. Puede que este elemento no sea lo primero que se renderiza, pero será lo primero que el usuario podrá ver, por lo que es fundamental para la UX de tu sitio web. 

3 - Time to Interactive

Esta es una métrica de rendimiento que mide la capacidad de respuesta y carga de tu sitio web. Ayuda a identificar cuándo una página parece interactiva, pero en realidad no lo es. Un TTI rápido ayuda a garantizar que la página sea usable. 

Esta métrica es importante porque se centra en el usuario y mide la rapidez con que los visitantes pueden interactuar plenamente con tu página. Para los visitantes de un sitio web, un TTI lento puede dar la impresión de que el sitio no responde, está averiado o no funciona. 

4 - Speed Index

Esta métrica mide la rapidez con que se muestra el contenido durante la carga de la página. Depende del tamaño de la ventana de visualización del navegador y no es un hito en la línea de tiempo de carga de tu página, lo que la diferencia de otras métricas como First Contentful Paint (FCP) o Largest Contentful Paint (LCP).  

Representa el resultado de un cálculo que refleja la experiencia de los visitantes en la página, mediante un análisis cuadro por cuadro del comportamiento de carga de la página. 

Speed Index está muy relacionado con otros tiempos de carga de página, lo que lo convierte en una referencia general útil para evaluar el rendimiento de tu sitio web en su totalidad. 

5 - Total Blocking Time

Total Blocking Time es una de las métricas de rendimiento de Lighthouse y se introdujo en 2020. Cuantifica la capacidad de respuesta de la carga de tu página ante las interacciones del usuario. En otras palabras, mide el tiempo total durante el cual tu página web está bloqueada e impide que el usuario interactúe con ella. 

El navegador utiliza lo que se denomina hilo principal para analizar HTML, construir el DOM, ejecutar CSS y JavaScript, procesar eventos del usuario y realizar otras tareas importantes.

Cuando cualquiera de estas tareas tarda más de 50 ms, se considera que el hilo principal está "bloqueado", porque el navegador no puede interrumpir una tarea en curso.

Si el hilo principal está bloqueado, tu página no podrá responder a las interacciones del usuario, como tocar la pantalla, pulsar teclas o hacer clic con el mouse. El tiempo que excede los 50 ms se considera el tiempo de bloqueo individual de esa solicitud.

La suma de todos estos tiempos de bloqueo es el Total Blocking Time de tu página. 

6 - Cumulative Layout Shift

También introducida en 2020 por Lighthouse, Cumulative Layout Shift mide los cambios inesperados de los elementos web mientras se renderiza la página. Esto se cuantifica como una puntuación agregada de todos los cambios de diseño individuales de tu página. Es una de las métricas que componen las Core Web Vitals de Google.

Un sitio web con un CLS bajo muestra una página estable, que no altera los elementos y garantiza una carga uniforme y predecible de todo el contenido del sitio. 

En cambio, cuando se carga una página, algunos elementos cambian inesperadamente, lo que afecta la interacción del usuario. Estos elementos pueden ser botones, imágenes, videos, formularios de contacto u otros. 

Google PageSpeed Insights

Además de las 6 métricas que mencionamos arriba, Google PageSpeed Insights también es de gran ayuda para analizar y orientar las optimizaciones necesarias. Clasifica la velocidad del sitio con una puntuación que va de 1 a 100. Cuanto mayor sea la puntuación, y a partir de 80 puntos, se considera una buena nota según los criterios de Google.   

Por lo tanto, queda claro lo importante que es analizar tu sitio web y seguir periódicamente estas métricas para garantizar la mejor experiencia a los visitantes de tu página.