Les performances Web peuvent avoir un impact considérable sur l'ensemble de l'expérience utilisateur. Si vous avez récemment commencé à chercher à améliorer les performances de votre site, vous avez probablement entendu parler de PageSpeed Insights. Cet outil analyse les pages et propose des conseils pour les rendre plus rapides, conformément aux bonnes pratiques en matière de performances Web sur mobile et ordinateur.
Les scores de PageSpeed sont basés sur plusieurs facteurs, parmi lesquels la capacité de vos scripts à être réduite, l'optimisation des images, le contenu compressé avec gzip, la taille appropriée des éléments tactiles et les redirections de page de destination évitées.
40% des utilisateurs sont susceptibles d'abandonner des pages qui mettent plus de trois secondes à se charger. Il est donc de plus en plus essentiel de vous soucier de la vitesse de chargement de vos pages sur les appareils des utilisateurs.
Métriques de performances dans votre processus de compilation
Bien que d'accéder manuellement à PageSpeed Insights pour savoir si vos scores fonctionnaient correctement, de nombreux développeurs nous ont demandé s'il était possible d'obtenir des scores de performances similaires dans leur processus de compilation.
La réponse est: absolument.
Présentation de PSI pour Node.js
Aujourd'hui, nous avons le plaisir de vous présenter PSI pour Node. Ce nouveau module fonctionne parfaitement avec Gulp, Grunt et d'autres systèmes de compilation, et peut se connecter au service PageSpeed Insights et renvoyer un rapport détaillé de vos performances Web. Voyons un aperçu des types de rapports qu'il permet:
Les résultats ci-dessus sont bons pour avoir une idée du type d'amélioration qui pourrait être apportée. Par exemple, une valeur 5.92 pour dimensionner le contenu dans la fenêtre d'affichage signifie qu'un "certain" travail peut encore être effectué, tandis qu'une valeur 24 pour réduire l'affichage des ressources qui bloquent l'affichage peut indiquer que vous devez différer le chargement de JavaScript à l'aide de l'attribut async.
Réduire les obstacles à l'accès à PageSpeed Insights
Si vous avez déjà essayé d'utiliser l'API PageSpeed Insights par le passé ou d'utiliser l'un des outils que nous créons à partir de cette API, vous avez probablement dû demander une clé API dédiée. Bien que cela ne prenne que quelques minutes, vous pouvez désactiver l'accès aux insights dans le cadre de votre flux de travail habituel.
Nous avons le plaisir de vous informer que le service PageSpeed Insights permet d'envoyer des requêtes sans clé API jusqu'à une requête toutes les 5 secondes (c'est possible pour tout le monde). Pour une utilisation plus régulière ou des builds de production plus sérieux, vous devrez probablement vous inscrire pour obtenir une clé.
Le module PSI est compatible avec l'option nokey, qui permet une configuration en moins de quelques minutes, et l'option key un peu plus longtemps. La procédure d'inscription à une clé API est expliquée en détail.
Premiers pas
Deux options s'offrent à vous pour intégrer PSI à votre workflow. Vous pouvez soit l'intégrer à votre processus de compilation, soit l'exécuter en tant qu'outil installé mondialement 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 le fichier package.json.
npm install psi --save-dev
Ensuite, définissez une tâche Gulp pour celle-ci dans votre fichier gulpfile (é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);
});
Dans le cas ci-dessus, vous pouvez ensuite exécuter la tâche à l'aide de la commande suivante:
gulp psi
Et si vous utilisez Grunt, vous pouvez vous servir de grunt-pagespeed, de James Cryer, qui utilise désormais PSI pour générer des rapports.
Installer
npm install grunt-pagespeed --save-dev
Chargez ensuite la tâche dans votre fichier Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
et le configurer pour qu'il soit utilisé:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Vous pouvez ensuite exécuter la tâche à l'aide de la commande suivante:
grunt pagespeed
Installation en tant qu'outil global
Vous pouvez également installer PSI en tant qu'outil disponible dans le monde entier sur votre système. Là encore, nous pouvons utiliser npm pour installer l'outil:
$ npm install -g psi
Depuis 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
Pour ceux disposant d'une clé API enregistrée:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Et voilà !
Intégrez les performances à votre culture d'entreprise
Nous devons commencer à réfléchir davantage à l'impact de nos conceptions et implémentations sur l'expérience utilisateur.
Des solutions telles que PSI vous permettent de garder un œil sur vos performances Web sur les ordinateurs et les mobiles. Elles sont utiles lorsqu'elles sont utilisées dans le cadre de votre workflow post-déploiement régulier.
Nous sommes impatients de recevoir vos commentaires et espérons que cette fonctionnalité vous aidera à améliorer la culture de la performance au sein de votre équipe.