Dans cet article je veux vous expliquer comment utiliser l’outil Lighthouse de Google pour tester des choses spécifiques dans vos applications grâce à sa fonctionnalité ‘cachée’ les custom audits. Ces customs audits peuvent être utiles pour différents cas d’utilisation :
- Tests web pour la qualité (QA)
- Test SEO (je vous recommande de jeter un coup d’oeil sur les slides de Mike King au Brighton SEO : https://bit.ly/2Q7Amvs)
- Tests de web performance avec des métriques spécifiques
Quand je travaille sur la webperf, je constate que nous (fournisseurs, outils, communauté, développeurs, SEOs et moi inclus) avons plus tendance à faire focus sur les métriques standards tel que le FMP (First Meaningful Pain, First Contentful Paint et speed index. Ces métriques sont utiles pour évaluer le niveau global de performance mais ne mettent pas le doigt sur ce qui compte le plus : l’expérience de performance utilisateur. Pour le faire il faut essayer de répondre à cette question : Quel est l’élément que je dois afficher au plutôt à mes utilisateurs ? Quel est l’élément Héro de ma page ?
La réponse à cette question dépend du type de votre site web :
- Le texte / titre pour les site d’actualités / blogs
- L’image et le prix pour une page de produit e-commerce
- bannière de promotion / vignettes produits pour une page catégorie e-commerce
- La barre de recherche pour un site de type Airbnb, annuaire ou site d’annonces
- Le premier tweet sur la timeline twitter.. (Time to first tweet)
Dans ce tutoriel, je vais vous montrer comment j’ai créé un custom audit Lighthouse pour tester si l’image d’un produit s’affiche rapidement à l’utilisateur sur une PDP. Voici le résultat final :
on voit que dans ce résumé de rapport Lighthouse qu’il y’a une nouvelle catégorie qui s’appelle « My hero image metrics » à coté des catégories par défault (Performance, PWA, SEO…etc). Super !
Comment créer un custom audit avec Lighthouse?
Lighthouse exécute des audits (tests) contre une page web donc nous aurons besoin de :
- Une page produit qui contient une image, pour cela j’ai cloné une fiche produit de Amazon (Wget)
- Un custtom audit Lighthouse qu’on va coder
1- Configurer la page produit :
Notre page produit doit donner une information : A quel moment du chargement de la page, l’image héro est affichée. Pour l’avoir, nous allons utiliser l’interface User Timing API. Cette interface permet aux développeurs de mesurer la performance des applications grâce aux marqueurs. En d’autres mots, il est possible de mesurer la performance d’événements spécifiques sur une page web (exécution d’une fonction JavaScript, rendu d’une partie de la page..etc).
Dans ce tutoriel nous allons utiliser la méthode window.performance.mark() pour créer un marqueur de performance au moment de l’affichage de l’image (onload).
<img onload="window.performance.clearMarks('hero_image'); window.performance.mark('hero_image')" alt="Your SEO alt value" src="https://myimageUrl.jpg">
<script>
window.performance.clearMarks('hero_image');
window.performance.mark('hero_image');
//I store here the variable that Lighthouse will get
window.myCustomMetric = window.performance.getEntriesByType('mark')[0].startTime;
</script>
Nous rajoutons la création de marqueur juste après l’élément img en javascript en s’inspirant du test de Steve Souders qui propose de créer deux marqueurs et prendre la plus élevée mais ce n’est pas le sujet de ce tutoriel. Il est recommandé de rajouter performance.clearMarks() avant performance.mark() afin de se débarrasser d’éventuels marqueurs précédents.
Maintenant, au moment du chargement / affichage de l’image produit, la page créé le marqueur hero_image qui sera sauvegardé dans la variable window.myCustomMetric (ligne 9). window.myCustomMetric sera le point d’entrée de Lighthouse – Allons y!
2- Créer un custom audit Lighthouse :
Rappelons l’architecture de Google lighthouse. La communication avec Chrome Devtools s’effectue via un Driver afin de collecter la données à partir des pages web. La collecte des données se fait grâce aux gatherer. Les audits exploitent l’output des gatherers pour passer les tests et donner les résultats au module de génération de rapport. C’est simple !
pour notre custom audit nous aurons (comme mentionné ici) besoin de deux éléments :
1- un gatherer : collecte la donnée à partir de la page web
2- un audit : exécute un test et donne le résultat (succès, échec)
En plus du gatherer et de l’audit, il faut créer un configuration spécifique pour dire à lighthouse qu’on a un super custom audit.
Commençons par le gatherer
'use strict';
const Gatherer = require('lighthouse').Gatherer;
class TimeToHeroImg extends Gatherer {
afterPass(options) {
const driver = options.driver;
return driver.evaluateAsync('window.myCustomMetric')
// Ensure returned value is what we expect.
.then(loadMetrics => {
if (!loadMetrics) {
// Throw if page didn't provide the metrics we expect. This isn't
// fatal -- the Lighthouse run will continue, but any audits that
// depend on this gatherer will show this error string in the report.
throw new Error('Unable to find load metrics in page');
}
return loadMetrics;
});
}
}
module.exports = TimeToHeroImg;
On récupère ici la variable window.myCustomMetric qu’on va passer à l’audit. Voici à quoi ressemble l’audit :
'use strict';
const Audit = require('lighthouse').Audit;
const MAX_LOAD_TIME = 3000;
class LoadAudit extends Audit {
static get meta() {
return {
id: 'heroimage-audit',
title: 'hero image is loaded',
failureTitle: 'Hero image is slow to load. More than 3000ms',
description: 'Used to measure time from navigationStart to when the hero image is loaded',
// We mention here our custom gatherer
requiredArtifacts: ['TimeToHeroImg'],
};
}
static audit(artifacts) {
const loadMetrics = artifacts.TimeToHeroImg;
// This score will be binary, so will get a red ✘ or green ✓ in the report.
const belowThreshold = loadMetrics <= MAX_LOAD_TIME;
return {
rawValue: loadMetrics,
// Cast true/false to 1/0
score: Number(belowThreshold),
};
}
}
module.exports = LoadAudit;
Au niveau de l’audit Lighthouse, on fixe le temps maximal de chargement de l’image héro à 3 secondes, on définit quelques propriétés et on teste si notre métrique est inférieur au threshold. L’audit peut don donner le résultat au module de génération de rapport Lighthouse (sous format JSON).
Maintenant il suffit de créer un fichier de configuration spécifique à notre custom audit.
'use strict';
module.exports = {
// 1. Run your custom tests along with all the default Lighthouse tests.
extends: 'lighthouse:default',
// 2. Add gatherer to the default Lighthouse load ('pass') of the page.
passes: [{
passName: 'defaultPass',
gatherers: [
'heroimage-gatherer',
],
}],
// 3. Add custom audit to the list of audits 'lighthouse:default' will run.
audits: [
'heroimage-audit',
],
// 4. Create a new section in the default report for our results.
categories: {
mysite: {
title: 'My hero image metrics',
description: 'Is my hero image loading fast ?',
auditRefs: [
// When we add more custom audits, `weight` controls how they're averaged together.
{id: 'heroimage-audit', weight: 1},
],
},
},
};
Premièrement on dit à Lighthouse d’exécuter comme d’habitude les audits classiques (SEO, PWA, SEO..etc). on précise notre gatherer et audit, et on définit les propriétés de la section custom. Pour le moment, nous avons un seul test dans cette catégorie par conséquence, le score sera 0 si échec ou 100 si succès.
Et voilà ! On peut maintenant lancer le custom audit :
lighthouse --config-path=custom-config.js https://www.aymen-loukil.com/amazon.html
Assurez-vous que vous avez déjà installé Google Lighthouse :
npm install -g lighthouse
Le rapport sera généré dans le dossier. Pour jouer avec ce premier custom audit, récupérez le depuis mon repo Github : https://github.com/AymenLoukil/Google-lighthouse-custom-audit
Quel sera votre prochain custom audit Lighthouse ? Je serai ravi d’avoir vos retours / questions et n’oubliez pas de partager l’article!
Consultant SEO International
