El rendimiento web puede tener un gran impacto en la totalidad de la experiencia del usuario. Si últimamente has estado buscando mejorar el rendimiento de tu sitio, es probable que hayas oído hablar de PageSpeed Insights, una herramienta que analiza las páginas y ofrece sugerencias para que sean más rápidas en función de las prácticas recomendadas para el rendimiento web en dispositivos móviles y computadoras.
Las puntuaciones de PageSpeed se basan en varios factores, como la capacidad de minimizar las secuencias de comandos, optimizar las imágenes, comprimir el contenido con gzip, que los objetivos de toque tengan el tamaño adecuado y evitar los redireccionamientos de la página de destino.
Con un 40% de personas que podrían abandonar páginas que tardan más de 3 segundos en cargarse, preocuparse por la rapidez con la que se cargan tus 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 tu proceso de compilación
Si bien es correcto ir manualmente a PageSpeed Insights para conocer tus puntuaciones, varios desarrolladores nos preguntaron si es posible obtener puntuaciones de rendimiento similares en su proceso de compilación.
La respuesta es: absolutamente.
Presentamos 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 de tu rendimiento web. Veamos una vista previa del tipo de informes que habilita:
Los resultados anteriores son buenos para tener una idea del tipo de mejoras que se podrían realizar. Por ejemplo, un 5.92 para ajustar el tamaño del contenido al viewport significa que aún se puede hacer “algo” de trabajo, mientras que un 24 para minimizar los recursos de bloqueo de renderización puede sugerir que debes aplazar la carga de JS con el atributo async.
Baja la barrera de entrada a PageSpeed Insights
Si intentaste usar la API de PageSpeed Insights en el pasado o alguna de las herramientas que compilamos en ella, es probable que debas registrarte para obtener una clave de API dedicada. Sabemos que, aunque solo lleva unos minutos, puede ser un inconveniente obtener estadísticas como parte de tu flujo de trabajo habitual.
Nos complace informarte que el servicio de PageSpeed Insights admite realizar solicitudes sin una clave de API hasta por 1 solicitud cada 5 segundos (más que suficiente para cualquier persona). Para un uso más habitual o compilaciones de producción serias, es probable que quieras registrarte para obtener una clave.
El módulo PSI admite una opción nokey para configurarlo en menos de unos minutos y la opción key para un poco más de tiempo. Se documentan los detalles para registrarse y obtener una clave de API.
Cómo comenzar
Tienes dos opciones para integrar PSI en tu flujo de trabajo. Puedes integrarlo en tu proceso de compilación o ejecutarlo como una herramienta instalada de forma global en tu sistema.
Proceso de compilación
Usar PSI en tu proceso de compilación de Grunt o Gulp es bastante sencillo. Si trabajas 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 para ella en tu archivo gulpfile de la siguiente manera (también se explica en nuestro proyecto de ejemplo 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 lo siguiente:
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 usarlo:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Luego, puedes ejecutar la tarea con lo siguiente:
grunt pagespeed
Cómo instalarlo como una herramienta global
También puedes instalar PSI como una herramienta disponible a nivel global en tu sistema. Una vez más, podemos usar npm para instalar la herramienta:
$ npm install -g psi
Además, desde 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 para aquellos que tienen una clave de API registrada:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Eso es todo.
Continúa y haz que el rendimiento forme parte de tu cultura
Debemos comenzar a pensar más en el impacto de nuestros diseños y nuestras implementaciones en la experiencia del usuario.
Las soluciones como PSI pueden supervisar el rendimiento web en computadoras y dispositivos móviles, y son útiles cuando se usan como parte de tu flujo de trabajo normal posterior a la implementación.
Nos complacería recibir tus comentarios y esperamos que PSI ayude a mejorar la cultura de rendimiento de tu equipo.