Tutorial básico de mod_pagespeed para Apache 2

por .

La semana pasada Google lanzo su proyecto de optimización más reciente se trata del modulo pagespeed para Apache 2, bajo su iniciativa de hacer la web más rápida. Cuidado a no confundir con la extensión Page Speed que también responde a la misma campaña pero que poco tiene que ver con este nuevo proyecto.

guia mod_pagespeed

Lo interesante de mod_pagespeed es que realiza de forma automática correcciones a nuestros sitios para que reflejen las mejores practicas para tener una web rápida, es decir, nos ayuda en la optimización sin prácticamente tocar una línea de código. Como yo siempre fui bastante reacio a las correcciones automáticas este fin de semana lo instale y realice varias pruebas, algunas con excelentes resultados y otros con no tanto.

Comencemos.

Requerimientos para instalar mod_pagespeed

  • Acceso SSH a nuestro servidor, por lo general este tipo de acceso lo vamos a tener en servidores VPS o bien dedicados.
  • Consola SSH
  • Paciencia, cafe o cualquier snack que nos ayude emocionalmente 😛

Instalación

El modulo page speed esta disponible para las plataformas CentOS/Fedora (32-bit y 64-bit), Debian/Ubuntu (32-bit y 64-bit) y finalmente, como es de esperarse obviamente, para Apache 2.2.

La instalación varia según la plataforma, la forma de realizarla sugerida por Google es la siguiente:

Para instalar los paquetes en Debian/Ubuntu, ejecutar desde la consola con acceso root:

dpkg -i mod-pagespeed-*.deb
apt-get -f install


Para CentOS/Fedora, ejecutar también como root:

yum localinstall mod-pagespeed-*.rpm


o

rpm -i mod-pagespeed-*.rpm

Nota 1: Si no cuentan con el repositorio de Google instalado (cosa muy probable) pueden hacerlo con el siguiente comando:

sudo touch /etc/default/mod-pagespeed

Nota 2: Antes de comenzar la instalación es muy importante que busquen en Google si su proveedor de alojamiento cuenta con alguna opción de instalación automática. Por ejemplo Dreamhost permite la instalación con tan solo tildar una opción. Otro ejemplo es Godaddy que también tiene preinstalado el modulo. En caso contrario muchos proveedores como Mediatemple están brindando guías punto a punto de como instalar este modulo especialmente en base a sus servidores y su configuración.

Editar el archivo pagespeed.conf

Una vez que finalizamos la instalación y si todo salió bien vamos a poder editar el archivo de configuración de Page Speed, es justamente desde aquí que le vamos a decir al modulo que tipo de optimización vamos a querer realizar en nuestro sitio. Para editar este archivo podemos utilizar vi, por lo general la ruta del archivo será la siguiente:

vi /etc/httpd/conf.d/pagespeed.conf

Antes de hacer nada, vamos a buscar dos líneas en especial que son las siguientes:

ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"

Estas lineas son muy importantes, indican donde se van a guardar los archivos generados por pagespeed como así también las cache dinámicas, por favor revisen si las carpetas indicadas están creadas y con permisos de escritura.

El archivo de configuración por defecto que viene con Page speed contiene una configuración básica de las distintas opciones, en si todo el archivo es bastante fácil de comprender, por ejemplo a continuación coloco un extracto de la instalación básica de los distintos filtros.

ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
ModPagespeedFileCacheSizeKb          102400
ModPagespeedFileCacheCleanIntervalMs 3600000
ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"
ModPagespeedLRUCacheKbPerProcess     1024
ModPagespeedLRUCacheByteLimit        16384
ModPagespeedCssInlineMaxBytes        2048
ModPagespeedImgInlineMaxBytes        2048
ModPagespeedJsInlineMaxBytes         2048
ModPagespeedCssOutlineMinBytes       3000
ModPagespeedJsOutlineMinBytes        3000

¿Filtros? Probablemente muchos se quedaron pensando a que me refería, o al menos le llamo la atención la palabra, por suerte los llamados filtros de Page Speed son los que nos permiten a nosotros configurar en su máximo esplendor este modulo de apache, con ellos vamos a determinar que queremos que haga exactamente.

Uso de los filtros de Page Speed

Los filtros pueden estar o no activos, para ello basta con colocar una directiva en cada caso:

Desactivar filtros:

ModPagespeedDisableFilters nombrefiltroA, nombrefiltroB

Activando filtros:

ModPagespeedEnableFilters nombrefiltroA, nombrefiltroB

Es muy importante tener en cuenta estas dos cosas, porque de aquí vamos a poder ir haciendo las respectivas pruebas. Un pequeño consejo, en el mismo archivo de configuración (pagespeed.conf) donde vamos ir activando o desactivando filtros según nuestras necesidades tenemos la línea de pánico, es decir, aquella que vamos a utilizar si hacemos algo que rompe todo en nuestro sitio :P, la linea en cuestión en definitiva activa o desactiva el mod completo y es la siguiente:

ModPagespeed on

Si en lugar de on escribimos off vamos a desactivar el modulo completo, como dije antes, para usar el caso de pánico si vemos que algo que activamos hizo algún desastre 😛

Filtros de mod_pagespeed

A continuación coloco los distintos filtros posibles de Page Speed y para que sirve cada uno de ellos, recuerden que para activarlos deben colocar ModPagespeedEnableFilters seguido del nombre del filtro, en caso de utilizar varios simplemente separen los nombres por comas.

add_instrumentation

