Cómo automatizar la medición del rendimiento web

Addy Osmani
Addy Osmani

El rendimiento web puede tener un gran impacto en la experiencia del usuario completa. Si últimamente estuviste pensando en mejorar el rendimiento de tu sitio, es probable que hayas oído hablar de PageSpeed Insights, una herramienta que analiza páginas y ofrece consejos sobre cómo hacerlas más rápidas según las prácticas recomendadas para el rendimiento de la Web móvil y para computadoras de escritorio.

Las puntuaciones de PageSpeed se basan en una serie de factores, como qué tan bien se minimicen las secuencias de comandos, cómo se optimizan las imágenes, se comprime el contenido con gzip, los botones táctiles tienen un tamaño adecuado y se evitan los redireccionamientos de página de destino.

Dado que el 40% de los usuarios tienen la posibilidad de abandonar las páginas que tardan más de 3 segundos en cargarse, preocuparse por la rapidez con la que se cargan las páginas en los dispositivos de los usuarios se está convirtiendo cada vez más en una parte esencial de nuestro flujo de trabajo de desarrollo.

Métricas de rendimiento en el proceso de compilación

Aunque ir de forma manual a PageSpeed Insights para conocer cómo funcionan tus puntuaciones, algunos desarrolladores preguntan si es posible obtener una puntuación de rendimiento similar en su proceso de compilación.

La respuesta es: absolutamente.

Presentación de PSI para Node

Hoy nos complace presentar PSI para Node, un nuevo módulo que funciona muy bien con Gulp, Grunt y otros sistemas de compilación, y que puede conectarse al servicio de PageSpeed Insights y mostrar un informe detallado del rendimiento web. Veamos una vista previa del tipo de informes que habilita:

Pantalla de informes de rendimiento

Los resultados anteriores son útiles para tener una idea del tipo de mejoras que se podrían realizar. Por ejemplo, un valor 5.92 para cambiar el tamaño del contenido al viewport significa que aún se puede realizar "algún" trabajo, mientras que un 24 para minimizar los recursos que bloquean la renderización puede sugerir que debas diferir la carga de JS con el atributo async.

Cómo reducir la barrera de entrada a PageSpeed Insights

Si ya intentaste usar la API de PageSpeed Insights o intentaste usar alguna de las herramientas que compilamos a partir de ella, es probable que hayas tenido que registrarte para obtener una clave de API dedicada. Sabemos que, aunque este proceso solo demora unos minutos, puede desactivar la obtención de estadísticas como parte de su flujo de trabajo habitual.

Nos complace informarte que el servicio PageSpeed Insights admite la realización de solicitudes sin una clave de API hasta por 1 solicitud cada 5 segundos (muchas veces para cualquier persona). Para un uso más regular o compilaciones de producción serias, te recomendamos que te registres para obtener una clave.

El módulo PSI admite la opción nokey para configurarla en menos de unos minutos y la opción key durante un poco más de tiempo. Están documentados los detalles sobre cómo registrarse para obtener una clave de API.

Primeros pasos

Tienes dos opciones para integrar PSI en tu flujo de trabajo. Puedes integrarlo a tu proceso de compilación o ejecutarlo en tu sistema como una herramienta instalada globalmente.

Proceso de compilación

Usar PSI en el proceso de compilación de Grunt o Gulp es bastante sencillo. Si estás trabajando en un proyecto de Gulp, puedes instalar y usar PSI directamente.

Instalar

Instala PSI con npm y pasa --save-dev para guardarlo en tu archivo package.json.

npm install psi --save-dev

Luego, define una tarea de Gulp en tu gulpfile de la siguiente manera (también se trata en nuestro proyecto de muestra de Gulp):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

Para lo anterior, puedes ejecutar la tarea con el siguiente comando:

gulp psi

Y si usas Grunt, puedes usar grunt-pagespeed de James Cryer, que ahora usa PSI para potenciar sus informes.

Instalar

npm install grunt-pagespeed --save-dev

Luego, carga la tarea en tu Gruntfile:

grunt.loadNpmTasks('grunt-pagespeed');

y configurarlo para su uso:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

Luego, puedes ejecutar la tarea con el siguiente comando:

grunt pagespeed

Realiza la instalación como una herramienta global

También puedes instalar PSI como una herramienta disponible globalmente en tu sistema. Una vez más, podemos usar npm para instalar la herramienta:

$ npm install -g psi

Por medio de cualquier ventana de terminal, solicita informes de PageSpeed Insights para un sitio (con la opción nokey o un key específico de la API, como se indica a continuación):

psi http://www.html5rocks.com --nokey --strategy=mobile

o los que tengan una clave de API registrada:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

Eso es todo

Sigue adelante y haz que el rendimiento forme parte de tu cultura

Debemos comenzar a pensar más en el impacto de nuestros diseños e implementaciones en la experiencia del usuario.

Las soluciones como PSI pueden supervisar el rendimiento web en computadoras de escritorio y dispositivos móviles, y son útiles cuando se usan como parte de tu flujo de trabajo habitual posterior a la implementación.

Nos encantaría recibir tus comentarios y esperamos que PSI ayude a mejorar la cultura de rendimiento de tu equipo.