Vamos a ver en esta sección como hacer un análisis rápido del comportamiento de la página Web usando Google Page Speed, un plugin para Firefox desarrollado por Google para hacer análisis de un sitio Web y evaluar el rendimiento. Al final del análisis el plugin muestra un listado de buenas prácticas indicando cuales cumple la página Web y cuales no.
Siga las instrucciones para instalar el plugin y hacer el análisis de la aplicación de ejemplo.
1. Google Page Speed es un plugin para Firefox que funciona sobre Firebug. Así que el orden de instalación es: Firefox, Firebug y Google Page Speed.
2. Si no tiene Firefox instalado, descárguelo de su sitio Web e instálelo.
3. Usando Firefox vaya al sitio Web de Firebug en https://addons.mozilla.org/es-ES/firefox/addon/1843 e instálelo.
4. Reinicie Firefox y vaya al sitio Web de Google Page Speed en http://code.google.com/intl/es-ES/speed/page-speed/download.html e instale el plugin haciendo clic en el ícono de instalación.
5. Reinicie Firefox para que tome el nuevo plugin.
6. Después de iniciar Firefox de nuevo vaya el menú Herramientas —> Firebug. Esto abrirá la ventana de Firebug en la parte inferior del navegador como muestra la siguiente imagen:
7. Si no le aparecen los mismos elementos de la imagen, busque el ícono de Firebug en la parte inferior derecha del navegador, presione clic derecho sobre él y seleccione la opción Enable All Panels.
8. Vamos ahora a hacer un análisis de rendimiento a la página de login y a la página de cosas.
9. Con firebug abierto ingrese a la página principal de la aplicación (http://localhost:8080/EjemploPruebaCarga/) y seleccione la pestaña red. Si no aparecen las peticiones hechas por la página, presione CTRL + F5.
Note que la página de login carga tres recursos: el contenido HTML, la hoja de estilos CSS y una imagen JPG. El contenido HTML pesa 135.8 KB y en total, con recursos estáticos, el peso completo de la página es de 214.1 KB.
El tiempo de carga de la página fue de 424 ms.
10. Si selecciona una de las URL que muestra Firebug puede ver el detalle de la petición HTTP, la respuesta y otra información útil para el análisis de tráfico.
Aquí podemos ver datos importantes:
- JSESSIONID es el nombre de la cookie que se usa para identificar la sesión.
- Los encabezados Pragma y Cache-Control le indican al navegador que no haga un caché local de recursos. Esto obliga al navegador a que siempre recargue estos recursos.
11. Cierre de nuevo la URL y presione el botón Page Speed y posteriormente "Analyze Performance".
12. El plugin genera un informe donde nos indica que la aplicación no implementa dos buenas prácticas, tiene una sugerencia y el resto de recomendaciones está bien. En promedio, según el plugin, la primera página cumple un 86% de las prácticas.
13. Vuelva a la opción Red de Firebug e ingrese un usuario y contraseña válida y autentíquese en la aplicación. Si obtiene un mensaje de error del tipo "view could not be restored", recargue la primera página y vuélva a autenticarse.
Observe que:
- Tras la autenticación sólo hay una petición HTTP.
- La petición pesa 136.6 KB.
- El tiempo de carga de la página es de 532 milisegundos.
14. Agregue una cosa al listado y observe de nuevo las peticiones de red.
Observe que:
- Tras la autenticación sólo hay una petición HTTP.
- La petición pesa 136.7 KB.
- El tiempo de carga de la página es de 407 milisegundos.
15. Vaya a la opción Page Speed y presione el botón Analyze Performance.
Las observaciones esta vez son similares a las de la primera página.
- Activar el caché en el navegador para disminuir el consumo de recursos. Esta es una configuración HTTP.
- Serve scaled images. Nos recomienda generar una versión más pequeña de la imagen matrix.jpg. Pues aunque la aplicación muestra una imagen pequeña, el archivo de la imagen es grande.
16. Dado que una de las cosas que se debe lograr tras unas pruebas de carga y de rendimiento es cuantificar los resultados, podemos generar un breve resumen con el análisis de la aplicación hecho con Firebug y Google Page Speed.
Peso de las peticiones
Petición | Peso |
http://localhost:8080/EjemploPruebaCarga/ | 135.8 KB |
http://localhost:8080/EjemploPruebaCarga/css/ejemplocarga.css | 540 B |
http://localhost:8080/EjemploPruebaCarga/img/matrix-login.jpg | 77.7 KB |
POST http://localhost:8080/EjemploPruebaCarga/pages/login.jsf | 136.6 KB |
POST http://localhost:8080/EjemploPruebaCarga/pages/stuff.jsf | 136.7 KB |
Pesos por página
Página | Peso |
Login | 214.1 KB |
Cosas - cargar | 136.6 KB |
Cosas - agregar cosa | 136.7 KB |
Optimizaciones sugeridas por Google Page Speed
- Aprovechar caché del navegador.
- Activar compresión GZIP.
- Mejorar el tamaño de las imágenes.
- Optimizar el tamaño de CSS.