Categorías del Tutorial

icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-03-15

Tutorial visitado 7.597 veces Descargar en PDF
Optimización de páginas web con Page Speed.

Optimización de páginas web con Page Speed.


0. Índice de contenidos.


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:

Page Speed

Aparecerá una ventana como la que sigue:

Page Speed

Pulsando sobre "instalar ahora", se llevará a cabo la instalación, tras lo cuál se mostrará una ventana como la que sigue:

Page Speed

Ahora solo queda pulsar sobre "Reiniciar Firefox" y confirmar la operación.

Page Speed

4. Primeros pasos.

Una vez instalado, si abrimos la ventana de Firebug, ahora se mostrarán dos pestañas adicionales:

Page Speed

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

Page Speed

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:

Page Speed

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:

Page Speed

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:

    Page Speed
  • 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.



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

jmsanchez@autentia.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2010-12-14-14:38:43

Autor: jmsanchez

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.

Fecha publicación: 2010-12-14-12:57:53

Autor: Ruqui

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