Introducción
El rendimiento en las páginas web es un aspecto crucial del desarrollo web que se enfoca en la velocidad con la que se cargan las mismas, así como en qué tanto pueden tardar en responder ante las interacciones del usuario. Optimizar un sitio web para mejorar su rendimiento hace que los usuarios tengan una experiencia más fluida y eficiente.
Este tipo de mejoras no solo influye en una mejor experiencia para el usuario, si no que puede servir para cumplir el propósito que tiene tu página, que podría ser aumentar la tasa de conversion, fomentar participaciones o simplemente brindar información de manera más efectiva, por lo que un rendimiento óptimo en las páginas web es fundamental.
Tabla de contenidos
- Importancia de la velocidad
- Métricas
- Como se miden las métricas
- Tipos de métricas
- Métricas para medir el rendimiento
- Herramientas de evaluación en laboratorio
- Conclusiones
Importancia de la velocidad
¿Por que deberíamos darle tanta importancia a la velocidad o tiempo de respuesta a nuestras interacciones en las páginas web? A medida que pasa el tiempo, aumenta la cantidad de usuarios usuarios que dependen de la web para acceder a servicios o contenido en internet. Estos usuarios cada vez son más exigentes, por lo que en todo momento estarán haciendo comparaciones todo el rato con la competencia o con aplicaciones que usan en el día a día.
El rendimiento juega un papel fundamental en el éxito va a tener cualquier negocio web. Cualquier página que cargue rápido y reaccione rápido ante las interacciones del usuario va a tener más éxito que una que no lo haga. Esta velocidad de carga también influye en la clasificación dentro de los motores de búsqueda.
Una velocidad alta influye directametne en la retención de usuarios de una página web. Esta retención es crucial a la hora de aumentar las conversiones dentro de la página web. ¿Que entendemos por conversión? Una conversión en una página web vendría a ser el logro de un objetivo específico que el propietario del sitio web desea que los visitantes realicen. Por ejemplo, en un e-commerce vendría a ser que el usuario haga una compra a través de su sitio web, o que en una página de noticias, un usuario proporcione su dirección de correo electrónico para acceder a su contenido o actualizaciones.
Por aquí podemos apreciar la imagen de una tabla sacada de una publicación de Cloudflare del ratio de conversión que se da en base a la velocidad de carga de una página.
A pesar de que hay que tener muy en cuenta la tasa de conversión de usuarios, no es el único factor que se ve afectado por el rendimiento. Es un aspecto fundamental de una buena experiencia de usuario.
Cuando una página comienza a cargar, hay un período de tiempo en el que los usuarios esperan a que aparezca el contenido. Hasta que esto sucede, no hay ninguna interacción con la página web. Esta falta de experiencia es breve en conexiones rápidas. Sin embargo, en conexiones más lentas, los usuarios se ven obligados a esperar. Pueden surgir más desafíos para los usuarios a medida que los recursos de la página llegan lentamente.
Cuando los sitios web envían grandes volúmenes de código, los navegadores deben consumir megabytes del plan de datos del usuario para descargarlo. Los dispositivos móviles, en especial, tienen limitaciones de CPU y memoria. Esto puede ocasionar problemas de rendimiento y, considerando el comportamiento humano, las personas solo soportan condiciones desfavorables en un sitio web por un tiempo limitado antes de abandonarlo.
Métricas
Tradicionalmente, en rendimiento en las páginas se ha evaluado mediante el evento de load, que se emite cuando la página ha cargado en su totalidad (css, scripts, iframes, imágenes, …etc). Sin embargo, aunque la carga es un momento bien definido dentro del ciclo de vida de una página, no necesariamente coincide con lo que afecta al usuario.
Podría darse el caso de que un servidor responda con una página que se «carga» de inmediato, pero luego retrasa la obtención y visualización del contenido hasta varios segundos después de que se inicie el evento de carga. Aunque esta página podría tener técnicamente un tiempo de carga rápido, no reflejaría la experiencia real del usuario al cargar la página.
En los últimos años, los miembros del equipo de Chrome, en colaboración con el Grupo de Trabajo de Performance Web del W3C, han estado trabajando para estandarizar un conjunto de nuevas APIs y métricas que miden de manera más precisa cómo los usuarios experimentan la performance de una página web.
Cómo se miden las métricas
Las métricas de rendimiento se miden generalmente de dos maneras:
- En el laboratorio: se hace uso de herramientas para simular una carga de página en un entorno consistente y controlado.
- En el campo: con usuarios reales que cargan e interactúan con la página.
Dentro de estas dos opciones no hay una mejor que la otra. Normalmente, para garantizar un buen rendimiento se utilizan ambas.
En el laboratorio
Es fundamental evaluar las características de rendimiento de nuevas funcionalidades antes de su lanzamiento en producción, ya que resulta imposible medirlas en usuarios reales hasta entonces. Por ello, realizar pruebas de rendimiento en laboratorio antes de la publicación garantiza la detección y prevención de posibles regresiones en el rendimiento.
Esta evaluación se puede hacer con diferentes herramientas como Lighthouse de Google u otras que mencionaremos en una sección dedicada a ello.
En el campo
Por otro lado, si bien probar en el laboratorio es un buen indicador del rendimiento, no necesariamente refleja cómo todos los usuarios experimentan su sitio en la realidad.
El rendimiento de una página web puede variar drásticamente por diversos motivos, como podrían ser las capacidades del dispositivo que esté utilizando un usuario o las condiciones de su red. También puede variar en base a como esté interactuando el usuario con la página.
Además, las cargas de página pueden ser no deterministas. Por ejemplo, sitios web que muestran contenido personalizado o anuncios pueden presentar variaciones significativas en el rendimiento de un usuario a otro. Las pruebas de laboratorio no pueden capturar esas diferencias.
La única forma de saber realmente cómo se comporta su sitio para sus usuarios es medir su rendimiento mientras esos usuarios lo cargan e interactúan con él. Este tipo de medición se conoce comúnmente como Monitoreo de Usuarios Reales o RUM por sus siglas en inglés.
Tipos de métricas
Hay diferentes tipos de métricas que tienen bastante importancia en cómo los usuarios perciben el rendimiento, la siguiente lista muestra algunas de ellas.
- Velocidad de carga percibida: qué tan rápido puede una página cargar y renderizar todos sus elementos visuales en la pantalla.
- Responsividad de carga: qué tan rápido puede una página cargar y ejecutar cualquier código JavaScript necesario para que los componentes respondan rápidamente a la interacción del usuario.
- Responsividad en tiempo de ejecución: después de la carga de la página, qué tan rápido puede la página responder a la interacción del usuario.
- Estabilidad visual: examina si los elementos de la página se mueven de formas inesperadas para los usuarios, potencialmente causando interferencias con sus interacciones.
- Suavidad: qué tan fluido y con un frame rate se dan las transiciones y animaciones.
Métricas para medir el rendimiento
En este apartado se hablará de las métricas que nos ayudan a medir los aspectos más importantes del rendimiento en nuestras páginas web, pero existen más.
First Contentful Paint (FCP)
Mide el tiempo desde que la página comienza a cargarse hasta que se renderiza el primer elemento visible de contenido de la página en la pantalla.
¿Que FCP podría considerarse bueno? Para garantizar una buena experiencia de usuario, una página web debería tener un FCP de 1.8 segundos o menos.
Largest Contentful Paint (LCP)
Mide el tiempo desde que la página comienza a cargarse hasta que se renderiza el bloque de texto o imagen más grande en la pantalla. Se pueden ver los elementos que se tienen en cuenta para el cálculo de este tiempo en Largest Contentful Paint API.
¿Que LCP podría considerarse bueno? Para garantizar una buena experiencia de usuario, una página web debería tener un LCP de 2.5 segundos o menos.
En web.dev hay publicada una guía muy interesante en la que se habla de como optimizar el LCP.
Interaction to Next Paint (INP)
Mide la latencia de cada toque, clic o interacción con el teclado realizada en la página durante su tiempo de vida, y, en función del número de interacciones, selecciona la peor latencia de interacción de la página (o cerca de la más alta) como un valor único y representativo para describir la capacidad de respuesta general de una página.
Un INP bajo significa que la página es consistente a la hora de responder rápidamente a la gran mayoría de interacciones de usuario.
Es normal que haya interacciones que tarden más que otras, pero especialmente para las que tienen unas interacciones más complicadas, es importante que el usuario reciba algún tipo de feedback de que algo está pasando. El tiempo hasta que se pinte lo siguiente es la oportunidad para realizar esto.
El objetivo que se pretende midiendo el INP es minimizar el tiempo que pasa desde que el usuario inicia una interacción hasta que un frame es pintado, para todas o casi todas las interacciones que el usuario realiza.
¿Que INP podría considerarse bueno? Para garantizar una buena experiencia de usuario, una página web debería tener un INP de 200 milisegundos o menos.
En web.dev hay publicada una guía muy interesante en la que se habla de como optimizar el INP.
Total Blocking Time (TBT)
Es una métrica que cuantifica el tiempo total en el que la página está bloqueada para responder a las interacciones del usuario durante la carga inicial.
Mide el tiempo total después del First Contentful Paint (FCP) en el que el hilo principal estuvo bloqueado lo suficiente — Se considera como bloqueado cuando tarda en ejecutar una tarea más de 50 milisegundos — como para evitar respuestas a la entradas del usuario. Un TBT bajo ayuda a garantizar que la página sea utilizable.
Se trata de una métrica que debería ser medida en el laboratorio. La mejor manera de medir el TBT es con una auditoría de rendimiento de Lighthouse.
¿Que TBT podría considerarse bueno? Para garantizar una buena experiencia de usuario, una página web debería tener un TBT de 200 milisegundos o menos.
Cumulative Layout Shift (CLS)
Mide la puntuación acumulativa de todos los cambios de diseño inesperados que ocurren entre el inicio de la carga de la página y cuando su estado de ciclo de vida cambia a oculto. Un CLS bajo ayuda a garantizar que la página sea agradable.
Los cambios inesperados en el diseño pueden interrumpir la experiencia del usuario de muchas maneras, desde hacer que pierdan su posición mientras leen si el texto se mueve repentinamente, hasta hacer que hagan clic en el enlace o botón incorrecto. En algunos casos, esto puede causar problemas.
Este movimiento de contenido de la página se suele deber a cargas asíncronas o elementos que se añaden en el DOM de manera dinámica antes de que exista el contenido. También se puede deber a la carga de una imagen o video cuyas dimensiones son desconocidas para el navegador, o una fuente que carga de manera asíncrona y cambia de tamaño de tamaño con respecto a la que estaba por defecto, u otros elementos que se redimensionan por si mismos.
¿Que CLS podría considerarse bueno? Para garantizar una buena experiencia de usuario, una página web debería tener un CLS de 100 milisegundos o menos.
En web.dev hay publicada una guía muy interesante en la que se habla de como optimizar el CLS.
Time to First Byte (TTFB)
Mide el tiempo que tarda la red en responder a una solicitud del usuario con el primer byte de un recurso. Se trata de una metrica muy útil para identificar cuando un servidor web es demasiado lento como para responder a solicitudes.
El TTFB es la suma de las siguientes fases de una solicitud:
- Tiempo de redirección
- Tiempo de inicio del service worker (si corresponde)
- Búsqueda de DNS
- Conexión y negociación TLS
- Solicitud, hasta que llega el primer byte de la respuesta
Reducir la latencia en el tiempo de configuración de la conexión y en el backend ayuda a reducir tu TTFB.
¿Que TTFB podría considerarse bueno? Para garantizar una buena experiencia de usuario, una página web debería tener un TTFB de 800 milisegundos o menos.
Herramientas de evaluación en laboratorio
Existen diferentes herramietnas para analizar el rendimiento de una página web, en esta sección hablaré de Google Lighthouse, pero cabe recalcar que existen otras opciones como
DebugBear o extensiones como Web Vitals.
Lighthouse
Google Lighthouse es una herramienta completamente automatizada y de código abierto que nos permite medir la calidad de una página web poniendo a prueba el rendimiento de la misma. Gracias a esta herramienta, podemos realizar una auditoría de calidad a un sitio web de una manera rápida y sencilla. Con el objetivo de conocer la calidad de la página y saber las oportunidades de mejora que existen dentro de la misma.
Se trata de una herramienta totalmente gratuita. Que viene incorporada por defecto en las herramientas de desarrollador de los navegadores basados en Chrome, y que se puede tamibén se instalar como extensión.
El funcionamiento de la misma sería el siguiente, nos dirigimos a la página que queramos auditar, y dentro de las herramientas de navegador nos dirigiremos a Lighthouse.
Una vez en la misma tendremos diferentes opciones a seleccionar para realizar en la auditoría, y una vez hallamos marcado las que nos interesan, empezaremos con el análisis.
Una vez hecha la auditoría nos dará una serie de resultados basados en diferentes puntos de nuestra página web, y, a parte de eso, nos mostrará los resultados de las diferentes métricas que hemos explicado en el punto anterior.
También nos dará información más específica de las métricas que se han mostrado en la imagen anterior, como en este caso, del LCP indicándonos el elemento que más ha tardado en cargar.
Gracias a esta auditoría podemos ver directamente cuales son los elementos que más problemas de rendimiento en nuestra página web y también nos aporta diferentes consejos con los que mejorar la página web.
Conclusiones
En este tutorial hemos abordado los conceptos básicos acerca de la importancia del rendimiento en las aplicaciones web, a lo que puede llevar si es óptimo, y los problemas que se puedan dar en el negocio si no es el mejor. Con esto hemos conseguido ver la importancia que hay que darle a que las aplicaciones web que desarrollamos tengan un buen rendimiento. En este tutorial también hemos visto las diferentes métricas que hay para evaluar el rendimiento, que representa cada una y valores recomendados. Por último, hemos visto que existen diferentes herramientas para hacer una evaluación del rendimiento, con un ejemplo de como hacer uso de una de ellas.
Esta es la primera parte de una serie de tutoriales en los que hablaremos del rendimiento de nuestras aplicaciones web. Este se ha dedicado exclusivamente a relatar todos los conceptos básicos con respecto al rendimiento y la importancia del mismo, y los siguientes estarán dedicados a puntos más específicos, donde veremos como mejorarlo en cada parte de nuestras aplicaciones web.
