Share on Google+Share on FacebookTweet about this on Twitter

Hace unos días, estaba optimizando en la medida de lo posible el blog para que mis visitantes pudiesen cargar la web de una forma más veloz y con menos carga, cosa que siempre es deseable, no por mi blog en concreto, sino para cualquier web que exista. Y me topé sin querer entre una cosa y otra con un mod interesante para Apache. La sorpresa fue cuando el mod corría a cargo de Google. Es posible que la noticia no sea nueva, pero la verdad desconocía este módulo por completo.

Cualquiera que le guste la programación HTML o que haya profundizado aunque sea un poco de la web antes o después termina por encontrar la herramienta Firebug para Firefox (evidentemente). Esta herramienta es maravillosa, esto lo sabe bien cualquier programador HTML/PHP/CSS que pueda estar leyendo, desde el análisis de la propia web, edición insitu, depuración de JS, modificación CSS al instante, cabeceras HTML, peticiones…. francamente es de las herramientas más útiles que existen. Pues bien, desde hace ya bastante tiempo Google mantiene un complemento a este complemento llamado PageSpeed.

PageSpeed permite desde FireBug analizar cualquier web en busca de problemas conocidos de rendimiento, por poner unos ejemplos desde que la web no usa compresión, las imágenes están mal comprimidas, peticiones DNS en demasía, consejos para optimizar el código, código JS o CSS repetido, errores en el código JS o CSS, fallos en las cabeceras que se están recibiendo desde el servidor y como mejorarlas… en fin que hace un chequeo a fondo y en unos segundos. Es muy útil porque no solo identifica posibles problemas (y digo posibles porque evidentemente la aplicación no es perfecta y pueden aparecer falsos positivos) sino que ademas primero valora de 1 a 100 la puntuación de tu site, y segundo porque a cada problema expone si quieres una explicación detallada e igualmente los pasos a seguir para solucionarlos.Esta herramienta se hace fundamental desde por las malas prácticas que se tienen a la hora de programar como simplemente la comodidad. En cambio, no nos damos cuenta que simplemente con 3 tonterías y media, podemos hacer que una web sea 3, 4, 5 veces más rápida. Y todo ello sin costo alguno. Es lo mismo que sucede con la seguridad, los programadores a veces son verdaderos genios en la construcción de algoritmos, pero muchas veces pierden por ello otros puntos como las optimizaciones o la seguridad. En el caso de las web suele ser un poco lo mismo, cargar la web más rápidamente!! lo cual por supuesto influye las imágenes, la comprensión, las peticiones a los servidores, el caché… un sin fin de detalles. Esto además si contamos con los dispositivos portátiles es aun más importante, dado que estos muchas veces tienen limitaciones de transferencias, lo cual una web menos pesada implica también pagar menos.

Bien, la noticia no es por PageSpeed que funciona muy bien, sino que Google ha tenido o tubo una mejor idea. Ya tenemos la herramienta para detectar posibles problemas, ¿por qué no crear un módulo para Apache que pueda de forma automática corregir algunos de esos problemas? Este se llama mod_pagespeed. Evidentemente no es un módulo que sea necesario en muchas ocasiones, pero en muchas otras puede resultar francamente sorprendente!! podemos ahorrarnos varios segundos en cargar una web simplemente por especificar 3 cosas en la configuración del módulo. Lo sorprendente del caso es que el módulo funciona francamente bien.

Por ejemplo, hablemos de las imágenes. Una simple imagen jpg sin optimizar a una imagen jpg o png optimizada de tamaño medio puede tener un ahorro de la mitad de bytes. en la web, todo contenido gráfico suele ser imagen, luego es muy importante tener estas cuestiones presentes. Así por ejemplo si tampoco vamos a usar la resolución de la imagen original, lo ideal es redimensionarla al tamaño que vayamos a usar en la web. Son prácticas que como digo a veces por dejadez o simplemente por desconocimiento no hacemos, lo que se traduce en un tamaño muy superior de carga.

