Tutorial para configurar mod_pagespeed en Apache 2


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.

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 , la linea en cuestión en definitiva activa o desactiva el mod completo y es la siguiente:

ModPagespeed onSi 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 :
HTTP header: Cache-Control:public, max-age=300El mismo ejemplo utilizando el mod_pagespeed:

HTML tag :
HTTP header: Cache-Control:public, max-age=31536000collapse_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:

El mod_pagespeed reescribe:

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

Califica este Artículo
0 / 5 (0 votos)

Categoría: Programación.




One Response to “Tutorial para configurar mod_pagespeed en Apache 2”

  1. james Dice:

    pero si yo tengo windows 8 como es la instalacion de este mod_pagespeed ahi dice claramente que sirve ubuntu como para apache siendo este ultimo el que yo tengo. ahora como instalo este mod. Por favor explicar bien esto. si en el apache hay q ir al archivo http.conf o en donde???
    gracias


Deja un comentario