![\"Una](\"https:\/\/es.abstracta.us\/wp-content\/uploads\/2024\/04\/guia-pruebas-performance-sitios-web-1024x682.png\")
<\/figure><\/div>\n\n\nPor Marie Cruz de K6<\/em><\/strong><\/p>\n\n\n\n Los estudios de usabilidad que datan de los a\u00f1os 90, como se menciona en este art\u00edculo, \u201dThe Need for Speed\u201d por Jakob Nielsen<\/a>, muestran que los tiempos de respuesta r\u00e1pidos 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\u00eda, los usuarios cierran r\u00e1pidamente una pesta\u00f1a o una ventana si el sitio web que utilizan tiene una sensaci\u00f3n \u201clenta\u201d. El rendimiento lento tambi\u00e9n puede tener un impacto negativo en los negocios, ya que los usuarios ir\u00e1n a sus competidores si su sitio web no est\u00e1 a la velocidad a la que est\u00e1n acostumbrados los usuarios.<\/p>\n\n\n\n Este gu\u00eda le dar\u00e1 una visi\u00f3n general de lo siguiente:<\/p>\n\n\n\n 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\u00ed. Solo porque nuestros servidores han respondido con la solicitud que el usuario ha solicitado no significa que se les muestre de forma instant\u00e1nea.<\/p>\n\n\n\n En pocas palabras, el rendimiento web se trata de c\u00f3mo es el rendimiento o la velocidad de tu sitio web cuando tus usuarios lo cargan.<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n\n La gente ha estado quej\u00e1ndose de sitios web lentos desde los d\u00edas de la conexi\u00f3n telef\u00f3nica. Sin embargo, incluso en la actualidad, donde tenemos conexiones a internet m\u00e1s r\u00e1pidas, \u00a1todav\u00eda nos quejamos de los sitios web lentos! Las redes sociales han hecho m\u00e1s accesible compartir nuestras frustraciones tambi\u00e9n.<\/p>\n\n\n\n Este estudio actualizado de la respuesta web<\/a> muestra que los tiempos de descarga de p\u00e1gina medianos son de 6 segundos en el escritorio y, peor a\u00fan, de 20 segundos en el m\u00f3vil. Tenemos conexiones m\u00e1s r\u00e1pidas, pero los sitios web no son mucho m\u00e1s r\u00e1pidos de lo que eran hace diez a\u00f1os. \u00a1No es de extra\u00f1ar que la gente siga quej\u00e1ndose!<\/p>\n\n\n\n Un sitio web lento no solo afecta la experiencia de tus usuarios. La velocidad de tu sitio web tambi\u00e9n puede afectar enormemente tu reputaci\u00f3n comercial, tus ingresos e incluso tu posicionamiento en los motores de b\u00fasqueda. Google anunci\u00f3 que la velocidad de la p\u00e1gina es ahora un factor<\/a> para su algoritmo de b\u00fasqueda y posicionamiento.<\/p>\n\n\n\n Aqu\u00ed hay algunos ejemplos de c\u00f3mo los sitios web lentos han afectado \/ podr\u00edan afectar a un negocio:<\/p>\n\n\n\n Estos ejemplos demuestran que el rendimiento web es esencial para proporcionar la mejor experiencia de usuario, y mejorar las m\u00e9tricas cr\u00edticas relacionadas con el rendimiento tiene un impacto positivo en las ganancias de un negocio y en su posicionamiento en los motores de b\u00fasqueda<\/strong>. Si todav\u00eda no est\u00e1s convencido, echa un vistazo a las estad\u00edsticas WPO<\/a> (Web Performance Optimization) para una colecci\u00f3n de estudios de casos que muestran c\u00f3mo diferentes empresas vieron mejoras cuando hicieron algunas optimizaciones de rendimiento.<\/p>\n\n\n\n La velocidad de carga de la p\u00e1gina es el indicador clave que debes tener en cuenta en cuanto al rendimiento web. \u00bfPero qu\u00e9 tan r\u00e1pido deben ser los tiempos de respuesta de la p\u00e1gina? \u00bfExiste un n\u00famero m\u00e1gico que debas conocer?<\/p>\n\n\n\n Jakob Nielsen resume esto bien en su art\u00edculo, \u201cResponse Time: The 3 Important Limits<\/a>\u201d, donde afirma que:<\/p>\n\n\n\n Como regla general, tu sitio web debe cargar lo m\u00e1s r\u00e1pido posible, pero no demasiado r\u00e1pido para que tus usuarios no puedan seguir con lo que est\u00e1n haciendo.<\/p>\n\n\n\n El rendimiento percibido de tu sitio web tambi\u00e9n 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\u00e1 pasando en lugar de no mostrar ning\u00fan progreso en absoluto. De esta manera, tus usuarios se sienten involucrados y el tiempo vuela m\u00e1s r\u00e1pido cuando est\u00e1s haciendo una actividad interesante.<\/p>\n\n\n\n Para saber cu\u00e1n r\u00e1pido es tu sitio web, hay algunas m\u00e9tricas espec\u00edficas del rendimiento web<\/a> que necesitas conocer. Estas m\u00e9tricas no est\u00e1n establecidas en piedra, pero son indicadores \u00fatiles para entender c\u00f3mo se desempe\u00f1a tu sitio web.<\/p>\n\n\n\n Los Web Vitals<\/a> son m\u00e9tricas que Google considera esenciales con respecto al rendimiento del navegador y la experiencia del usuario. Para simplificar las m\u00e9tricas que m\u00e1s importan, resumir\u00e9 los vitales web b\u00e1sicos que debes conocer. Estos vitales son lo que Google considera lo m\u00e1s importante y deben aplicarse a todos los sitios web.<\/p>\n\n\n\n Ten en cuenta que los vitales web b\u00e1sicos evolucionar\u00e1n para reflejar los cambios tecnol\u00f3gicos.<\/p>\n\n\n\n Adem\u00e1s de los vitales web b\u00e1sicos, tambi\u00e9n es bueno conocer otros web vitals<\/a> para entender mejor la experiencia de tu usuario.<\/p>\n\n\n\n Para asegurarte de que tus usuarios tengan la experiencia m\u00e1s \u00f3ptima, necesitas herramientas y bibliotecas que te ayuden con la prueba de rendimiento web. La lista a continuaci\u00f3n no es exhaustiva, pero te ayudar\u00e1 a comenzar.<\/p>\n\n\n\n Google Lighthouse es una herramienta de c\u00f3digo abierto para auditar y mejorar la calidad y el rendimiento de tu sitio web. Adem\u00e1s de medir el rendimiento, tambi\u00e9n mide otros aspectos, como la accesibilidad o el SEO. Lighthouse se puede ejecutar como parte de Chrome DevTools, desde la l\u00ednea de comandos o como un m\u00f3dulo de Node. Lighthouse proporciona una puntuaci\u00f3n de auditor\u00eda y un desglose claro de los problemas que ralentizan tu sitio web.<\/p>\n\n\n Google Lighthouse utiliza datos de laboratorio, que son datos recolectados de un entorno controlado utilizando dispositivos y configuraciones de red predefinidos.<\/p>\n\n\n\n Al igual que Google Lighthouse, PageSpeed Insights tambi\u00e9n te permite auditar el rendimiento de tu sitio web y proporciona una evaluaci\u00f3n de los fundamentos web vitales. Tambi\u00e9n utiliza Google Lighthouse bajo el cap\u00f3, pero a diferencia de Google Lighthouse, PageSpeed Insights tambi\u00e9n utiliza datos de campo recolectados de usuarios reales.<\/p>\n\n\n WebPageTest proporciona informaci\u00f3n diagn\u00f3stica exhaustiva y detallada sobre el rendimiento de una p\u00e1gina. 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.<\/p>\n\n\n Puedes agregar las siguientes herramientas a tus pipelines de integraci\u00f3n continua para habilitar las pruebas de rendimiento continuas<\/a>.<\/p>\n\n\n\n xk6-browser te permite obtener informaci\u00f3n de tu aplicaci\u00f3n front-end durante las pruebas de rendimiento mientras soporta todas las caracter\u00edsticas principales de k6<\/a>.<\/p>\n\n\n\n Con xk6-browser, puedes simular gran parte de tu tr\u00e1fico desde tus pruebas de nivel de protocolo y ejecutar uno o dos usuarios virtuales a nivel de navegador para imitar c\u00f3mo un usuario interact\u00faa con tu sitio web, aprovechando as\u00ed un enfoque h\u00edbrido para las pruebas de rendimiento, que voy a hablar un poco m\u00e1s adelante. Para obtener m\u00e1s informaci\u00f3n sobre xk6-browser, consulta la documentaci\u00f3n de xk6-browser<\/a>.<\/p>\n\n\n\n cypress-audit es un plugin de Cypress<\/a> que te permite integrar las puntuaciones de Google Lighthouse directamente desde tus pruebas Cypress. Para obtener una visi\u00f3n general de c\u00f3mo funciona, revisa la documentaci\u00f3n de cypress-audit<\/a>.<\/p>\n\n\n\n Playwright tambi\u00e9n te permite acceder a varias API de rendimiento web para medir el rendimiento de tu sitio web dentro de tu c\u00f3digo. Aqu\u00ed hay una excelente charla<\/a> de Meetup de John Hill en la que habl\u00f3 sobre las pruebas de rendimiento utilizando Playwright.<\/p>\n\n\n\n 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\u00f3n cuando aumenta la cantidad de tr\u00e1fico contra una aplicaci\u00f3n.<\/p>\n\n\n\n Tambi\u00e9n debes probar tus sistemas de backend para tener una imagen completa del rendimiento de tu aplicaci\u00f3n. Una forma com\u00fan de probar el rendimiento del backend es hacer pruebas de carga a trav\u00e9s del nivel de protocolo, ya que puedes simular f\u00e1cilmente miles de solicitudes de forma concurrente.<\/p>\n\n\n\n Sin embargo, existen problemas asociados con las pruebas a trav\u00e9s del nivel de protocolo, como:<\/p>\n\n\n\n Por otro lado, si realizas pruebas de carga al crear muchos navegadores, esto requiere significativamente m\u00e1s recursos de generaci\u00f3n de carga, lo cual puede resultar bastante costoso.<\/p>\n\n\n\n Para solucionar las limitaciones de cada enfoque, una pr\u00e1ctica recomendada es adoptar un enfoque h\u00edbrido para las pruebas de rendimiento, que es una combinaci\u00f3n de las pruebas tanto de los sistemas de backend y frontend a trav\u00e9s del nivel de protocolo y del navegador. Con un enfoque h\u00edbrido, se crea la mayor\u00eda de la carga a trav\u00e9s del nivel de protocolo y simult\u00e1neamente se tiene uno o dos usuarios virtuales en el nivel del navegador, para poder tener una visi\u00f3n de lo que est\u00e1 sucediendo en el front-end.<\/p>\n\n\n Hay varias maneras de llevar a cabo este enfoque:<\/p>\n\n\n\n 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\u00e9n cubra el rendimiento de tu aplicaci\u00f3n de backend.<\/p>\n\n\n\n Las empresas pasan tiempo tratando de hacer que sus sitios web sean hermosos. Sin embargo, los estudios muestran que se necesita algo m\u00e1s que funcionalidad. La velocidad y el rendimiento son igualmente importantes, por lo que las pruebas de rendimiento son cruciales hoy en d\u00eda. 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.<\/p>\n\n\n\n Pruebas de performance h\u00edbridas con k6<\/a><\/p>\n\n\n\n \u00bfQu\u00e9 es el rendimiento en las pruebas de performance?<\/a><\/p>\n\n\n\n Modelo de la pir\u00e1mide de automatizaci\u00f3n para pruebas de performance<\/a><\/p>\n\n\n\n Testing de performance, llave maestra para mejorar tu software<\/a><\/a><\/p>\n","protected":false},"excerpt":{"rendered":" A una edad muy temprana, todos hemos estado expuestos a muchos tiempos de espera. Como ni\u00f1os, debemos esperar nuestro turno para golpear la pi\u00f1ata durante las fiestas de cumplea\u00f1os. Como adultos, nos enfrentamos a colas en todas partes, desde pagar por la compra hasta comprar…<\/p>\n","protected":false},"author":38,"featured_media":18483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,9],"tags":[230,173,220,64,215,167],"class_list":["post-17702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-herramientas-pruebas","category-pruebas-performance","tag-aplicaciones-web","tag-performance-testing","tag-pruebas-continuas","tag-pruebas-carga","tag-pruebas-de-rendimiento","tag-testing-continuo"],"yoast_head":"\n\n
\u00bfQu\u00e9 es performance web?<\/strong><\/h2>\n\n\n\n
El impacto de un sitio web lento<\/strong><\/h2>\n\n\n\n
\n
\u00bfQu\u00e9 tan r\u00e1pido debe ser un sitio web?<\/strong><\/h2>\n\n\n\n
\n
M\u00e9tricas de performance web<\/strong><\/h2>\n\n\n\n
\n
\n
Herramientas para testing de performance web<\/strong><\/h2>\n\n\n\n
Google Lighthouse<\/a><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
PageSpeed Insights<\/a><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
WebPageTest<\/a><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
xk6-browser<\/a><\/h3>\n\n\n\n
cypress-audit<\/a><\/h3>\n\n\n\n
Playwright<\/a><\/h3>\n\n\n\n
Un enfoque hibrido para las pruebas de performance<\/strong><\/h2>\n\n\n\n
\n
<\/figure><\/div>\n\n\n
\n
Cerrando<\/h3>\n\n\n\n
Art\u00edculos relacionados<\/h3>\n\n\n\n