Optimización de páginas web con Page Speed.
0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Instalación.
- 4. Primeros pasos.
- 5. Relación de buenas prácticas.
- 6. Referencias.
- 7. Conclusiones.
1. Introducción
Page Speed es un plugin para Firefox, basado en
Firebug,
que analiza el rendimiento de una página web en base a un catálogo de buenas prácticas. El objetivo de Page Speed es realizar una serie de recomendaciones para mejorar el tiempo de carga de la página y,
además, optimiza el tamaño de las imágenes de la misma, de modo que podemos descargarlas para hacer uso de ellas.
Page Speed es una herramienta de Google que usa internamente en sus propios desarrollos y que, como otras, ha puesto a disposición
de la comunidad de desarrolladores.
2. Entorno.
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
- Sistema Operativo: Mac OS X Snow Leopard 10.6.1
- Mozilla Firefox 3.6.
- Firebug 1.5.2
- Page Speed 1.6
3. Instalación.
Para instalar Page Speed es necesario tener Firefox 3.5 y Firebug 1.4.2 o superiores, y la instalación es como la de cualquier plugin.
Lo primero es acceder a la página de descarga del plugin de Page Speed y pulsar sobre el siguiente enlace:
Aparecerá una ventana como la que sigue:
Pulsando sobre «instalar ahora», se llevará a cabo la instalación, tras lo cuál se mostrará una ventana como la que sigue:
Ahora solo queda pulsar sobre «Reiniciar Firefox» y confirmar la operación.
4. Primeros pasos.
Una vez instalado, si abrimos la ventana de Firebug, ahora se mostrarán dos pestañas adicionales:
La primera es la que permite realizar el análisis de rendimiento y, para ello, basta con pulsar «Analyze Performance», tras lo cuál se mostrará una lista
como la que sigue, el resultado dependerá, por supuesto, de la web que analicemos!.
Como veis, muestra una lista de recomendaciones ordenada por nivel de criticidad, de modo que:
- las marcadas en rojo son las más críticas, se ha detectado un factor, por el cuál podemos obtener una mejora sustancial,
- las marcadas en amarillo son las que, aunque funcionan bien, podrían mejorarse,
- las marcadas en verde indican una baja prioridad, si muestran una flecha serán pequeñas mejoras, y
- las marcadas en azul indican un buen funcionamiento.
Las recomendaciones que podemos consultar en la
página de ayuda de Page Speed
y haremos un pequeño resumen en el siguiente punto (buenas prácticas).
La segunda pestaña muestra una línea de tiempo de carga de la página, similar a la que ya provee Firebug (aunque más centrada en el rendimiento,
no tanto en la monitorización de red: petición/respuesta), pulsando sobre «Page Speed Activity», se puede grabar una línea de tiempo como la que sigue:
Si, además, seleccionamos la opción «Paint Snapshots» (aunque irá más lento) podremos visualizar en pequeñas capturas las partes de la página que
se ven afectadas por cada línea de tiempo:
5. Relación de buenas prácticas.
Vamos a llevar a cabo un pequeño resumen de cada regla.
-
Avoid bad requests
Si eliminamos los «enlaces rotos», esto es, las solicitudes que se traducen en respuestas 404/410, evitamos desperdiciarlas.
-
Avoid CSS expressions
Las expresiones CSS o propiedades dinámicas consisten en expresiones javascript incluidas en valores de propiedades CSS. Su uso incide en el rendimiento de la renderización. Esta regla se aplica a los usuarios de Internet Explorer < 8. puesto que en la versión 8 están deprecadas.
-
Combine external CSS
El objetivo es evitar realizar muchas peticiones, cuanto más CSS externos, más solicitudes. Google recomienda usar hasta un máximo de 3 archivos externos.
-
Combine external JavaScript
Combinar scripts externos en la menor cantidad de archivos posibles, puesto que retrasan la descarga de otros recursos. Google recomienda usar hasta un máximo de 2 archivos externos.
-
Defer loading of JavaScript
Retrasar la carga de funciones JavaScript que no son necesarias en la carga inicial de la página, reducen la descarga incial, permitiendo que otros recursos sean descargados en paralelo,
y aceleran la ejecución y el tiempo de visualización. -
Enable compression
Utilizar la compresión Gzip es una gran mejora que podemos realizar para acelerar la descarga de nuestras webs.
-
Leverage browser caching
Indicar una fecha de expiración en la cabecera http para recursos estáticos, permite que el explorador de prioridad a los recursos descargados,
en lugar de volver a descargarlos, con lo que no hay tráfico de red. -
Leverage proxy caching
Habilitando la caché en la cabecera http para recursos estáticos, permite que al explorador realizar las descargas de dichos recursos desde un servidor proxy cercano,
en lugar de un servidor de origen remoto. -
Minify CSS
Compactar las hojas de estilo CSS puede ahorrarnos algunos bytes que pueden parecer insignificantes pero que no lo son tanto cuando comenzamos a
multiplicar por el numero de visitantes. -
Minify HTML
Compactar el código HTML, incluyendo el javascript y css embebidos puede ahorrar, del mismo modo, algunos bytes de datos, velocidad de descarga,
parseo y tiempo de ejecución. -
Minify JavaScript
Similar a los anteriores, compactar correctamente nuestras bibliotecas javascript se traduce directamente no solo en un ahorro de transferencia de archivos
sino también en mejores tiempos de carga, siguiendo con la misma idea, cuanto menos pesa nuestro sitio mas rápido podrá ser descargado. -
Minimize request size
Manteniendo las cookies y las cabeceras de las peticiones lo más reducidas posibles aseguran que una petición http pueda ser incluida en un solo paquete.
-
Minimize DNS lookups
Reducir el número de nombres de dominios únicos, desde donde los recursos son descargados, reduce el número de resoluciones de DNS que el explorador debe realizar.
-
Minimize redirects
Minimizar redirecciones HTTP desde una URL a otra, reduce el tiempo de espera para los usuarios.
-
Optimize images
El formato y la compresión correctas pueden ahorrar muchos bytes de información. Pero no te molestes en calcularlo porque Page Speed ya lo hace por ti,
puesto que lleva a cabo un análisis y no solo te informa del ahorro en bytes que podrías obtener, sino que también te optimiza la imagen permitiendo su
visualización y descarga: -
Optimize the order of styles and scripts
Ordenar las hojas de estilo y los scripts externos, permite mejor paralelización de las descargas y acelera el tiempo de visualización del explorador.
La recomendación es incluir primero los estilos y después los scripts. -
Parallelize downloads across hostnames
Servir recursos desde cuatro o cinco nombres de dominio diferentes, aumenta la paralelización de descargas.
-
Put CSS in the document head
Debemos colocar los estilos en la cabecera de nuestro html, dentro del <head></head> del documento y es mas eficiente utilizar la
etiqueta <link> que la inclusión vía @import. Esta recomendación influye en el tiempo de renderizado de la página. -
Remove unused CSS
Este punto indica que tenemos estilos en las css que no usamos, pudiendo acceder al catálogo de los mismos. Si estuviésemos en el entorno de
PMD
podríamos decir que está regla es «controversial», puesto que si tenemos todos los estilos del site en un solo fichero y se cachea en el navegador,
ganaríamos en tráfico de red, solo que la primera descarga es más «pesada». -
Serve resources from a consistent URL
Es importante servir un recurso desde una URL única, para eliminar los bytes duplicados de descarga. Si necesitas referenciar un recurso desde más de
una ubicación dentro de la página, por ejemplo, una imagen, que ambas hagan referecia a la misma ubicación, para que la segunda esté cacheada. -
Serve scaled images
El redimensionado correcto de las imágenes puede ahorrar muchos bytes. No solicites una imagen de tamaño superior al que quieres mostrar, a no ser que
nos encontremos en la situación de la recomendación anterior. -
Serve static content from a cookieless domain
Los recursos estáticos como imágenes, js y css, no deben ir acompañados de cookies, puesto que no hay interacciones del usuario sobre los mismos.
Podemos reducir la latencia sirviendo dichos recursos desde un dominio que no sirva cookies. -
Specify a character set early
Especificar un set de caracteres en la cabecera para los documentos HTML permite al navegador comenzar a ejecutar los scripts inmediatamente.
-
Specify image dimensions
Especificar las dimensiones de las imágenes utilizando height y width facilita un renderizado más rápido, puesto que elimina la necesidad de repintar
la página. -
Use efficient CSS selectors
Hay selectores css que son más eficientes que otros, básicamente porque depende del ámbito, en la generación del árbol DOM el parser tendrá que
recorrer un número menor o mayor de nodos. Está desaconsejado el uso de selectores universales (*), de etiquetas como claves, y de adyacencia
6. Referencias.
- http://code.google.com/intl/es-ES/speed/page-speed/
- http://code.google.com/intl/es-ES/speed/page-speed/docs/rules_intro.html
7. Conclusiones.
Las mejoras en el rendimiento no solo hay que verlas desde el punto de vista del cliente, que también, sino desde el punto de vista del tráfico
contratado en nuestro hosting. Una web optimizada no solo repercute en la velocidad de descarga o carga, sino que incide directamente en la tasa
de transferencia mensual que tengamos contratada y esto es coste.
Como con todo, son recomendaciones y hay que adaptarlas a nuestra realidad particular.
En próximos tutoriales, poco a poco, analizaremos cómo cumplir estas recomendaciones.
Un saludo.
Jose
Hola José: muchas gracias por las maravillosas explicaciones que das. Ocurre que yo soy una ignorante en la materia pero quiero optimizar mi blog pues me dice en herramientas de webmaster que es excesivamente lento
He visto con pagespeed los problemas pero ahora no sé donde tengo que actuar. Por ejemplo: me dice que ponga una fecha de expiración pero no se donde tengo que hacerlo o con que herramienta? o ¿cómo comprimo un javascript? ¿Conoces algún tutorial completo?
Si mis preguntas te parecen tontas lo comprenderé.
Un saludo
Ruqui
Hola Ruqui,
La verdad es que si haces una búsqueda rápida en google por \\\»comprimir javascript\\\» puedes encontrar rápidamente información al respecto. Si usan maven, hay incluso un plugin que te comprime y te ofusca.
Puede ampliar más información sobre la herramienta en el site de la misma: http://code.google.com/intl/es-ES/speed/page-speed/docs/rules_intro.html
Un saludo y me alegro que haya sido de tu interés el tutorial.
Jose.