Tutorial básico de Page Speed

Una de las cosas que mas me gusta hacer cuando tengo unos minutos es intentar optimizar los distintos códigos que hago, en mi caso es una especie de terapia puesto que a veces a no ser que tengas millones de visitas por día los cambios no marcan la diferencia, no obstante la acumulación de mejoras hace que el resultado final sea siempre mucho mejor.

Cuando hablamos de optimización del código de nuestros sitios web uno debe hablar de forma obligada de tres programas que son casi imprescindibles, tanto por lo fácil que resulta utilizarlos como la ayuda que nos proveen, ellos son Firefox, Firebug y Pagespeed, que es justamente de la extensión en la que vamos a centrarnos en este tutorial básico de uso.

¿Que es Page Speed?

Page Speed es una extensión o complemento para Firefox open source desarrollado ni mas ni menos por Google para todos los diseñadores o programadores web. Que tiene como razón de existir asistirnos en la mejora de nuestros código para una correcta optimizaron y un excelente desempeño. Esto da como resultado que nuestro sitio sea:

• Mas rápido
• Mas liviano
• Mas barato de mantener
• Mas eficiente

¿Suena bien verdad? … continuemos

¿Como instalar Page Speed?

Solo vamos a necesitar tres cosas, y para nuestra suerte todas gratuitas.

• Primero instalar Firefox, navegador que ya deberías tener instalado hace tiempo 😛
• Luego tener instalado otra extensión: Firebug también gratis, liviana y que sirve para otras cosas, es imprescindible.
• Y por ultimo y ahora si, instalar la extensión de Page Speed.

¿Como utilizar Page Speed?

Bueno si seguimos los simples pasos anteriores y no se presento ningún problema al iniciar Firefox vamos a encontrarnos con una pequeña cucaracha en el borde inferior derecho de la pantalla.  Que y a diferencia de cualquier otra cucaracha esta es muy útil y simpática, se debería ver así:

Ahora al hacer click sobre ella, se abrirá lo que instalamos en el paso anterior, es decir, Firebug, ahora lo que tenemos que hacer e ir a la solapa «Page Speed» donde veremos un botón central que debería decir «Analyze Performance» haciendo Click en el esta maravillosa extensión comenzara a analizar automáticamente el sitio que esta abierto en ese momento en Firefox.

Por ejemplo obtendremos el siguiente informe:

Como pueden ver en la imagen que coloque, Page Speed va a evaluar el desempeño de nuestro sitio por una serie de factores, dependiendo de la situación marcara con tres distintos estados a cada uno, estos son:

• Tilde Verde: Todo funciona perfecto, no hace falta hacer nada, la vida es bella.
• Alerta Amarilla: Si buen funciona podría mejorarse.
• Alerta Rojo: Tarea requerida y es aquí donde debemos prestar especial atención porque Page Speed acaba de detectar un factor por el cual podremos obtener una mejora sustancial.

En total existen 21 posibles escenarios por los cuales page speed va a evaluar nuestro sitio, con la ayuda de Tamara a continuación pasamos a hacer una muy pequeña introducción de cada uno, obviamente en la ayuda oficial de Pagespeed encontraran mas información, pero como este es un tutorial básico de uso no queríamos dejar de contarles mas o menos de que trata cada factor.

Índice

Mantenemos el nombre de cada buena practica para que tengan una forma de buscar una rápida referencia, ya que Page Speed las mostrara con exactamente el mismo nombre que colocamos a continuación.

1. Leverage browser caching
2. Remove unused CSS
3. Serve static content from a cookieless domain
4. Put CSS in the document head
5. Use efficient CSS selectors
6. Leverage proxy caching
7. Minify CSS
8. Minify JavaScript
9. Optimize images
10. Minimize cookie size
11. Enable gzip compression
12. Combine external JavaScript
13. Minimize DNS lookups
14. Optimize the order of styles and scripts
15. Serve resources from a consistent URL
16. Avoid CSS expressions
17. Combine external CSS
18. Specify image dimensions
19. Minimize redirects
20. Defer loading of JavaScript
21. Parallelize downloads across hostnames

1. Leverage browser caching

Colocando una fecha de caducidad o edad máxima en los headers del HTTP para recursos estáticos, permite que el explorador cargue previamente los recursos descargados desde el disco local, en lugar de utilizar la red.

2. Remove unused CSS

Este punto nos dice que estamos teniendo declaradas varias cosas dentro de nuestra hoja de estilos que no estamos utilizando, algo que es bastante normal y que si no es exagerado no es para nada nocivo, una buena practica para evitar este tipo de problemas es utilizar distintos css dependiendo de la sección o parte del sitio, es decir, si por ejemplo declaramos x cantidad de clases en nuestro css para mostrar cierta imagen en la home del sitio, quitarla en el css del archivo individual.

Obviamente y como venimos viendo en este tutorial todo depende de la situación en concreto.

3. Serve static content from a cookieless domain

