Pagespeed: Análisis de performance automático del lado del cliente (desktop y mobile)

 La performance de las aplicaciones la solemos atacar del lado del servidor, ahí seguramente es donde estén las cosas más importantes a mejorar, los cuellos de botella que marquen la diferencia. De todos modos, existen muchas optimizaciones que podemos hacer considerando el lado del cliente.

Una herramienta muy útil para lograr esta tarea es PageSpeed de Google (existen varias alternativas, como YSlow! de Yahoo! y otras, pero por un tema de practicidad, y otras ventajas que ofrece, terminamos utilizando esta siempre).

Se puede usar como una browser extension del Chrome o directamente en la web. Básicamente se accede a la web a probar, o se ingresa la URL de la misma, y la herramienta hace el análisis mostrando una serie de sugerencias basadas en un conjunto de "best-practices".

Brinda información útil para optimizaciones en performance de aplicaciones web del lado del cliente.

• Web desktop
• Mobile (esto es algo bastante nuevo)

Otro aspecto a destacar es que es independiente del tiempo de red o del servidor, basa su análisis exclusivamente en aspectos de desempeño del lado del cliente.
Aquí lo ideal sería hacer el análisis para las páginas más usadas del sitio, para que apuntemos a implementar las mejoras que más impacto tendrán.

Principales reglas o best-practices (aquí para más detalles):

Speed Rules

• Avoid landing page redirects
• Enable compression
• Improve server response time
• Leverage browser caching
• Minify resources
• Optimize images
• Optimize CSS Delivery
• Prioritize visible content
• Remove render-blocking JavaScript
• Use asynchronous scripts

Usability Rules

• Avoid plugins
• Configure the viewport
• Size content to viewport
• Size tap targets appropriately
• Use legible font sizes

Como se puede observar, hay reglas que enfocan el uso de caché, los redirects, comprimir los mensajes, definición y uso de CSS y JavaScripts, etc. Para mobile tiene algunos análisis extra especiales, y algunos relacionados con la usabilidad.

El reporte final será una lista de resultados en base a cada una de estas reglas, y para su interpretación se muestran símbolos de esta forma:

Los escenarios que están marcados en rojo, son los de mayor prioridad. Estas sugerencias representan las que van a dar mayor ganancia en materia de performance a la hora de aplicarlas y además, se sugiere que sean las que se atiendan primero.

Los escenarios que están en amarillo, son los que presentan problemas de prioridad media. Estas sugerencias generalmente representan ganancias no muy altas, o que llevan demasiado trabajo implementarlas y se sugieren atenderlas después de atender las de mayor prioridad.

Los escenarios que están en verde son los que están trabajando de manera adecuada.

A modo de ejemplo, les dejo dos capturas que corresponden a analizar el propio sitio de Google.

No solo da la lista de "findings" o llamémosle "oportunidades de mejora", sino que también da indicaciones de cómo se implementan esas mejoras, dando enlaces para ver dónde sacar más información sobre cada punto.

Sin embargo, no es conveniente considerar esta tool como la respuesta definitiva al testing de performance. Esto sólo considera el lado del cliente, para el lado del servidor existe toda una metodología que venimos mencionando siempre, para lo cual les recomendamos lean lo que ya les hemos contado por ejemplo:

• Problemas de performance ¿cómo comenzar?
• ¿Cuándo se ejecutan las pruebas de performance?
• ¿Cómo ejecutar pruebas de performance y que no se encuentren tantos problemas?
• Problemas comunes de performance
• Pruebas de performance en producción
• Requisitos de performance para determinar el oráculo de pruebas
• Test de performance en GeneXus

Por otro lado, las sugerencias no deben tomarse siempre al pie de la letra. La herramienta contiene una serie de reglas que no a todos los sitios web le van a servir de la misma manera, incluso, tener el 100% de los test en verde no significa que la página funcione de la forma que deseamos (y al revés, que no te den todas las pruebas en verde no significan que la página funcione mal).

Por lo tanto, se recomienda que se utilice esta tool como una forma de analizar el desempeño de un sitio, siempre y cuando se tenga presente que más allá de los resultados del análisis, el desarrollador es el que sabe bien cómo debe comportarse el sitio y cómo podría tener en cuenta las sugerencias, considerando el costo de implementarlas y el beneficio a obtener.

Fuente: http://blog.abstracta.com.uy/2014/05/pagespeed-analisis-de-performance.html