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)

Aunque estas practicas no están extendidas lo que deberían, existen múltiples herramientas que permiten crear wireframes de una manera rápida e intuitiva (tanto versiones Cloud Computing & Saas. como programas para diferentes plataformas):

1. Mockingbird (Online/Saas)

Es una herramienta online de creación de wireframes (Wireframing-Tool). Al estar programada sobre el Framework “Cappuccino” la interacción es como en un programa de escritorio. Los wireframes se crean de una manera sencilla mediante Drag & Drop de elementos comunes en el diseño de páginas web. El resultado puede descargarse o enviarse por email.

2. Firefox Pencil (Mac/Windows)

Esta herramienta está basada en el Geckoengine del navegador Firefox, y se instala como un complemento (plugin). Por lo tanto es una buena solución para esquemas rapidos e independientes de la plataforma. Los wireframes se pueden exportar en formato png. En su contra, el uso es, a veces, un poco más lento debido a que no dispone de atajos de teclado. Pero su escaso tamaño (< 450 KB) y ser una herramienta gratuita la hacen una muy buena elección.

3. Iplotz (Online/Saas)

Es una herramienta online que permite crear wireframes clickables. Además incluye funcionalidades básicas de gestión de proyectos, como por ejemplo asignar tareas, por lo que es posible colaborar con otros usuarios en la creación de los wireframes. Aunque sea un servicio Saas, existe una versión descargable programada en AIR. Finalmente, hay múltiples planes que se adaptan a diversos usuarios, desde una versión gratuita (1 proyecto limitado a 5 pantallas) a versiones corporativas (múltiples usuarios y proyectos ilimitados)

4. Balsamiq (Mac/Windows)

Balsamiq es una herramienta programada en Flex y la creación de wireframes es muy intuitiva y permite crearlos de una manera rápida. Las plantillas, con un estilo pintado a mano, facilitan que al presentar los prototipos no se malinterpreten con versiones finales. En la web de balsamiq se puede probar la herramienta de manera gratuita y exportar los wireframes a png (con marca de agua). Y en el caso de utilizar la herramienta habitualmente existe una versión de pago, además de una versión onlines/saas en el futuro. Por ultimo al basarse en archivos xml, es posible integrar la herramienta con otros programas como por ejemplo gestores de proyectos.

5. Omnigraffle Pro (Mac)

Esta herramienta permite crear rápidamente wireframes, diagramas de proceso y sitemaps. Las características más interesantes de Omnigraffle es que permite crear capas como en Photoshop y usar plantillas predefinidas, que pueden descargarse de internet – por ejemplo de Graffletopia. Estas plantillas permite crear fácilmente wireframes de aplicaciones de Facebook y Iphone, Elementos Ajax, Formatos publicitarios o elementos de Social Media Webs. También es posible crear prototipos clickables al poder definir zonas interactivas que al exportarse a pdf clickables dan cierta interacción (aunque no pueden sustituir a prototipos en html)

6. Axure (Windows)

En comparación con otras herramientas Axure permite crear prototipos interactivos en html/javascript. La creación de prototipos interactivos es muy util tanto para presentaciones como para pruebas de usuarios y poder hacerse una idea de la futura web. Otra funcionalidad interesante es la posibilidad de crear comentarios en los documentos que luego pueden exportarse a formato Word, para crear la documentación conceptual de un proyecto. Como en otras herramientas es posible cargar plantillas para agilizar la creación de los wireframes.

7. Adobe FlashCatalyst (Mac/Windows)

Este programa desarrollado por Adobe aun se encuentra en su fase de desarrollo. Aunque solo este disponible una versión beta, la herramienta es muy solida. Al ser un producto Adobe permite cargar archivos de otras herramientas Adobe como por ejemplo Photoshop o Illustrator. Lo más destacable de FlashCatalyst es que permite añadir interacción a los elementos de diseño hasta el punto de crear animaciones avanzadas como por ejemplo scroll, fundidos, etc. Por ello FlashCatalyst es, seguramente, la herramienta ideal para la creación de prototipos con animaciones complejas, ya que es algo limitada para wireframes estáticos.

Otras referencias

En resumen, actualmente existen múltiples herramientas para crear wireframes estáticos y prototipos clickables. Puedes encontrar una amplia tabla resumen en en este articulo de Dan Harrelson.