Yahoo!’s Design Pattern Library

Yahoo!’s Design Pattern Library, es una librería de patrones de diseño. Actualmente dispone de 56 diseños que pueden ayudar mucho a los desarrolladores y diseñadores al diseñar el interfaz y aumentar la usabilidad.

Excepcional Performance

Excepcional Performance, es una sección dedicada a la optimización del rendimiento de webs. Además de consejos, dispone de vídeos e información sobre la extensión Yslow! para Firebug, la cual permite analizar el rendimiento de una web desde el navegador Firefox.

YUI Library

YUI Library, es una librería de utilidades escritas en javascript y css para construir aplicaciones interactivas (RIA). Personalmente prefiero jquery como javascript framework, pero como en las diferentes distribuciones de Linux, cada una tiene sus pros y contras, y YUI es una biblioteca estable y potente – algo que queda demostrado gracias a que Yahoo! la usa en todas sus webs.

Astra

Astra, es una librería de componentes para Adobe Flash y Flex pensado para los desarrolladores Flash & Actionscript que permite construir aplicaciones interactivas (RIA).

Lenguajes de programación

En los centros de lenguajes de programación encontrarás tutoriales, articulos, foros y ejemplos de código de los siguientes lenguajes de programación: Flash, Java, JavaScript, .NET, PHP, Python, Ruby y Silverlight.

API y servicios web

Por último recordar que en este portal encontraremos toda la información y ejemplos relacionados con las más de 35 APIs y servicios web de Yahoo!, como por ejemplo Flickr, Yahoo! Maps. De todos ellos me gustaría destacar dos:

1. Pipes, una aplicación web que permite crear mashups de datos a través de un interfaz gráfico y diversas fuentes y formatos (rss, json, …)
2. Yahoo! Connected TV Platform, una plataforma para poder crear widgets para televisores Sony®, VIZIO®, Samsung®, LG®. Inicialmente solo estaba disponible para EE.UU, pero desde principios de este año el servicio está disponible para 16 paises, entre los que está España.

Análisis

Para analizar fácilmente la velocidad de carga de nuestro sitio disponemos básicamente de dos extensiones para Firefox/Firebug:

1. Yslow, creada por Yahoo!
2. Pagespeed, creada por Google

Estos complementos analizan múltiples factores y nos dan sugerencias para optimizar la página analizada. Las dos extensiones son muy parecidas tanto en las pruebas que ejecutan y las sugerencias que indican, pero en Yslow destaca la integración de Smush.it™, un optimizador de imágenes. En cambio en Pagespeed, es muy destacable la opción de disponer, en caso de sugerencia, de las alternativas minified u optimizadas de las css y los js, como también analizar e indicar los selectores css poco eficientes.

Optimización

Dependiendo de cada servidor y aplicaciones instaladas tendremos que optimizar diferentes factores, pero a modo de ejemplo, en el servidor de este blog era necesario optimizar los Cache-Control Header y la compresión gzip. Tras buscar en Google y leer varios post realice los siguientes pasos para optimizar el servidor:

1. Compresión gzip con mod_deflate

Primero hay que activar mod_deflate desde la linea de comando

a2enmod deflate

Luego editar el archivo deflate.conf que se encuentra en /etc/apache2/mods-available/deflate.conf

        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE image/x-icon
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/x-javascript
 
        AddOutputFilterByType DEFLATE application/x-httpd-php
        AddOutputFilterByType DEFLATE application/x-httpd-fastphp
        AddOutputFilterByType DEFLATE application/x-httpd-eruby
 
        DeflateCompressionLevel 9
 
# Netscape 4.X tiene ciertas limitaciones
        BrowserMatch ^Mozilla/4 gzip-only-text/html
 
# Netscape 4.06-4.08 tiene limitaciones
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
# MSIE enmascarado como Netscape
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
# Las siguientes lineas sirven para probar que la configuración funciona, en producción hay que comentarlas
 DeflateFilterNote Input instream
 DeflateFilterNote Output outstream
 DeflateFilterNote Ratio ratio
 LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
 CustomLog /var/log/apache2/deflate_log deflate

2. Expires headers mediante mod_expires

Primero activamos el modulo

a2enmod expires

Luego editamos o creamos el archivo expires.conf en el directorio /etc/apache2/mods-available/expires.conf

#        ExpiresDefault "access plus 2 months"
 
        ExpiresByType image/x-icon "access plus 1 month"
        ExpiresByType image/png "access plus 1 month"
        ExpiresByType image/jpg "access plus 1 month"
        ExpiresByType image/gif "access plus 1 month"
        ExpiresByType image/jpeg "access plus 1 month"
        ExpiresByType application/pdf "access plus 1 month"
        ExpiresByType audio/x-wav "access plus 1 month"
        ExpiresByType audio/mpeg "access plus 1 month"
        ExpiresByType video/mpeg "access plus 1 month"
        ExpiresByType video/mp4 "access plus 1 month"
        ExpiresByType video/quicktime "access plus 1 month"
        ExpiresByType video/x-ms-wmv "access plus 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
 
        ExpiresByType text/css "access plus 1 hour"
        ExpiresByType text/javascript "access plus 1 hour"

3. Desactivar ETags

Añadir las siguientes lienas al archivo /etc/apache2/apache2.conf

Header unset ETag
FileETag None

4. Reiniciar Apache para activar los cambios

/etc/init.d/apache2 restart

Ya solo queda volver a comprobar la página con las extensiones de Firebug y comparar los resultados.

Enlaces de interes

• Recomendaciones sobre rendimiento web de Google
• Recomendaciones de Yahoo!
• Tutorial sobre Apache2, mod_deflate, mod_expires y ETag
• Tutorial sobre ETag (Esta web tiene otros posts relacionados con optimización de Apache)