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
Date | Thu, 10 Feb 2011 18:50:13 GMT |
Server | Apache |
X-Pingback | https://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.
Curioso el modulo, me lo miraré para alguna web de mis clientes, quizá me sea util :) gracias
Lo conocía, pero cuidado con estas cosas, cuando hay que elegir es mejor elegir el SEO al rendimiento.
A modo de curiosidad aquí tienes el “SEO Report Card” http://googlewebmastercentral.blogspot.com/2010/03/googles-seo-report-card.html y el “SEO Engine Opitimaziton Started” http://www.megaupload.com/?d=15AVSJQW están en castellano por la red, estos son las versiones en inglés.
SI claro, es importante, pero a menos que se me pase algo por encima a priori este módulo no tendría que afectar en nado al SEO, al menos no he notado ningún cambio que sea significante por ahora (aunque aun es pronto), todo lo contrario, los análisis del blog han mejorado (aunque es evidente que se debe a las publicaciones y no a otros cambios).
De todos modos, las herramientas de webmaster de google y Analyitics ayudan enormemente en todas las labores, y es fácil rastrear cualquier posible error que existe a priori
Interesante desde luego. Me gustaria hacerte una pregunta:
Este css “Unificado” te lo genera automaticamente el mod page speed ? o has tenido que ponerlo tu a mano en tu WP? no entiendo bien el proceso …
Si a ver.
Hay dos cosas muy diferentes aquí. La una es la aplicación PageSpeed (Complemento de Firebug) que analiza la web en busca de como poder optimizarla. PageSpeed como cmoplemento de Firebug tan solo hace una serie de recomendaciones. Por ejemplo en caso de los CSS que comentas, si detecta que se han cargado a lo mejor 4 o 5 archivos de estilos independientes te sugerirá que los unifiques en uno solo. Por qué? Un solo archivo aunque pese más, evita realizar por ejemplo diferentes peticiones al mismo servidor (presuponiendo que todos los CSS estén en el mismo), o disminuir las peticiones DNS en caso que estén en servidores diferentes. Esto debería de ser una práctica común, intentar en la medida de lo posible minimizar la carga de los servidores de esta forma.
Ahora viene pagespeed como módulo. Es cierto que muchas de las optimizaciones pueden ser realizadas a mano (y deberían de ser realizadas a mano), pero también pueden ser realizadas por un programa, en este caso este módulo para apache. Este módulo (si se configura para ello) no toma las hojas CSS y las convierte por ti en sentido estricto, sino que lo realiza “al vuelo”:
Tu como usuario haces una petición a dicho servidor Apache. Dicha web posee por ejemplo 5 CSS diferentes (según el código php/html que exista en el servidor) y que el servidor web tiene que servir a ti como usuario. La magia está en que apache no te va a devolver la web “real” con sus 5 CSS diferentes! en vez de ello, servirá una versión optimizada que tan solo contendrá un archivo CSS unificado y por supuesto el código html ya modificado teniendo esto en cuenta. Posiblemente Apache use sistemas de caché para evitar tener que estar constantemente convirtiendo y sirviendo el contenido. Pero en cualquier caso el servidor no modifica los archivos ni el código original, solo lo reescribe y lo modifica al servirlo.
[Editado]
Si no quieres usar nombres/correos reales, al menos se mínima mente educado con los nombres que escoges
Tengo una duda q no he podido resolver aunque he leido muchos blogs y notas.
Es posible instalar este modo en un servidor, pero solo habilitarlo en dominios puntuales de dicho servidor?
si es posible, esto se hace desde .htaccess ?
tenes alguna explicacion o articulo para informarme?