Optimización Web

Como ya comente en entradas anteriores, vamos a dedicar máximo esfuerzo a que la web de nuestra práctica este optimizada.

Antes de empezar, tenemos una cosa clara, es que cuanto más pequeños sean los ficheros (html, cssl, jpg,...) y cuantas menos peticiones realicemos, más rápida será la página. Pero claro,  para obtener unos resultados aceptables, requerimos de unos mínimos.

Las herramientas que usaremos, será un analizador de velocidad y rendimiento web. En el guión de la práctica, se nos propone usar, WebSiteOptimization .  En mi opinión esta herramienta está un poco anticuada (última versión Sept 2008), constantemente hace referencia a modems de 56K (los cuales han pasado a la historia), por ejemplo en el apartado de tamaño dice "Consider reducing total page size to less than 100K", partiendo que por ejemplo jQuery v1.9.0 en su formato minificado pesa 91K, conseguir el objetivo de 100K es prácticamente imposible. Otra pega que le veo, es que en el fondo es publicidad de un libro, y efectivamente te indica que cosas están mal de nuestra web, pero nos remite al libro para solucionarlo.

En nuestro caso vamos a utilizar tres páginas alternativas, que desde mi punto de vista nos ofrecen una información más actualizada y completa, así como una guía para solucionar los problemas.

Las dos primeras serán gtMtrix.com y PingDom Tools, y la tercera Page Speed de Google Developers. Aunque las puntuaciones mejoran simultáneamente en las tres, damos especial importancia a la de Google, porque en el fondo, durante toda la práctica hemos usado herramientas de google (sites, blogger, youtube, trend,drive,...), y nuestro objetivo es mejorar para conseguir posicionamiento en las búsquedas, búsquedas de Google.

La primera vez que evaluamos nuestra página, fue bastante desolador, parecía que todo estaba mal, pero poco a poco ha ido mejorando.

Antes de empezar a realizar los cambios que recomendaban los analizadores, mi primera intuición es que habría mucho trabajo a realizar en la codificación HTML, pero me equivoque, el apartado que había que manipular era la configuración del servidor, y el mecanismo para hacerlo era mediante el uso del fichero .htaccess.

Como que hasta la fecha nunca había editado este fichero, ni sabia que podía hacerse en él, toco tirar de buscador y documentarse sobre el tema.

En este fichero haremos varias coas importantes para mejorar el rendimiento de nuestro sitio:

• Definir que todas las cabeceras servidas son UTF-8, y sacar esta información de nuestro código HTML
• Habilitar compresión, las paginas servidas serán comprimidas con gZip, lo cual permitirá mejorar uno de los objetivos principales, reducción de tamaño.
• Especificar cache de navegador, se trata de definir un tiempo de caducidad alto para los elementos estáticos de nuestra web, de esa forma no es necesario que cada vez se recarguen, y el navegador puede usarlos de la cahe.
• Y otros pequeños cambios, como desactivar ETag, ...

Este es un estracto del fichero .htaccess con los diferentes ajustes que he realizado:

AddDefaultCharset UTF-8 Header unset ETag FileETag None # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> ...

# END Cache-Control Headers # compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html ...

Con esto ya hemos mejorado bastante, hemos conseguido reducir el tamaño de los ficheros servidos, y hacemos un uso más óptimo de la cache. 

El objetivo ya lo dijimos al principio de esta entrada, reducir el tamaño de los ficheros, y reducir el número de peticiones. 

Sigamos reduciendo los tamaños de ficheros:

• Imagenes, por supuesto debemos utilizar imágenes que nos aporten la mejor calidad con el menor tamaño, JPG. Pero aún suponiendo que estamos usando un formato adecuado, es bueno pasar todas las imagenes por un compresor de imágenes como Smush.it de Yahoo, esto nos permitirá ahorrarnos unos cuantos K. El siguiente punto importante con las imágenes en no servir imágenes de tamaño mayor al que queremos visualizar, es un derroche de bytes el tener que reescalar una imagen, las imágenes deberian ser servidas al tamaño que queremos visualizarlas.

• Minimizar CSS, JS. Se trata de eliminar los datos innecesarios de los ficheros CSS y JS, mayormente espacios en blanco, comentarios, tabulaciones. En lar red podemos encontrar muchas herramientas para reducir el tamaño (minify tools), nostros usamos http://refresh-sf.com/yui/ . Los JS ademas de minificar también podemos aplicarle Obfuscation, nosotros no lo hemos usado, este método lo que hace es renombrar variables y nombres de funciones, a nombres más cortos, para así ahorrar bytes. El resultado de minify y obfuscation, es un código fuente prácticamente ilegible, pero eso no nos importa, lo importante es que funcione la web bien, y rápido. Nosotros nos guardamos una copia de código fuente sin reducir para su mantenimiento  y le aplicamos la reducción antes de subirla al servidor. Aunque no lo hemos hecho, el código HTML también se puede minimiizar.

En este punto ya no podemos reducir mucho más los tamaños, ahora vamos a intentar reducir el numero de peticiones http. Como sabemos cada petición tiene un coste de bytes (cabeceras de petición y respuesta), la idea es combinar en la medida de lo posible todos los ficheros JS y CSS en un solo fichero de cada tipo, en lugar de tener n ficheros .JS, concentrar todo nuestro JS en un solo fichero, con lo que solo haremos una petición GET. Esto no nos ha llevado mucho trabajo, simplente combiar los ficheros.

El analizador nos informa que ahora donde hacemos más peticiones es al cargar las imágenes para montar  menús, logos, etc, y nos sugiere que apliquemos la técnica de CSS sprites. Otra vez toca documentarse, esta técnica consiste en unificar todas las pequeñas imágenes de nuestra web, en una sola (de esa forma solo haremos una petición ), y para visualizarlas haremos referencia a las coordenadas y tamaño de la porción de imagen que queremos usar. Suena complicado, pero es fácil encontrar generadores de CSS sprites que nos juntan las imágenes  y nos devuelven un CSS con los tamaños y coordenadas de cada imagen, en nuestro caso usamos la siguiente imagen combinada con el CSS.

Con esto hemos conseguido rebajar 9 peticiones http.

Llegados a este punto, hemos conseguido mejorar mucho el rendimiento de nuestra web, y aunque siguen habiendo posibles mejoras, su impacto es menor, o bien no lo podemos aplicar. 

Una recomendación es usar CDN, pero salvo para jQuery, el resto no podemos, otra se refiere a problemas de rendimiento de código de terceros (botón me gusta de FaceBook), y otras sencillamente no han significado mejoría (usar diferente fuentes para descarga de imágenes  y de esa forma paralizarlas, en teoría debiera mejorar, pero perdemos la mejora con el tiempo de DNS). 

HML5, nos permite hacer carga asíncrona de algunos elementos, no reduce el tiempo global, pero evita bloqueos.