Web y Performance II: Herramientas

En la entrada anterior hicimos un repaso general de las problematicas que suelen afectar el rendimiento y experiencia de usuario en aplicaciones web.

Algunas de estas problematicas son facilmente detectables, mientras que otras requieren un poco de trabajo y un correcto uso de las herramientas disponibles.

En conjunto, estas herramientas abarcan todo el ciclo de vida de la aplicación además de presentarse en diversas formas (plugins, aplicaciones web, bookmarklets, etc).

Pagespeed

Page SpeedEsta herramienta desarrollada por Google, comenzo como plugin de Firefox (y del Firebug) para luego extenderse a sitios y a las herramientas de desarrollador que ofrece esta misma compañia.
Básicamente ofrece una reseña sobre los aspectos que afectan el rendimiento del sitio con tips y soluciones para los mismos.
Es importante destacar que la reseña en cuestión es de muy alta calidad y precisión con respecto a la información que ofrece, indicando detalles como selectores ineficientes o archivos sin el caché recomendado.
De las soluciones provistas, es sin duda la que más me sorprendió la generación de imágenes optimizadas

Page Speed

Yslow

Herramienta de Yahoo, bastante similar a PageSpeed y mantenida (entre otros) por Stoyan Stefanov, cuyo blog es prácticamente una lectura obligada para aquellos desarrolladores que primen la performance.
Al igual que PageSpeed, Yslow presenta las distintas metricas relacionadas a la performance en conjunto de un puntaje y tips para mejorarlos. Incluye tambien unos bonitos gráficos estadisticos y la posibilidad de modificar el ruleset que compondrá el test.

Yslow

Yslow: Graficas

En el blog de Stoyan, vamos a encontrar bastante información sobre el uso y el hacking de esta herramienta.

yottaa.com

Este sitio web brinda distintas metricas de rendimiento (al igual que PageSpeed e Yslow) permitiendo además realizar un seguimiento en el tiempo de las mismas.

Yotta.com

Si bien actualmente se encuentra en etapa beta, no deja de ser una gran herramienta para llevar apunte del progreso de las metricas relacionadas.

Firebug

Dentro del ya super conocido Firebug, tenemos la posibilidad de analizar el desarrollo de la página/aplicación desde las peticiones realizadas hasta la ejecución de scripts.
Dentro del tab ‘Red’ (o ‘Net’ en caso de que usemos el Firebug en inglés) se pueden observar las peticiones realizadas, sus headers e inclusive el detalle del tiempo que consumieron en sus distintas etapas (resolver el dns, conectar, esperar, recibir, etc).

Firebug

Twitter, Twitter, Twitter...

En cuanto a los scripts, Firebug nos ayuda con un Profiler, que permite visualizar las llamadas javascript que se realizan con metricas específicas como ser la duración de las mismas.

Profiler

Firebug Profiler

DOM Monster

Bookmarklet inicialmente desarrollado por Thomas Fuschs, del cual se habló anteriormente en este blog. Al igual que otras herramientas, presenta metricas y tips sobre la performance, en este caso, focalizado principalmente sobre el DOM.
En su repositorio en GitHub está disponible su versión actualizada.

Experiencia de Usuario

Por último (pero no por ello menos importante), es de suma utilidad comprobar la usabilidad del sitio/aplicación en entornos no óptimos. Generalmente, los tests de usabilidad que se realizan, no contemplan el hecho de que no todos los usuarios disponen de computadoras (o dispositivos) actuales, así como tambien ignoran la calidad de servicio de red que puedan tener. Por ello es importante comprobar como puede comportarse la aplicación frente a factores variables (que exceden al browser) como ser: resolución, ancho de banda, velocidad de procesamiento, etc.


Shortlink: http://goo.gl/nAoju



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>