lunes, 4 de abril de 2011

Page Speed online: una nueva herramienta para medir el rendimiento de sitios web

page speed online

Parte del desarrollo de sitios web de calidad es hacer un análisis correcto de su rendimiento, sobre todo desde temprano, utilizando recomendaciones y técnicas modernas para asegurar un sitio correctamente optimizado. Esto no quiere decir ir en contra de la famosa máxima de Donald Knuth, quien nos ensenó que "la optimización prematura es la causa de todos los males" en programación.

Cualquier sitio web público con una expectativa mínima de tráfico debería responder a una línea base para garantizar una buena experiencia a sus usuarios, y hoy día no necesitamos aplicar técnicas extravagantes o perder mucho tiempo para esto, sino más bien aplicar recursos estándares y sencillos, disponibles en todas las plataformas.

Entre las herramientas para realizar el análisis de rendimiento frecuentemente mencionamos la clásica Firebug (y su plugin YSlow) para Firefox, y Page Speed para Firefox o Chrome. Ambas son excelentes y complementarias, cada una con sus fortalezas, pero ahora Google aporta una alternativa más que puede ser útil en muchas circumstancias: Page Speed online.

A diferencia de las anteriores, en lugar de un plugin, este es un servicio en línea que realiza el mismo tipo de análisis, con lo que podemos ejecutarlo desde cualquier navegador, pero sobre todo puede orientar el análisis sobre navegadores desktop (corriendo en una computadora) como sobre navegadores móviles (sobre todo corriendo en smartphones), para los que incluye algunas reglas específicas como la de eliminar redirecciones en la página inicial que no puedan mantenerse en cache, o reducir la cantidad de Javascript durante la carga de la página. Estas son todas situaciones que no son tan problemáticas en otro ambiente, pero en un teléfono que tiene usualmente un ancho de banda y procesamiento limitados, hacen mucha diferencia.

Veamos un ejemplo. Realicé un análisis para navegadores desktop sobre un sitio popular como Twitter, ingresando la dirección:

page speed Twitter

Y el resultado dio 77 sobre 100 (bastante bueno). El detalle es el siguiente:

Prioridad alta: Estas son reglas que pueden generar mayor impacto en el rendimiento del sitio y que uno debería atacar inicialmente. En el caso de Twitter sólo queda en este nivel la regla: Combinar imágenes como sprites CSS.

Prioridad media: En el siguiente nivel las reglas son: entregar imágenes a escala, optimizar imágenes y minificar Javascript.

Prioridad baja: En este nivel ya hay unos cuantos más. Si quieren pueden ver el informe completo.

Para terminar ejecuto el mismo análisis para la versión móvil de Twitter:

twitter mobile

... y: ¡Oh, sorpresa! me da 100/100. No es de extrañar que Twitter esté muy optimizado para su acceso desde móviles. Así que pruebo con otro servicio que tiene buena tradición en cuando a rendimiento (es donde se empezó a trabajar en estas áreas): http://news.yahoo.com/

El resultado para móviles es de 79/100, que es bastante bueno.

No hay reglas de alta prioridad para atacar, y en las de media, ambas son muy específicas para teléfonos: diferir la interpretación de Javascript y hacer que las redirecciones de la página de inicio puedan mantenerse en cache.

Como siempre, lo importante de estos análisis es leer con atención la información acerca de cada regla, entender de qué se trata y que prácticas tenemos que adoptar de manera permanente para que no vuelva a producirse.