Inserta en el código de forma automática un pequeño script javascript para controlar el tiempo de respuesta de nuestro sitio. El resultado luego lo podemos visualizar desde las estadísticas de Page Speed, las estadísticas vienen activadas por defecto al momento de instalar el modulo.

extend_cache

Brinda la posibilidad de potenciar el cacheo de elementos, para eso agrega un tiempo máximo de vida dentro de las cabeceras http, para aprovechar la capacidad de los navegadores modernos de guardar elementos en la cache local. Ademas utiliza un hash para renombrar los elementos que se encuentran en la cache.

Por ejemplo un elemento HTML y su cabecera http:

HTML tag   : <img src="logo.gif" />
HTTP header: Cache-Control:public, max-age=300

El mismo ejemplo utilizando el mod_pagespeed:

HTML tag   : <img src="ce.c17941127d34679357baa1b36fb4ecc5.logo,g" />
HTTP header: Cache-Control:public, max-age=31536000

collapse_whitespace

Quita todos los saltos de línea innecesarios en el HTML. Reduce el tamaño del documento al quitarlos acelerando la descarga.

combine_css

Como su nombre lo indica combina múltiples archivos CSS en uno solo. Con esto lo que logramos es reducir las llamadas al servidor. Por ejemplo si nuestro sitio cuenta con 3 archivos CSS mod_pagespeed los combina a los tres por orden de aparición en uno solo y lo guarda bajo un nombre creado en base a un hash.

combine_heads

Si nuestro documento contiene más de un head los combina en uno solo mejorando el renderizado en el navegador.

move_css_to_head

Mueve las llamadas a los archivos CSS al head por más que estas se encuentren al final del documento. Practica que mejora el renderizado de nuestro navegador.

elide_attributes

Un filtro para mi muy controversial. Elimina muchos tags “innecesarios” para reducir el tamaño del documento, pero a la vez deja a nuestro sitio como un documento invalido XHTML. Ademas hay que usarlo con mucha precaución si utilizamos por ejemplo jQuery porque elimina muchas veces cosas que son necesarias a la hora de “levantar” alguna variable. En lo personal no me gusta este filtro.

Ejemplo de un elemento:

  <button name="ok" disabled="disabled">

El mod_pagespeed reescribe:

  <button name="ok" disabled>

inline_css e inline_javascript

Ambos filtros hacen lo mismo. Copian el contenido de un CSS o JS externo y lo pegan directamente en el documento evitando hacer una llamada externa. Muchos se estarán preguntando que decide que se pega en el documento y que no, la respuesta esta en el extracto original del pagespeed.conf que coloque al principio, porque ahí es donde se estipula el tamaño máximo del archivo.

Por ejemplo con ModPagespeedCssInlineMaxBytes 2048 estamos diciendo que embeba en el documento todos los archivos CSS que no superen los 2048 bytes, si el archivo supera este tamaño que continue siendo una llamada externa, lo mismo ocurre con inline_javascript.

outline_css y outline_javascript

Hace exactamente lo contrario al ejemplo anterior. Si el CSS se encuentra dentro del documento y supera un tamaño máximo, este se quita del documento original y es llevado a un archivo externo. También este tamaño se decide desde las directivas utilizando ModPagespeedCssOutlineMinBytes y ModPagespeedJsOutlineMinBytes.

remove_quotes

Remueve las comillas innecesarias para ahorrar espacio. En este caso me parece una buena práctica. Probablemente el ahorro en recursos no sea impresionante, pero de seguro se notara al menos un poco al llegar a fin de mes 😛

remove_comments

Quita todos los comentarios del código HTML. Ahorrando espacio, es una opción bastante buena para ahorrarnos trabajo a nosotros.

rewrite_css, rewrite_images y rewrite_javascript

Los tres filtros que a mi más me gustaron. Se encargan de comprimir nuestros archivos al máximo posible. En el caso de las imágenes reduce el tamaño sin perder absolutamente nada de calidad. De todas las opciones estas tres son las que sin lugar a duda más diferencia marcaran a la hora de tiempos de descarga y ahorro de recursos (especialmente si hablamos de transferencia de datos).

Algo interesante de mod_pagespeed es que al trabajar con cache de datos no sobrecarga demasiado al servidor, por ejemplo cuando visitamos una pagina con una imagen la misma se muestra de forma original, pero la magia viene en la segunda visita porque ya va a mostrar la imagen desde la cache con las mejoras y optimizaciones realizadas.

Conclusión

El modulo de Page Speed es otra apuesta de Google por promocionar una serie de buenas practicas que existen desde ya hace bastante tiempo para que nuestros sitios web se descarguen muy rápido. La realidad es que el modulo esta creado para aquellas personas que no desean lidiar desde un comienzo con esta serie de lineamientos. Es una forma de automatizar cosas que tendríamos que hacer nosotros automáticamente al publicar un proyecto. No obstante es útil y practico, una vez instalado nos vamos a olvidar de muchos aspectos y tendremos gran parte de nuestro sitio optimizado.

En el blog de Google Webmaster al momento de lanzar el modulo se habla de una mejora del doble de velocidad. Este numero es muy probable que se alcance en sitios que no tienen ninguna optimización, pero no ocurrirá en aquellos sitios que ya cumplan con varias pautas o buenas practicas, como por ejemplo la de comprimir archivos CSS, Javascript y una optimización del tamaño de las imágenes.

Queda en cada uno de nosotros que filtros probar y cuales no. Por el momento aquí Pagespeed esta desactivado, pero seguiré probando los fines de semana con menos trafico que combinación es la que funciona mejor 😀

Más información sobre mod_pagespeed:

Categorizado en: