Todos sabemos lo importante que es el rendimiento. Pero, cuando hablamos de rendimiento y de hacer que los sitios web sean "rápidos", ¿a qué nos referimos específicamente?
La verdad es que el rendimiento es relativo:
- Un sitio puede ser rápido para un usuario (en una red rápida con un dispositivo potente) y lento para otro (en una red lenta con un dispositivo de gama baja).
- Dos sitios pueden terminar de cargarse en la misma cantidad de tiempo, pero uno puede parecer que se carga más rápido (si carga el contenido de forma progresiva en lugar de esperar hasta el final para mostrar algo).
- Es posible que un sitio parezca cargarse rápidamente, pero que luego responda lentamente (o no responda en absoluto) a la interacción del usuario.
Cuando se habla de rendimiento, es importante ser preciso y hacer referencia al rendimiento en términos de métricas. Criterios objetivos que se pueden medir de manera cuantitativa, pero también es importante asegurarse de que las métricas que se miden sean útiles.
Cómo definir métricas
Históricamente, el rendimiento web se midió con el evento load. Sin embargo, aunque load es un momento bien definido en el ciclo de vida de una página, ese momento no necesariamente corresponde a nada que le importe al usuario.
Por ejemplo, un servidor podría responder con una página mínima que se "carga" de inmediato, pero que luego aplaza la recuperación de contenido o la visualización de cualquier elemento en la página hasta varios segundos después de que se activa el evento load. Técnicamente, una página de este tipo tiene un tiempo de carga rápido, pero ese tiempo no corresponde a la forma en que un usuario experimenta la carga de la página.
En los últimos años, los miembros del equipo de Chrome, en colaboración con el Grupo de trabajo de rendimiento web del W3C, trabajaron para estandarizar un conjunto de métricas y APIs nuevas que miden con mayor precisión cómo los usuarios experimentan el rendimiento de una página web.
Para garantizar que las métricas sean relevantes para los usuarios, las enmarcamos en torno a algunas preguntas clave:
| ¿Está sucediendo? | ¿Se inició correctamente la navegación? ¿El servidor respondió? |
| ¿Te resulta útil? | ¿Se renderizó suficiente contenido para que los usuarios puedan interactuar con él? |
| ¿Es utilizable? | ¿Los usuarios pueden interactuar con la página o está ocupada? |
| ¿Es encantador? | ¿Las interacciones son fluidas y naturales, sin retrasos? |
Cómo se miden las métricas
Por lo general, las métricas de rendimiento se miden de una de estas dos maneras:
- En el lab: Usa herramientas para simular la carga de una página en un entorno coherente y controlado.
- En el campo: En usuarios reales que realmente cargan la página y que interactúan con ella.
Ninguna de estas opciones es necesariamente mejor o peor que la otra. De hecho, por lo general, es recomendable usar ambas para garantizar un buen rendimiento.
En el laboratorio
Probar el rendimiento en el laboratorio es esencial cuando se desarrollan funciones nuevas. Antes de que las funciones se lancen en producción, es imposible medir sus características de rendimiento en usuarios reales, por lo que probarlas en el lab antes del lanzamiento es la mejor manera de evitar regresiones de rendimiento.
En el campo
Por otro lado, si bien las pruebas en el lab son un proxy razonable para el rendimiento, no reflejan necesariamente la experiencia que tienen los usuarios reales en tu sitio.
El rendimiento de un sitio puede variar de forma significativa según las capacidades del dispositivo del usuario y las condiciones de la red. También puede variar según si un usuario interactúa con la página (o cómo lo hace).
Las cargas de páginas tampoco siempre son deterministas. Por ejemplo, los sitios que cargan contenido o anuncios personalizados pueden tener características de rendimiento muy diferentes de un usuario a otro. Una prueba de laboratorio no capturará esas diferencias.
La única forma de saber realmente el rendimiento de tu sitio para los usuarios es medirlo mientras estos lo cargan y lo utilizan. Este tipo de medición se conoce comúnmente como supervisión de usuarios reales (RUM).
Tipos de métricas
Existen otros tipos de métricas que son relevantes para la forma en que los usuarios perciben el rendimiento.
- Velocidad de carga percibida: Indica la rapidez con la que una página puede cargar y renderizar todos sus elementos visuales en la pantalla.
- Capacidad de respuesta de la carga: Indica la rapidez con la que una página puede cargar y ejecutar cualquier código JavaScript requerido para que los componentes respondan rápidamente a la interacción del usuario.
- Capacidad de respuesta del tiempo de ejecución: Después de la carga de la página, indica qué tan rápido puede responder la página a la interacción del usuario.
- Estabilidad visual: ¿Los elementos de la página cambian de manera que los usuarios no esperan y pueden interferir en sus interacciones?
- Fluidez: ¿Las transiciones y las animaciones se renderizan a una velocidad de fotogramas coherente y fluyen de un estado al siguiente de forma fluida?
Teniendo en cuenta todos estos tipos de métricas de rendimiento, espero que quede claro que ninguna métrica es suficiente para capturar todas las características de rendimiento de una página.
Métricas importantes que debes medir
- Primer procesamiento de imagen con contenido (FCP): Mide el tiempo desde que la página comienza a cargar hasta que se renderiza en la pantalla cualquier parte del contenido de la página. (laboratorio, campo)
- Largest Contentful Paint (LCP): Mide el tiempo desde que la página comienza a cargarse hasta que se renderiza en la pantalla el bloque de texto o el elemento de imagen más grande. (laboratorio, campo)
- Interaction to Next Paint (INP): Mide la latencia de cada interacción de presión, clic o teclado que se realiza con la página y, en función de la cantidad de interacciones, selecciona la peor latencia de interacción de la página (o cercana a la más alta) como un valor único y representativo para describir la capacidad de respuesta general de una página. (laboratorio, campo)
- Total Blocking Time (TBT): Mide la cantidad total de tiempo entre el FCP y el TTI durante el cual el subproceso principal se bloqueó durante el tiempo suficiente para evitar la respuesta de la entrada. (lab)
- Cambio de diseño acumulado (CLS): Mide la puntuación acumulada de todos los cambios de diseño inesperados que ocurren entre el momento en que comienza a cargarse la página y el momento en que su estado del ciclo de vida cambia a oculto. (laboratorio, campo)
- Tiempo hasta el primer byte (TTFB): Mide el tiempo que tarda la red en responder a una solicitud del usuario con el primer byte de un recurso. (laboratorio, campo)
En algunos casos, se agregarán métricas nuevas para cubrir las áreas faltantes, pero en otros casos, las mejores métricas son aquellas que se adaptan específicamente a tu sitio.
Métricas personalizadas
Las métricas de rendimiento que se analizaron anteriormente son útiles para comprender de forma general las características de rendimiento de la mayoría de los sitios de la Web. También son útiles para tener un conjunto común de métricas para que los sitios comparen su rendimiento con el de sus competidores.
Sin embargo, puede haber ocasiones en las que un sitio específico sea único de alguna manera y requiera métricas adicionales para capturar el panorama completo del rendimiento. Por ejemplo, la métrica LCP está diseñada para medir cuándo se termina de cargar el contenido principal de una página, pero puede haber casos en los que el elemento más grande no forme parte del contenido principal de la página y, por lo tanto, es posible que la LCP no sea relevante.
Para abordar estos casos, el grupo de trabajo de rendimiento web también estandarizó las APIs de nivel inferior que pueden ser útiles para implementar tus propias métricas personalizadas:
- API de User Timing
- API de Long Tasks
- API de Long Animation Frames
- API de Element Timing
- API de Navigation Timing
- API de Resource Timing
- Tiempo del servidor
Consulta la guía sobre Métricas personalizadas para aprender a usar estas APIs y medir las características de rendimiento específicas de tu sitio.