Les performances Web peuvent avoir un impact énorme sur l'ensemble de votre expérience utilisateur. Si vous avez récemment essayé d'améliorer les performances de votre propre site, vous avez probablement entendu parler de PageSpeed Insights, un outil qui analyse les pages et propose des conseils pour les accélérer en fonction des bonnes pratiques en matière de performances Web sur mobile et sur ordinateur.
Les scores PageSpeed sont basés sur un certain nombre de facteurs, y compris la façon dont vos scripts sont minimisés, les images optimisées, le contenu compressé en gzip, les cibles de pression de la bonne taille et l'absence de redirections vers des pages de destination.
Étant donné que 40% des utilisateurs abandonnent les pages qui mettent plus de trois secondes à se charger, il est de plus en plus important de veiller à la rapidité de chargement de vos pages sur les appareils de vos utilisateurs.
Métriques de performances dans votre processus de compilation
Bien qu'il soit possible d'accéder manuellement à PageSpeed Insights pour connaître vos scores, un certain nombre de développeurs se sont demandé s'il était possible d'obtenir un score de performances similaire dans leur processus de compilation.
La réponse est "Absolument".
Présentation de PSI pour Node
Nous sommes heureux de vous présenter aujourd'hui PSI pour Node, un nouveau module qui fonctionne parfaitement avec Gulp, Grunt et d'autres systèmes de compilation. Il peut se connecter au service PageSpeed Insights et renvoyer un rapport détaillé sur vos performances Web. Voyons un aperçu du type de rapports qu'il permet d'obtenir:
Les résultats ci-dessus vous permettent de vous faire une idée du type d'améliorations possibles. Par exemple, une valeur de 5,92 pour dimensionner le contenu en fonction du viewport signifie que vous pouvez encore effectuer "certains" travaux, tandis qu'une valeur de 24 pour minimiser les ressources bloquant le rendu peut suggérer que vous devez différer le chargement du code JavaScript à l'aide de l'attribut async.
Réduire les obstacles à l'entrée dans PageSpeed Insights
Si vous avez déjà essayé d'utiliser l'API PageSpeed Insights ou l'un des outils que nous avons développés en s'appuyant sur celle-ci, vous avez probablement dû vous enregistrer pour obtenir une clé API dédiée. Nous savons que cette opération ne prend que quelques minutes, mais qu'elle peut être dissuasive pour obtenir des insights dans le cadre de votre flux de travail habituel.
Nous avons le plaisir de vous informer que le service PageSpeed Insights permet d'effectuer des requêtes sans clé API, jusqu'à une requête toutes les cinq secondes (ce qui est largement suffisant). Pour une utilisation plus régulière ou des builds de production sérieux, vous devrez probablement enregistrer une clé.
Le module PSI prend en charge une option nokey pour la configuration en moins de quelques minutes et l'option key pour un peu plus de temps. Vous trouverez des informations sur l'enregistrement d'une clé API.
Premiers pas
Deux options s'offrent à vous pour intégrer PSI à votre workflow. Vous pouvez l'intégrer à votre processus de compilation ou l'exécuter en tant qu'outil installé globalement sur votre système.
Processus de compilation
L'utilisation de PSI dans votre processus de compilation Grunt ou Gulp est assez simple. Si vous travaillez sur un projet Gulp, vous pouvez installer et utiliser PSI directement.
Installer
Installez PSI à l'aide de npm et transmettez --save-dev pour l'enregistrer dans votre fichier package.json.
npm install psi --save-dev
Définissez ensuite une tâche Gulp dans votre fichier gulpfile comme suit (également abordé dans notre exemple de projet Gulp):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Pour ce faire, vous pouvez exécuter la tâche à l'aide des éléments suivants:
gulp psi
Si vous utilisez Grunt, vous pouvez utiliser grunt-pagespeed de James Cryer, qui utilise désormais PSI pour alimenter ses rapports.
Installer
npm install grunt-pagespeed --save-dev
Chargez ensuite la tâche dans votre fichier Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
et configurez-la pour l'utiliser:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Vous pouvez ensuite exécuter la tâche à l'aide de:
grunt pagespeed
Installer en tant qu'outil global
Vous pouvez également installer PSI en tant qu'outil disponible dans le monde entier sur votre système. Une fois de plus, nous pouvons utiliser npm pour installer l'outil:
$ npm install -g psi
Dans n'importe quelle fenêtre de terminal, demandez des rapports PageSpeed Insights pour un site (avec l'option nokey ou un key spécifique à l'API comme suit):
psi http://www.html5rocks.com --nokey --strategy=mobile
ou si vous disposez d'une clé API enregistrée:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Et voilà !
Allez-y et faites des performances une partie de votre culture
Nous devons commencer à réfléchir davantage à l'impact de nos conceptions et implémentations sur l'expérience utilisateur.
Des solutions comme PSI peuvent surveiller vos performances Web sur ordinateur et mobile. Elles sont utiles dans le cadre de votre workflow post-déploiement habituel.
Nous sommes impatients de connaître vos commentaires et espérons que l'outil PSI vous aidera à améliorer la culture de performance au sein de votre équipe.