Análisis con Firebug y Google Page Speed

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.

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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:

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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".

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

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.

Análisis con Google Page Speed

Las observaciones esta vez son similares a las de la primera página.

Análisis con Google Page Speed
Análisis con Google Page Speed
  • 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.
Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License