Un Popurrí de Pruebas de Rendimiento Frontend y Backend

Rate this content
Bookmark

En esta charla, quiero presentarte tanto las pruebas de rendimiento frontend como backend y por qué es necesario un popurrí de estas actividades de prueba para asegurarte de que tu sitio web tenga un buen rendimiento. También daré una breve explicación de cómo herramientas como xk6-browser pueden ayudar a ejecutar pruebas tanto a nivel de protocolo (cómo se suelen ejecutar las pruebas de rendimiento a través de interacciones simultáneas en la capa de protocolo) como a nivel de navegador (pruebas con navegadores reales para proporcionar una prueba de rendimiento más realista).

Al final de esta charla, deberías estar equipado con nuevos conocimientos sobre las pruebas de rendimiento frontend y backend que puedes aplicar a tus proyectos de trabajo.

This talk has been presented at TestJS Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Overcooked es un juego cooperativo donde se debe gestionar una cocina bajo presión, similar a sitios web durante eventos como el Black Friday, donde sin una adecuada escalabilidad y prueba de rendimiento, los sistemas se colapsan bajo la alta demanda.

Las pruebas de rendimiento front-end se enfocan en la experiencia del usuario y la velocidad de carga en el navegador, mientras que las pruebas back-end se centran en la capacidad del servidor para manejar solicitudes múltiples y simultáneas eficientemente.

La prueba de carga es un tipo de prueba de rendimiento que evalúa cómo se comporta una aplicación bajo un volumen significativo de usuarios virtuales concurrentes, a diferencia de las pruebas de estrés o saturación que buscan los límites y la estabilidad bajo condiciones extremas.

Para el front-end, herramientas como Lighthouse y Google PageSpeed son útiles, mientras que para el back-end se utilizan JMeter y Gatling, entre otras. XK6 Browser es una herramienta que combina pruebas de navegador y a nivel de protocolo.

XK6 Browser es una extensión de K6 que permite realizar pruebas de rendimiento de navegador y a nivel de protocolo simultáneamente, brindando una visión más completa del comportamiento y rendimiento de una aplicación.

Combinar ambas pruebas permite identificar cuellos de botella tanto en la interfaz de usuario como en el servidor, proporcionando una solución integral para optimizar la experiencia del usuario y la eficiencia del sistema.

Marie Cruz
Marie Cruz
34 min
03 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Las pruebas de rendimiento son la práctica de medir y evaluar la respuesta del sistema. Las pruebas de rendimiento frontend y backend son cruciales para identificar cuellos de botella. XK6 Browser es una nueva herramienta que permite la automatización del navegador y pruebas web de extremo a extremo. K6 es una herramienta de prueba versátil que cubre varios casos de uso. La combinación de pruebas a nivel de navegador y protocolo proporciona una visión integral del rendimiento.

1. Introducción a las pruebas de rendimiento

Short description:

Bienvenidos a mi charla llamada Un Popurrí de Pruebas de Rendimiento Front-end y Back-end. Las pruebas de rendimiento son la práctica de medir y evaluar cómo responde su sistema bajo ciertas condiciones. Las pruebas de carga son solo un tipo de prueba de rendimiento. Durante los momentos de mayor demanda, como el Viernes Negro, los tiempos de respuesta pueden aumentar significativamente y causar errores.

♪♪♪ ¡Hola a todos! Mi nombre es Marie. Y bienvenidos a mi charla llamada Un Popurrí de Pruebas de Rendimiento Front-end y Back-end. Antes de comenzar con mi charla, quiero contarles una historia primero. Esta historia trata sobre Overcooked. He estado jugando este juego con mi hija de 5 años. Y si no están muy familiarizados con Overcooked, es un juego cooperativo en el que tienes que superar diseños de cocina diferentes e inusuales y servir la mayor cantidad de comida posible a los clientes.

Cuando comienza el juego, todo es bastante normal. Los pedidos llegan sin problemas y recibes tips porque sirves los pedidos de sushi a tiempo. A medida que el juego se vuelve más difícil y recibes más pedidos de los esperados, la cocina se ve abrumada. Y sin una coordinación y trabajo en equipo adecuados, la cocina se incendia. Además, ya no recibes tips. Y tienes clientes hambrientos esperando impacientes su comida. Debido a que la cocina no puede mantenerse al día con los pedidos abrumadores de los clientes, toda la cocina se incendia. Por supuesto, esto es muy dramático, pero al final, te haces una idea. Los clientes están muy descontentos, recibes tips negativos, y la cocina es un desastre que ni siquiera puedes cocinar una sola papa.

Volviendo a mi tema de pruebas de rendimiento, imagina que estás tratando de comprar algunos artículos durante las ventas del Viernes Negro o el Cyber Monday. Encontraste un artículo que realmente te gusta, pero de repente, el sitio web que estabas usando se ha caído. No puede mantenerse al día con las solicitudes abrumadoras de diferentes usuarios simultáneamente. Esto es un fenómeno muy común durante las ventas del Viernes Negro. También puedes ver en este ejemplo de gráfico que durante los momentos de mayor demanda de las ventas del Viernes Negro, los tiempos de respuesta son significativamente más altos en comparación con los períodos normales. Esto ha resultado en errores de tiempos de respuesta que pueden dañar tu sitio web. La mayoría de las veces, la respuesta de las empresas es comprar más servidores, pensando que esto solucionará sus problemas de rendimiento, pero esto podría terminar costándote más dinero. Una mejor inversión es comprender, probar, monitorear y realizar mejoras de rendimiento en tu aplicación interna.

2. Pruebas de rendimiento y herramientas

Short description:

Ahora pasemos a la parte más seria de esta charla. Las pruebas de rendimiento son la práctica de medir y evaluar cómo responde su sistema bajo ciertas condiciones. Las pruebas de carga son solo un tipo de prueba de rendimiento. Las pruebas de rendimiento se dividen típicamente en dos áreas: rendimiento en el front-end o lado del cliente y rendimiento en el back-end o lado del servidor. La regla de oro del rendimiento web establece que el 80 al 90% del tiempo de carga se gasta en el front-end, mientras que el 10 al 20% se gasta en el back-end. Las pruebas de rendimiento en el front-end se limitan en alcance y se centran en la experiencia del usuario final, mientras que las pruebas de rendimiento en el back-end ayudan a identificar cuellos de botella de rendimiento. Existen diversas herramientas de pruebas de rendimiento disponibles, como Lighthouse, Google PageSpeed, SiteSpeed.io y WebPagetest.

Ahora pasemos a la parte más seria de esta charla. Para asegurarnos de que nuestros usuarios tengan una experiencia positiva, necesitamos realizar pruebas de rendimiento. Las pruebas de rendimiento son la práctica de medir y evaluar cómo responde su sistema bajo ciertas condiciones. Cuando pensamos en pruebas de rendimiento, nos preocupamos por la velocidad, confiabilidad y estabilidad de la aplicación que estamos probando.

Con las pruebas de rendimiento, a menudo hay una idea errónea de que se trata solo de pruebas de carga. Las pruebas de rendimiento son el término general para cualquier tipo de prueba de rendimiento, mientras que las pruebas de carga son solo un tipo de prueba de rendimiento. En resumen, las pruebas de carga verifican cómo se comporta su aplicación cuando se expone a un gran número de usuarios virtuales concurrentes, enviando múltiples solicitudes al mismo tiempo. Dentro de las pruebas de carga, también existen diferentes variaciones como pruebas de estrés, pruebas de saturación o pruebas de picos.

