Siguiendo la dinámica de las Buenas Practicas de Desarrollo en PHP (ver Parte I) esta vez tocare un tema muy importante el cual va relacionado con la rapidez ó el tiempo de respuesta con la cual se entrega una página web, un estudio de YAHOO, nos dice que el tiempo total de carga del home de algunos sitios de Internet existe un porcentaje de responsabilidad donde el servidor tiene el 20% (entregar el index.html) y el restante 80% queda del lado cliente (cargar los js, css, flash, img, etc…), por ende todas las optimizaciones que realicemos del lado cliente tendrá un impacto del 80%.

Sin duda que son unos números bien interesante y que de alguna manera deben activar unas alertas en nuestros ambientes de producción.

La idea fundamental de este post es aplicar las mejores practicas (de acuerdo a mi experiencia) para hacer la entrega de nuestras páginas de la manera mas rápida, ya que hoy día es de conocimientos de muchos que milisegundos en un web son valiosos, pero debemos estar consciente de algo y es que el hecho de realizar optimizaciones no necesariamente influye en el tiempo de entrega ya que esto forma parte de las Buenas Prácticas de Desarrollo.

Existen herramientas que nos ayudan a realizar tal optimizaciones y para efecto de este post es esencial que se cuente con dos extensiones de Firefox Firebug y YSlow (la segunda es una extensión del Firebug) ambas son muy útiles para encontrar cuellos de botellas, consola JavaScript, actividad de la carga de los archivos con su tiempo, etc. Repito todo esto del lado cliente, no haré mucho hincapié en las herramientas cualquier duda sobre la utilización pueden consultar la documentación correspondiente.

Bien veamos un ejemplo donde se pueda apreciar el tiempo de carga de una página.

En esa imagen se puede apreciar el tiempo de carga de la página (planilla) respecto a los demás archivos (js, css, img, etc) los que se resalta corresponde al lado servidor, ahora veamos el comportamiento del lado cliente.

Los números no fallan y dicen la verdad sacando la cuenta con una simple regla de tres nos damos cuenta que del 100% de toda la entrega de página el 28% es responsabilidad del lado servidor y el resto es del cliente, es decir 72%.

A Optimizar…!

En esta apartado habláremos del estudio que hizo Yahoo y sus recomendaciones (que muchos no conocen) para mejorar la entrega de nuestras páginas web, destaco que solo tocare las que considero mas importante sin menos preciar a las demás sugerencias solo que existen un orden de prioridades y a medida que estas se cumplan el trabajo se hará bien ;-).

1-> Caché Expires o Cache control

Los diseños actuales de las paginas web se vuelven bastante ricos, esto significa mas archivos javascript, hojas de estilos, imágenes, etc. en nuestras paginas web. Esto conlleva que la primera vez que se cargue su página puede tener que hacer varias peticiones HTTP, pero utilizando la Expires Header de hacer los componentes cacheable. Esto evita innecesarias peticiones HTTP en posteriores visitas a la página. Expires headers son los más utilizados a menudo con las imágenes, sino que debe utilizarse en todos los componentes que incluyen scripts, hojas de estilo, y los componentes Flash.

La forma de utilizarlo desde apache, en primer lugar hay que habilitar el modulo expires (version 2.2.x de Apache)

#a2enmod expires

#/etc/init.d/apache2 restart

Una vez habilitado el modulo agregamos ciertas directivas en el archivo /etc/apache2/sites-enabled/000-defaulf, en este archivo en el caso que estemos haciendo pruebas de manera local, pero si estamos en un ambiente de producción o desarrollo se debe editar el archivo correspondiente al de la aplicación, en el caso que no tengamos acceso a modificar este archivo se puede colocar en un archivo .htaccess (si con el punto al principio)

Para mayor información en cuanto a este modulo de apache puedes ver su documentación.

2-> Extraer js y css a ficheros externos

El uso de archivos externos en el mundo real en general, produce que las páginas renderizen mas rápido porque el código JavaScript y CSS son archivos de caché del navegador. Los JavaScript y CSS que son escrito en documentos HTML lo obtiene cada vez que se ha descargado el documento HTML. Esto reduce el número de peticiones HTTP que se necesitan, pero aumenta el tamaño del documento HTML. Por otra parte, si el código JavaScript y CSS se encuentran en archivos externos de la caché del navegador, el tamaño del documento HTML se reduce sin aumentar el número de peticiones HTTP.

Combinar ficheros js y css en uno o dos ahorra mucho tiempo de carga y las conexión.

Compactar los ficheros Javascript

Consiste en quitar los comentarios, espacios en blancos incluso reducir el nombre de las variables, esto hace que la reducción se realice hasta en un 50% del archivo original, para lograr esto es necesario obtener un minimizador de de archivos js entre los mas famosos tenemos:

JSMin - http://javascript.crockford.com/jsmin.html

YUI Compressor - http://developer.yahoo.com/yui//compressor/

Para efecto del post utilizare YUI Compressor, una vez descargado, veremos un ejemplo práctico de lo que se puede llegar a reducir un archivo una vez aplicado este compresor, el archivo de prueba será la versión 1.6.0.2 de Prototype.

En la imagen se puede apreciar claramente que al aplicarle el yui compressor el peso del archivo se redujo en un 58% :-O, este compresor funciona de la misma manera para las hojas de estilo.

3-> Compresion gzip

La activación de este modulo de Apache comprime los js y css en un 80% aproximadamente :-).

Para activar el modulo hay que ejecutar lo siguiente:

#a2enmod deflate

Una vez cargado el modulo debemos indicar que archivos deseamos comprimir dejo algunos, vale destacar que todo esto depende de lo que enviemos el cliente

AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/html

#/etc/init.d/apache2 restart

Para mayor información sobre el modulo pueden consultar su Documentación.

4-> Mover css al <head>

• Mover los css al <head> aumenta la percepción de carga rápida de la página, ya que los elementos se renderizan progresivamente.
• Lo que comentamos de la percepción: si el usuario ve que se van renderizando cosas en pantalla, la percepción de velocidad es positiva :-)

5-> Mover script js al final de la página.

• Mover los js al final de la página, si es posible. En HTTP/1.1, hasta que no se acaba de leer un js no se sigue con el resto de la carga.

Como les comente al principio no son todas las recomendaciones solo las que considere importante para efecto del post.

Conclusiones…

• No hay porqué seguir todas las optimizaciones, ni en un orden establecido. Lo fundamental es ir implementando de manera progresiva.
• Reducir peticiones http request = mayor velocidad de carga
• caché de navegador agresiva.
• agrupación de elementos (js, css, imágenes).
• Comprimir salida con gzip. Además, minimizar ficheros javascript
• Concentrarse en la parte de la página que ve primero el usuario: renderizarla lo antes posible.
• Hacer la carga de las páginas progresivas, siempre han de verse cambios.

Bueno un poco largo el Post pero considero importante estos tips :-).

Enlace…

http://developer.yahoo.com/performance/rules.html#external