Brindar recursos estáticos desde un dominio sin cookies, reduce el tamaño total de solicitudes hechas desde una página.

4. Put CSS in the document head

Esto es fácil y bien simple. Primero una recomendación: es mas eficiente utilizar la propiedad <link> que @import y por otro lado debemos colocar los estilos bien arriba dentro del <head></head> del documento. Mas fácil imposible, la diferencia se nota bastante.

5. Use efficient CSS selectors

Obviando claves selectoras ineficientes, que combinen con un gran número de elementos puede acelerar la visualización de la página.

6. Leverage proxy caching

Habilitando el caching en los headers HTTP para recursos estáticos, permite al explorador descargar fuentes desde un servidor proxy cercano, en lugar de un servidor de origen remoto.

7. Minify CSS

Compactar nuestras hojas de estilo pueden ahorrarnos algunos kb que pueden parecer insignificantes pero que no lo son tanto cuando comenzamos a multiplicar por el numero de visitantes. Existen varias herramientas para optimizar archivos css.

8. Minify JavaScript

Similar al caso anterior, compactar correctamente nuestras bibliotecas javascript se traduce directamente no solo en un ahorro de transferencia de archivos sino también en mejores tiempo de carga, recuerden que cuanto menos pesa nuestro sitio mas rápido podrá ser descargado.

También recuerden que muchas veces y cuando se habla de bibliotecas comunes como jQuery, mootools, etc. podemos utilizar libremente a Google para que nos preste el alojamiento completamente gratis, y ahorrar toda esa transferencia de datos.

9. Optimize images

El formato correcto, el tamaño y la pérdida de compresión de imágenes puede salvar muchos bytes de información.

10. Minimize cookie size

Manteniendo las cookies lo más pequeñas posible, asegura que una solicitud HTTP pueda entrar en un solo paquete.

11. Enable gzip compression

Utilizar la compresión Gzip es una de las grandes mejoras que podemos hacer para acelerar la descarga de nuestros sitios, en WordPress se puede hacer de forma mas o menos simple, en mi caso instale un plugin y listo pero dependiendo de la configuración de nuestro servidor habilitar la compresión se puede hacer de varias formas.

Como no todo es WordPress les deje otro enlace para activar la compresión gzip desde el htaccess.

12. Combine external JavaScript

Combinar scripts externos en la menor cantidad de archivos posibles, acorta los RTTs y retrasa la descarga de otros recursos.

13. Minimize DNS lookups

Reducir el número de nombres de dominios únicos, desde donde los recursos son brindandos, acorta el número de resoluciones de DNS que el explorador debe hacer, y en consecuencia, el retraso RTT.

14. Optimize the order of styles and scripts

Ordenar las hojas de estilo y los scripts inline externos, permite mejor paralelización de las descargas y acelera el tiempo de visualización del explorador.

15. Serve resources from a consistent URL

Es  importante brindar un recurso desde una URL única, para eliminar los bytes duplicados de descarga y RTTs adicionales.

16. Avoid CSS expressions

Las expresiones CSS degradan la performance de la visualizacion; reemplazandolas con alternativas, mejorará la visualización, en especial para usuarios de Internet Explorer.

Nota: Estas prácticas aplican solamente a Internet Explorer 5 a 7, que soportan expresiones CSS. Las expresiones CSS son desaprobados por IE 8, y no soportados por otros exploradores.

17. Combine external CSS

La idea principal de esto es que evitemos hacer muchas solicitudes, es decir, no exagerar haciendo llamados a CSS externos, algo que Google recomienda es utilizar hasta un máximo de 3 archivos externos, pero preferentemente que sean solo 2, esto se logra combinando, por ejemplo podemos juntar los que poseen unas pocas lineas logrando así un solo archivo en lugar de 4 o 5.

18. Specify image dimensions

Simplemente definir las dimensiones de las imágenes utilizando height y width.

19. Minimize redirects

Minimizar redirecciones HTTP desde una URL a otra, acorta los RTT adicionales y el tiempo de espera para los usuarios.

20. Defer loading of JavaScript

Diferir la carga de funciones JavaScript que no son necesarias al comienzo, reducen la descarga incial, permitiendo que otros recursos sean descargados en paralelo, y acelerando la ejecución y el tiempo de visualización.

21. Parallelize downloads across hostnames

Servir recursos desde cuatro o cinco nombres de dominio diferentes, aumenta la paralelización de descargas.

Finalmente, Page Speed no es la respuesta definitiva

Si bien me encanta Page Speed y me parece una herramienta de tremenda utilidad estoy seguro que no es la respuesta definitiva en cuanto a optimizaron de recursos se refiere, inclusive no siempre sus sugerencias deben ser tomadas absolutamente al pie de la letra.

Page Speed provee una serie de lineamientos, y no a todos los sitios estos consejos les resultan de igual utilidad, ni siquiera significa que lograr pasar al 100% esta validación sea lo mejor, lo que recomiendo es prestar atención a sus consejos pero tampoco enloquecer por cumplirlos a todos.