Las pruebas de rendimiento se dividen típicamente en dos áreas. Tenemos el rendimiento en el front-end o lado del cliente, que se enfoca en probar qué tan rápido un usuario puede ver las respuestas web al instante. Se preocupa por la experiencia del usuario final de una aplicación, que generalmente involucra un navegador. Las pruebas de rendimiento en el front-end tienen métricas distintas de las pruebas de rendimiento en el back-end. Ejemplos de métricas podrían ser, ¿cuánto tiempo tardó el navegador en renderizar la página completa o cuánto tiempo tardó en ser completamente interactiva la página? Por otro lado, tenemos el rendimiento en el back-end o lado del servidor, que se enfoca en asegurarse de que cuando se envían múltiples solicitudes de diferentes usuarios de manera simultánea, su back-end pueda manejar la carga adecuadamente. Ejemplos de métricas podrían ser, ¿cuánto tiempo tardó en recibir una respuesta de una solicitud específica o ¿cuántas solicitudes fallidas encontramos?

Como pueden ver, las pruebas de rendimiento no se limitan solo a las pruebas de carga. Con diferentes tipos de pruebas de rendimiento, podrían preguntarse cuál es más importante. La respuesta, como siempre, es que depende. Si volvemos a la regla de oro del rendimiento web, establece que el 80 al 90% del tiempo de carga de una página web o aplicación se gasta en el front-end, mientras que el 10 al 20% se gasta en el back-end. Pueden ver en esta imagen, que tomé del blog de Steve Souder, que el tiempo promedio en el front-end es significativamente mayor en comparación con los tiempos en el back-end. Si seguimos esta regla de oro, y queremos realizar mejoras de rendimiento, siempre es una gran idea comenzar por el front-end y hacer pequeñas recomendaciones a su equipo. Las pruebas de rendimiento en el front-end también están mucho más cerca de la experiencia de nuestros usuarios. Sin embargo, la regla de oro del rendimiento web no siempre es necesariamente precisa. Si tienen mucho tráfico llegando a su sitio web, el tiempo de respuesta en el front-end puede permanecer aproximadamente igual. Pero una vez que su back-end lucha con la mayor concurrencia, el tiempo en el back-end crecerá exponencialmente. Las pruebas de rendimiento en el front-end se ejecutan en el lado del cliente y, por lo tanto, están limitadas en alcance. No proporcionan suficiente información sobre toda su aplicación. Las pruebas de rendimiento en el back-end son realmente útiles cuando se trata de identificar cuellos de botella de rendimiento cuando sus servidores de aplicación han estado expuestos a altos niveles de carga. Al mismo tiempo, las pruebas de rendimiento en el front-end pueden detectar problemas relacionados solo con los navegadores, que pueden omitirse por completo desde el nivel de protocolo. Por eso es clave combinar ambos enfoques.

Continuando, quiero hablar un poco sobre las herramientas de pruebas de rendimiento porque hay una variedad de herramientas disponibles que pueden ayudarlo con sus necesidades de pruebas de rendimiento. Desde una perspectiva de front-end, herramientas como Lighthouse, Google PageSpeed, SiteSpeed.io, WebPagetest e incluso sus herramientas de desarrollo pueden ser útiles.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Cómo empezar con Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
Cómo empezar con Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
La web ha evolucionado. Finalmente, también lo ha hecho el testing. Cypress es una herramienta de testing moderna que responde a las necesidades de testing de las aplicaciones web modernas. Ha ganado mucha popularidad en los últimos años, obteniendo reconocimiento a nivel mundial. Si has estado esperando aprender Cypress, ¡no esperes más! Filip Hric te guiará a través de los primeros pasos sobre cómo empezar a usar Cypress y configurar tu propio proyecto. La buena noticia es que aprender Cypress es increíblemente fácil. Escribirás tu primer test en poco tiempo y luego descubrirás cómo escribir un test de extremo a extremo completo para una aplicación web moderna. Aprenderás conceptos fundamentales como la capacidad de reintentar. Descubre cómo trabajar e interactuar con tu aplicación y aprende cómo combinar pruebas de API y de UI. A lo largo de todo este masterclass, escribiremos código y realizaremos ejercicios prácticos. Saldrás con una experiencia práctica que podrás aplicar a tu propio proyecto.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass