A una edad muy temprana, todos hemos estado expuestos a muchos tiempos de espera. Como niños, debemos esperar nuestro turno para golpear la piñata durante las fiestas de cumpleaños. Como adultos, nos enfrentamos a colas en todas partes, desde pagar por la compra hasta comprar los últimos modelos de teléfono. Esperar no es una actividad agradable para la mayoría de las personas, especialmente si están acostumbrados a la gratificación instantánea que proporcionan la mayoría de las tecnologías actuales. Se sabe que la paciencia de las personas se vuelve más fina a medida que la tecnología avanza más rápido.

Por Marie Cruz de K6

Los estudios de usabilidad que datan de los años 90, como se menciona en este artículo, ”The Need for Speed” por Jakob Nielsen, muestran que los tiempos de respuesta rápidos son esenciales para la usabilidad web. Los sitios web deben ser creados con velocidad en mente para que los usuarios tengan una excelente experiencia de usuario. Hoy en día, los usuarios cierran rápidamente una pestaña o una ventana si el sitio web que utilizan tiene una sensación “lenta”. El rendimiento lento también puede tener un impacto negativo en los negocios, ya que los usuarios irán a sus competidores si su sitio web no está a la velocidad a la que están acostumbrados los usuarios.

Este guía le dará una visión general de lo siguiente:

• ¿Qué es el rendimiento web?
• Impactos de un sitio web lento
• ¿A qué velocidad deben ser los sitios web?
• Métricas de rendimiento web
• Herramientas para probar el rendimiento web
• Un enfoque híbrido para las pruebas de rendimiento.

¿Qué es performance web?

Algunos de nosotros pensamos en el rendimiento del servidor o el rendimiento del backend cuando hablamos de rendimiento en general, por lo que hacemos optimizaciones dentro de eso. Sin embargo, las mejoras de rendimiento no se detienen aquí. Solo porque nuestros servidores han respondido con la solicitud que el usuario ha solicitado no significa que se les muestre de forma instantánea.

En pocas palabras, el rendimiento web se trata de cómo es el rendimiento o la velocidad de tu sitio web cuando tus usuarios lo cargan.

Varias factores, como la cantidad de archivos CSS o Javascript que se descargan, el navegador que utilizan tus usuarios, las capacidades del dispositivo y la conectividad de red, pueden afectar el tiempo de carga de tu sitio web.

El impacto de un sitio web lento

La gente ha estado quejándose de sitios web lentos desde los días de la conexión telefónica. Sin embargo, incluso en la actualidad, donde tenemos conexiones a internet más rápidas, ¡todavía nos quejamos de los sitios web lentos! Las redes sociales han hecho más accesible compartir nuestras frustraciones también.

Este estudio actualizado de la respuesta web muestra que los tiempos de descarga de página medianos son de 6 segundos en el escritorio y, peor aún, de 20 segundos en el móvil. Tenemos conexiones más rápidas, pero los sitios web no son mucho más rápidos de lo que eran hace diez años. ¡No es de extrañar que la gente siga quejándose!

Un sitio web lento no solo afecta la experiencia de tus usuarios. La velocidad de tu sitio web también puede afectar enormemente tu reputación comercial, tus ingresos e incluso tu posicionamiento en los motores de búsqueda. Google anunció que la velocidad de la página es ahora un factor para su algoritmo de búsqueda y posicionamiento.

Aquí hay algunos ejemplos de cómo los sitios web lentos han afectado / podrían afectar a un negocio:

• Amazon descubrió que por cada retraso de 100 ms en la carga de la página, encontraba una pérdida del 1% en las ganancias de ventas.
• Akamai ha llevado a cabo un estudio que muestra que los consumidores se vuelven impacientes cuando una página tarda más de dos segundos en cargar, lo que resulta en una tasa de rebote más alta.

Estos ejemplos demuestran que el rendimiento web es esencial para proporcionar la mejor experiencia de usuario, y mejorar las métricas críticas relacionadas con el rendimiento tiene un impacto positivo en las ganancias de un negocio y en su posicionamiento en los motores de búsqueda. Si todavía no estás convencido, echa un vistazo a las estadísticas WPO (Web Performance Optimization) para una colección de estudios de casos que muestran cómo diferentes empresas vieron mejoras cuando hicieron algunas optimizaciones de rendimiento.

¿Qué tan rápido debe ser un sitio web?

La velocidad de carga de la página es el indicador clave que debes tener en cuenta en cuanto al rendimiento web. ¿Pero qué tan rápido deben ser los tiempos de respuesta de la página? ¿Existe un número mágico que debas conocer?

Jakob Nielsen resume esto bien en su artículo, “Response Time: The 3 Important Limits”, donde afirma que:

• 0.1 segundos es aproximadamente el límite para que el usuario sienta que el sistema está reaccionando de manera instantánea, lo que significa que no se necesita ningún tipo de retroalimentación especial excepto para mostrar el resultado.
• 1.0 segundos es el límite para que el flujo de pensamiento del usuario no se interrumpa, aunque el usuario notará el retraso. Normalmente, no se necesita ningún tipo de retroalimentación durante los retrasos de más de 0.1, pero menos de 1.0 segundos, pero el usuario pierde la sensación de operar directamente en los datos.
• 10 segundos es el límite para mantener la atención del usuario enfocada en el diálogo. Para retrasos más largos, los usuarios querrán realizar otras tareas mientras esperan a que la computadora termine, por lo que deben recibir retroalimentación indicando cuándo se espera que la computadora termine. La retroalimentación durante el retraso es especialmente importante si el tiempo de respuesta es altamente variable ya que los usuarios entonces no sabrán qué esperar.

Como regla general, tu sitio web debe cargar lo más rápido posible, pero no demasiado rápido para que tus usuarios no puedan seguir con lo que están haciendo.

El rendimiento percibido de tu sitio web también es importante. El rendimiento percibido es la rapidez con la que se siente un sitio web a un usuario de forma subjetiva en lugar de medir de forma objetiva. Por ejemplo, es mejor mostrar a tus usuarios un indicador visual, en forma de barras de progreso o animaciones de carga, que algo está pasando en lugar de no mostrar ningún progreso en absoluto. De esta manera, tus usuarios se sienten involucrados y el tiempo vuela más rápido cuando estás haciendo una actividad interesante.

Métricas de performance web

Para saber cuán rápido es tu sitio web, hay algunas métricas específicas del rendimiento web que necesitas conocer. Estas métricas no están establecidas en piedra, pero son indicadores útiles para entender cómo se desempeña tu sitio web.

Los Web Vitals son métricas que Google considera esenciales con respecto al rendimiento del navegador y la experiencia del usuario. Para simplificar las métricas que más importan, resumiré los vitales web básicos que debes conocer. Estos vitales son lo que Google considera lo más importante y deben aplicarse a todos los sitios web.

1. Largest Contentful Paint (LCP) — mide la cantidad de tiempo que tarda un navegador en renderizar el contenido más grande de la página, como imágenes o videos dentro del viewport visible.
2. First Input Delay (FID) — mide la primera impresión de tu usuario sobre la rapidez de tu sitio web. FID nos dice cuánto tiempo deben esperar tus usuarios una respuesta después de interactuar con una página.
3. Cumulative Layout Shift (CLS) — mide el cambio de diseño más grande e inesperado en tu sitio web. Los elementos que cambian inesperadamente pueden causar daños reales en la experiencia de tu usuario.

Ten en cuenta que los vitales web básicos evolucionarán para reflejar los cambios tecnológicos.

Además de los vitales web básicos, también es bueno conocer otros web vitals para entender mejor la experiencia de tu usuario.

1. Tiempo de Primer Byte (TTFB) — mide el tiempo entre la solicitud de un recurso y cuando comienza a llegar el primer byte de respuesta.
2. Primer pintado con contenido (FCP) — mide la cantidad de tiempo que tarda un navegador en renderizar cualquier pieza de contenido de la página.
3. Tiempo total de bloqueo (TBT) — el tiempo en el que el hilo principal del navegador está bloqueado debido a tareas largas, lo que impide la respuesta de entrada.
4. Tiempo para interactivo (TTI) — mide el tiempo que se tarda en que una página sea completamente interactiva.

Herramientas para testing de performance web

Para asegurarte de que tus usuarios tengan la experiencia más óptima, necesitas herramientas y bibliotecas que te ayuden con la prueba de rendimiento web. La lista a continuación no es exhaustiva, pero te ayudará a comenzar.

Google Lighthouse

Google Lighthouse es una herramienta de código abierto para auditar y mejorar la calidad y el rendimiento de tu sitio web. Además de medir el rendimiento, también mide otros aspectos, como la accesibilidad o el SEO. Lighthouse se puede ejecutar como parte de Chrome DevTools, desde la línea de comandos o como un módulo de Node. Lighthouse proporciona una puntuación de auditoría y un desglose claro de los problemas que ralentizan tu sitio web.

Google Lighthouse utiliza datos de laboratorio, que son datos recolectados de un entorno controlado utilizando dispositivos y configuraciones de red predefinidos.

PageSpeed Insights

Al igual que Google Lighthouse, PageSpeed Insights también te permite auditar el rendimiento de tu sitio web y proporciona una evaluación de los fundamentos web vitales. También utiliza Google Lighthouse bajo el capó, pero a diferencia de Google Lighthouse, PageSpeed Insights también utiliza datos de campo recolectados de usuarios reales.

WebPageTest

WebPageTest proporciona información diagnóstica exhaustiva y detallada sobre el rendimiento de una página. Al igual que Google Lighthouse, utiliza datos de laboratorio, pero te permite simular tu prueba para ejecutarla bajo diferentes condiciones de red, navegadores y ubicaciones en todo el mundo.

Puedes agregar las siguientes herramientas a tus pipelines de integración continua para habilitar las pruebas de rendimiento continuas.

xk6-browser

xk6-browser te permite obtener información de tu aplicación front-end durante las pruebas de rendimiento mientras soporta todas las características principales de k6.

Con xk6-browser, puedes simular gran parte de tu tráfico desde tus pruebas de nivel de protocolo y ejecutar uno o dos usuarios virtuales a nivel de navegador para imitar cómo un usuario interactúa con tu sitio web, aprovechando así un enfoque híbrido para las pruebas de rendimiento, que voy a hablar un poco más adelante. Para obtener más información sobre xk6-browser, consulta la documentación de xk6-browser.

cypress-audit

cypress-audit es un plugin de Cypress que te permite integrar las puntuaciones de Google Lighthouse directamente desde tus pruebas Cypress. Para obtener una visión general de cómo funciona, revisa la documentación de cypress-audit.

Playwright

Playwright también te permite acceder a varias API de rendimiento web para medir el rendimiento de tu sitio web dentro de tu código. Aquí hay una excelente charla de Meetup de John Hill en la que habló sobre las pruebas de rendimiento utilizando Playwright.

Un enfoque hibrido al testing de performance

Hasta ahora, solo he estado hablando sobre el rendimiento web. El rendimiento web es solo un lado de la moneda. Si solo consideras el rendimiento web, esto puede llevar a una falsa confianza en el rendimiento global de la aplicación cuando aumenta la cantidad de tráfico contra una aplicación.

También debes probar tus sistemas de backend para tener una imagen completa del rendimiento de tu aplicación. Una forma común de probar el rendimiento del backend es hacer pruebas de carga a través del nivel de protocolo, ya que puedes simular fácilmente miles de solicitudes de forma concurrente.

Sin embargo, existen problemas asociados con las pruebas a través del nivel de protocolo, como:

• No estar más cerca de la experiencia del usuario ya que se salta el navegador.
• Los scripts pueden ser largos de crear y difíciles de mantener a medida que crece la aplicación.
• Se ignoran las métricas de rendimiento del navegador.

Por otro lado, si realizas pruebas de carga al crear muchos navegadores, esto requiere significativamente más recursos de generación de carga, lo cual puede resultar bastante costoso.

Para solucionar las limitaciones de cada enfoque, una práctica recomendada es adoptar un enfoque híbrido para las pruebas de rendimiento, que es una combinación de las pruebas tanto de los sistemas de backend y frontend a través del nivel de protocolo y del navegador. Con un enfoque híbrido, se crea la mayoría de la carga a través del nivel de protocolo y simultáneamente se tiene uno o dos usuarios virtuales en el nivel del navegador, para poder tener una visión de lo que está sucediendo en el front-end.

Hay varias maneras de llevar a cabo este enfoque:

• Utilizar una sola herramienta para ambos, como xk6-browser, que puede ofrecer una experiencia simplificada y una vista agregada de las métricas de rendimiento.
• Usar una combinación de diferentes herramientas simultáneamente. Por ejemplo, puedes utilizar cualquiera de las herramientas mencionadas anteriormente, como Google Lighthouse o WebPageTest, en conjunción con herramientas a nivel de protocolo como JMeter, k6 o Gatling.

Sea cual sea el enfoque o herramienta que elijas, lo importante es que consideres cuidadosamente tus requisitos. Por ejemplo, puedes comenzar priorizando el rendimiento del frontend con el objetivo general de tener una prueba que también cubra el rendimiento de tu aplicación de backend.

Cerrando

Las empresas pasan tiempo tratando de hacer que sus sitios web sean hermosos. Sin embargo, los estudios muestran que se necesita algo más que funcionalidad. La velocidad y el rendimiento son igualmente importantes, por lo que las pruebas de rendimiento son cruciales hoy en día. Si bien las pruebas de carga siguen siendo un enfoque excelente para probar la escalabilidad y la confiabilidad de sus aplicaciones, se necesitan pruebas de rendimiento web para evaluar la experiencia general del usuario.

Recursos adicionales:

• Pruebas de rendimiento híbridas con k6
• Una guía integral de pruebas de carga
• Testing de performance, llave maestra para mejorar tu software