En este artículo veremos un caso práctico de pruebas del software: las pruebas de performance, que son las más necesarias en los sistemas web, debido al creciente incremento de usuarios y sobre todo de dispositivos que se pueden conectar a una aplicación web.
1. Criterios para Medir la Performance
Primero debemos entender que la medición de la performance de un sitio web se realiza a nivel de cada página, es decir, para medir la performance de todo el sitio web debemos medir la performance de cada página y luego hacer un promedio.
Entre las principales métricas para medir la performance de una página tenemos:
- Tiempo de carga (Load Time)
- Tiempo del primer byte recibido (First Byte)
- Índice de velocidad (Speed Index)
- Elementos del Modelo de Objetos del Documento (DOM Elements)
- La primera vez (First View)
- Las demás veces (Repeat View)
- Cantidad de solicitudes hechas por la página (Request)
- Cantidad de datos enviados al cliente (Bytes)
Además cada archivo debe tener la menor cantidad de datos, es decir, solo lo que se va a usar; en el caso de CSS las clases, en el caso de JavaScript las funciones y en el caso de las imágenes y las fuentes tienen que estar optimizadas.
2. Herramientas para Pruebas de Performance
Existen muchas herramientas para medir la performance, entre las más usadas en el mundo tenemos:
2.1. YSlow
Esta herramienta fue la primera en medir la performance y la primera versión fue creada por Steve Souders en Yahoo en el 2007, actualmente está disponible la versión 2.0 mantenida por Marcel Duran de Twitter.
YSlow es un complemento que se agrega al navegador (Browser) y está disponible para casi todos los navegadores (Firefox, Chrome, Safari, Opera, etc.) menos para Microsoft Internet Explorer.
URL: http://yslow.org/
Página Web de YSlow
Esta herramienta, identifica 34 criterios claves de los cuales actualmente usa 23 criterios para medir la performance de la página, los cuales se muestran en la siguiente figura.
Criterios para Medir Performance de YSlow V2.0
2.2. PageSpeed Insights
Esta herramienta desarrollada por Google en el 2013, inicialmente estaba disponible como una extensión para los navegadores, pero actualmente está disponible como una página web dentro del sitio de desarrolladores de Google.
Una de las ventajas de esta herramienta es que analiza la performance tanto para Desktop como para dispositivos móviles.
URL: https://developers.google.com/speed/pagespeed/insights/
Página Web de PageSpeed Insights
2.3. WebPageTest
Es una herramienta inicialmente desarrollada por AOL en el 2008 y actualmente mantenida por Google.
Es una de las más usadas actualmente ya que muestra información completa de todas las métricas de performance vistas anteriormente.
URL: http://www.webpagetest.org/
Página Web de WebPageTest
3. Página de Prueba: Login del Sistema
Para las pruebas con las 3 herramientas hemos tomado la página de login de un sistema ubicado en la siguiente dirección.
URL: http://red.hteperu.com/test/Incentivos.Appweb/
Página Web de Prueba
Solo hay que resaltar que la página está en ASP.NET MVC y se compone de lo siguiente:
- 1 archivo html para la página
- 1 archivo de hoja de estilo: Login.css
- 2 archivos de JavaScript: md3.js y Login.js
- 2 archivos de fuentes: regular.woff y regular.woff2
Las pruebas se harán usando Google Chrome V46.0.2490.86 m (64 bits)
4. Pruebas de Performance usando YSlow
Después de descargar el complemento YSlow V2.0 abrir la herramienta y realizar los siguientes pasos:
- Ir a la dirección URL: http://red.hteperu.com/test/Incentivos.Appweb/.
- Clic al botón “Run Test” de la ficha “Home” similar a lo mostrado en la figura.
Ficha Inicio de YSlow V2.0
- Automáticamente se irá a la ficha “Grade” similar a lo mostrado en la figura.
Ficha Grado de YSlow V2.0
- En esta ficha se aprecia el puntaje obtenido por la página, en este caso “93 puntos” obteniendo el grado “A” que significa un buen resultado.
- Para mejorar el puntaje necesitamos usar CDN (grado C), usar cabeceras de expiración (grado E), configurar Entity Tags (grado D).
- Si deseamos ver el detalle por tipo de archivos seleccionamos la ficha “Components” y se mostrará algo similar a la siguiente figura.
Ficha Componentes de YSlow V2.0
- En la figura notamos que aparece un mensaje de color rojo indicando que No se encuentra el archivo favicon (icono de la página web).
- Si deseamos ver una estadística de archivos por tipos seleccionamos la ficha “Statistics” y se mostrará algo similar a la siguiente figura.
Ficha Estadística de YSlow V2.0
Finalmente, en esta ficha podemos darnos cuenta de que solo se está guardando en cache los archivos de hojas de estilos (css) y de JavaScript (js) pero no la página principal y el icono de inicio (ya que éste no existe).
En términos generales, diremos que hemos pasado la prueba de performance usando YSlow V2.0 de Yahoo.
5. Pruebas de Performance usando PageSpeed Insights
Para realizar las pruebas con esta herramienta realizar los siguientes pasos:
- Ir a la dirección URL:
https://developers.google.com/speed/pagespeed/insights/.
- Ingresar la dirección de la página web con el login:
http://red.hteperu.com/test/Incentivos.Appweb/
- Clic al botón “Analize” tal como se muestra en la siguiente figura.
Página principal de PageSpeed Insights
- Automáticamente aparecerá los resultados de la ficha “Mobile” que tiene 2 partes: Velocidad y Experiencia de Usuario.
- A continuación se muestra un gráfico con la sección de “Velocidad” de la ficha “Mobile”.
Sección Velocidad de la ficha Mobile de PageSpeed Insights
- Aquí se aprecia que se ha fallado en 2 reglas y se ha pasado 8 reglas. Los 2 temas a mejorar son cargar asíncronamente el archivo CSS y el otro es usar cabeceras de expiración para guardar en cache los archivos JS y CSS.
- A continuación se muestra un gráfico con la sección de “Experiencia de Usuario” de la ficha “Mobile”.
Sección Experiencia de Usuario de la ficha Mobile de PageSpeed Insights
- En esta se aprecia que no hay ningún problema de experiencia de usuario si la página se ve en un dispositivo móvil.
- Si cambiamos a la ficha “Desktop” ésta tiene solo la parte de Velocidad que es exactamente la misma que la de la ficha Mobile.
- A continuación se muestra un gráfico con la sección de “Velocidad” de la ficha “Desktop”.
Sección Velocidad de la ficha Desktop de PageSpeed Insights
- En términos generales, podemos decir que también hemos pasado la prueba de performance usando PageSpeed Insights de Google.
6. Pruebas de Performance usando WebPageTest
Para realizar las pruebas con esta herramienta realizar los siguientes pasos:
- Ir a la dirección URL:
- Ingresar la dirección de la página web con el login:
- Clic al botón “Start Test” tal como se muestra en la siguiente figura.
Página principal de WebPageTest
- Aparece un mensaje de probando (Testing) y luego se muestra el resultado del test similar al de la siguiente figura.
Página de Resultado de la Prueba en WebPageTest
- Nuevamente apreciamos que la página web está casi bien excepto que debe usar Cache para archivos JS y CSS (F) y usar CDN (X).
- Podemos analizar la primera ficha “Summary” que muestra un resumen con una tabla con los tiempos de carga y un par de gráficos con la primera vista y la vista repetida, similar a la siguiente figura.
Ficha Resumen del Resultado de WebPageTest
- La segunda ficha “Details” muestra mayor detalle de los tiempos de carga, un gráfico de cascada, un gráfico de conexiones y una tabla con las solicitudes realizadas por la página.
- El gráfico de cascada o “Waterfall View” muestra los tiempos de carga por cada recurso de la página, similar a la siguiente figura.
Vista Cascada de la Ficha Detalle del Resultado de WebPageTest
- El gráfico de conexión o “Connection View” muestra los tiempos de carga por conexiones realizadas al servidor, similar a la siguiente figura.
Vista Conexión de la Ficha Detalle del Resultado de WebPageTest
- Finalmente en la sección de Detalles la tabla “Request Details” muestra los detalles de las solicitudes realizadas por la página, similar a la siguiente figura.
Detalles de Solicitud de la Ficha Detalle del Resultado de WebPageTest
- Las filas pintadas de color rojo indican peligro, en este caso, el archivo de fuentes woff2 no ha sido registrado en el servidor como extensión conocida (MIME) y el otro problema es que la página no cuenta con un icono de inicio.
- La tercera ficha “Performance Review” permite mostrar una revisión de las métricas de performance, para lo cual presenta una tabla con la lista de verificación a mejorar, el detalle y un glosario.
Lista de verificación de la Ficha Revisión del Resultado de WebPageTest
- En el “CheckList” se aprecia claramente los temas que se pueden mejorar (color rojo), el archivo de fuente woff2 y el archivo de icono, además de usar caché para contenido estático (CSS, JS) y usar un servidor CDN.
Detalles de la Ficha Revisión del Resultado de WebPageTest
Glosario de la Ficha Revisión del Resultado de WebPageTest
- La cuarta ficha “Content Breakdown” permite desglosar el contenido por tipo de recurso, mostrando 4 gráficos: por tipo MIME y por Conexión, tanto para la primera vista como para las vistas repetidas.
Gráfico por Tipo MIME (Primera Vista) de la Ficha Desglosar Contenido del Resultado de WebPageTest
Gráfico por Conexión (Primera Vista) de la Ficha Desglosar Contenido del Resultado de WebPageTest
Gráfico por Tipo MIME (Vista Repetida) de la Ficha Desglosar Contenido del Resultado de WebPageTest
Gráfico por Conexión (Vista Repetida) de la Ficha Desglosar Contenido del Resultado de WebPageTest
- La quinta ficha “Domains” muestra 2 gráficos de desglose de contenido pero por dominio, tanto para la primera vista como para las vistas repetidas.
- Solo hay que mencionar que No es necesario tenar varios Dominios (incluyendo CDN) cuando el número de archivos es poco, por ejemplo en nuestro caso, la página de login tiene solo 6 archivos.
- A continuación se muestra los gráficos de la ficha “Domains” conteniendo el desglose de contenidos para la primera vista y para las vistas repetidas.
Gráfico de desglose de contenido (Primera Vista) de la Ficha Dominio del Resultado de WebPageTest
Gráfico de desglose de contenido (Vista Repetida) de la Ficha Dominio del Resultado de WebPageTest
- Finalmente, revisaremos la sexta y última ficha llamada “Screen Shot” que muestra 2 gráficos con las pantallas de la página totalmente cargada y otra con el Documento Completado, además también los mensajes de consola del Log.
- A continuación se muestra los gráficos de la ficha “Screen Shot” y los mensajes del Log.
Gráfico de la Pantalla Totalmente Cargada de la Ficha Captura de Pantalla del Resultado de WebPageTest
Gráfico de la Pantalla con Documento Completado de la Ficha Captura de Pantalla del Resultado de WebPageTest
Gráfico de Log de la Ficha Captura de Pantalla del Resultado de WebPageTest
- En términos generales, podemos decir que también hemos pasado la prueba de performance usando WebPageTest de Google.
Descarga del documento completo
Pruebas_Performance
Excelente articulo profesor.
ResponderBorrarMuchas gracias por la información.
Gracias por compartir su investigación profesor.
ResponderBorrarGracias por compartir su investigación profesor.
ResponderBorrarExcelente artículo, gracias por seguir compartiendo sus conocimientos.
ResponderBorrarSaludos.
No había escuchado antes sobre la carga asíncrona de los estilos. Hora de investigar.
ResponderBorrarGracias profesor por su aporte, muy importante.
Muy buen artículo profesor, saludos.
ResponderBorrar