Como he dicho lo que hace este módulo de Apache es realizar muchas de las sugerencias que nos brinda PageSpeed al vuelo. Algunas de las maravillas que hace:

  • Extender el caché (el tiempo de vida de los elementos de la web), de forma que el contenido estático solo se actualice cada mucho tiempo, por supuesto si se detecta modificación en el contenido se refresca
  • Conversión y redimensionado automático de las imágenes. Ojo! evidentemente todo esto se hace al vuelo, no se modifican los archivos de origen, solo como Apache los sirve a los usuarios.
  • Eliminación de los retornos de carro y espacios en blanco de nuestro código HTML (generado por PHP o HTML puro) que pueda ser eliminado, con lo que no solo se sanea el código sino que el tamaño disminuye.
  • Minificación/Compactación de JS y CSS, con lo que el tamaño disminuye.
  • Unificación de CSS en un solo arcivo, con lo que se ahorran peticiones al servidor
  • CSS y JS directamente en el código HTML si son trozos pequeños, con lo que así se evita realizar al servidor una petición extra por dichos archivos externos
  • Eliminación de los comentarios en el código
  • Control sobre cualquiera de los parámetros necesario para las tareas indicada: Umbrales, tamaños, páginas o contenido a excluir/incluir…
  • Otros…

Como he dicho lo mejor es que funciona. Una vez configurado el módulo (ya sea desde Apache o con .htaccess) tan solo hay que ver las cabeceras que nos envía el servidor, así como el código fuente final de nuestra web. En mi caso, si cualquiera lo comprueba, verá que el código es completamente compacto, sin comentarios, limpio y saneado. Evidentemente todo esto puede hacerse a mano y de forma permanente en nuestro código, la facilidad aquí es que todo el trabajo lo hace Apache por nosotros. Evidentemente esto no es “gratis”, estamos forzando a Apache que antes de servir nuestro contenido lo prepare, lo cual si nuestro servidor no tiene suficientes recursos se producirán retrasos a la hora de servir el contenido, y al final puede ser peor el remedio que la enfermedad.

Como todo, es cuestión de probar un antes y un después. Desde mi experiencia funciona genial, aunque aconsejo siempre realizar ciertas tareas a mano y mantener en lo posible el código limpio sin acudir a otros sistemas. Como retoque final es perfecto. Evidentemente hay muchas otras optimizaciones que pueden hacerse y que el módulo en cuestión no podrá realizar, pero para eso también disponemos de PageSpeed como extensión de Firebug, que continuará siendo herramineta fundamental.

Una web optimizada de otra que no lo es no es algo a tomar a risa, hablamos de webs que pueden disminuirse a 4 veces menos y tener retrasos infinitamente menores. Todos queremos tener redes más potentes, navegar con más rapidez y fluidez, pero todo eso no es posible si tenemos prácticas que llevan a relentizaciones y al mal uso de los recursos de los servidores. Yo no suelo leer mi blog, no suelo abrirlo, a mí no me afecta que mi web se abra más rapida o más lenta. Pero si me importa que todo lo que aloje sea más eficiente, que mi servidor funcione mejor y que por supuesto la experiencia del usuario sea al menos aceptable. Eso hace que en la medida que pueda ir haciendo el blog más accesible, más cómodo y más rápido, estará bien justificado.

Un ejemplo de mi configuración actual del módulo:

ModPagespeed on
ModPagespeedAllow *
ModPagespeedEnableFilters extend_cache,remove_comments,remove_quotes,collapse_whitespace,combine_css,rewrite_css,rewrite_javascript,rewrite_images,inline_css,inline_javascript

 

Response Headersview source
Date Thu, 10 Feb 2011 18:50:13 GMT
Server Apache
X-Pingback http://blog.theliel.es/xmlrpc.php
Expires Wed, 11 Jan 1984 05:00:00 GMT
Cache-Control no-cache, must-revalidate, max-age=0, no-store
Pragma no-cache
X-Mod-Pagespeed 0.9.14.6-373
Vary Accept-Encoding
Content-Encoding gzip
Connection close
Transfer-Encoding chunked
Content-Type text/html; charset=UTF-8

 

Lo último por ejemplo que añadí fue la traducción automática de Google para navegadores configurados para otros idiomas (de nuevo gracias Google), cosas que cuestan muy poco de trabajo realizarlas y que puede hacer que mi blog sea más accesible para nuestros amigos de habla no hispana. Ojo!! Recordar que mi blog no se monetiza de ningún modo, no solo no es una fuente de ingreso sino de gasto propio. Con esto quiero decir que el interés que pueda o no tener en que mi blog sea más o menos “visible” y accesible a todos es meramente una cuestión de altruismo hacia vosotros. Pero creo firmemente que muchos os los merecéis, grandes personas hay detrás de mis lectores.

Un saludo a todos,

Theliel.