Mesurer la vitesse de la page avec Lighthouse

La vitesse de la page compte plus que vous ne le pensez. Selon une étude de Google, la probabilité que les utilisateurs restent sur votre site chute à mesure que la vitesse de chargement ralentit. Un site qui se charge en dix secondes augmente le taux de rebond de 123 %. En d’autres termes, la vitesse est égale au revenu.

Mesurer la vitesse de la page avec Lighthouse

Lighthouse est un outil de référence de vitesse de page créé par Google. Il exécute une batterie de tests sur votre site Web et produit un rapport contenant des conseils détaillés pour améliorer les performances.

Bien que l’objectif principal de Lighthouse soit la performance, il peut évaluer d’autres éléments tels que :

• Accessibilité: Suggérez des opportunités pour rendre le contenu plus accessible. Il s’agit de s’assurer que la page est optimisée pour les lecteurs d’écran, que tous les éléments ont des étiquettes ou que le site est navigable avec le clavier.
• Les meilleures pratiques: Vérifie diverses pratiques saines qui améliorent la vitesse et la sécurité.
• référencement: Effectue diverses vérifications pour s’assurer que la page est optimisée pour le référencement.
• PWA: garantit que la page passe les tests d’application Web progressifs, ce qui améliore l’expérience utilisateur sur les appareils mobiles.

4 façons de faire fonctionner le phare

Lighthouse est un projet open source que vous pouvez exécuter de différentes manières :

1. Comme il est inclus dans Google Chrome, vous pouvez l’exécuter directement depuis le navigateur. Cliquer sur Plus d’outils > Outils de développement et ouvrez l’onglet Phare.
2. Si vous avez installé Node, vous pouvez exécuter npm install -g lighthouse et exécutez l’outil dans la ligne de commande comme ceci : lighthouse https://semaphoreci.com
3. Vous pouvez l’inclure dans votre code en tant que package Node.
4. Et enfin, Lighthouse a une version CI que vous pouvez exécuter dans votre intégration continue. Nous utiliserons cette méthode pour programmer des benchmarks périodiques.

Configuration de Lighthouse CI

Pour exécuter Lighthouse CI, vous aurez besoin des éléments suivants :

• Google Chrome
• Un compte GitHub ou Bitbucket
• La version LTS de Node.

Commençons par installer Lighthouse CI avec npm install -g @lhci/cli

Ensuite, créez un fichier de configuration appelé lighthouserc.js. Les URL Le paramètre est un tableau de sites Web à comparer. Nous pouvons ajuster le numberOfRunscar plus d’exécutions produisent des résultats plus pertinents sur le plan statistique.

// lighthouserc.js

module.exports = {
  ci: {
    collect: {
        url: ['https://semaphoreci.com'],
        numberOfRuns: 1
    },
    upload: {
      target: 'filesystem',
      outputDir: 'reports'
    }
  }
};

Gardez à l’esprit que bien que Lighthouse ne soit pas particulièrement gourmand en ressources, le fait de définir le nombre d’exécutions sur une valeur élevée peut rendre le travail trop long à terminer. N’oubliez jamais que vous voulez que votre pipeline CI s’exécute en cinq à dix minutes, pas plus que cela.

Nous pouvons maintenant exécuter Lighthouse avec : lhci autorun. Une fois terminé, nous trouverons quelques fichiers dans le dossier des rapports :

• manifest.json: contient une liste des rapports générés.
• $url-$timestamp-report.html est le rapport principal que vous pouvez ouvrir avec n’importe quel navigateur.
• $url-$timestamp-report.json: le même rapport dans la version JSON.

Utilisation de Lighthouse pour les tests non fonctionnels

Lighthouse nous permet de configurer des limites pour chaque catégorie. Lorsque l’une de ces valeurs tombe en dessous d’une valeur prédéfinie, l’outil arrête le pipeline CI.

Par exemple, disons que nous ne voulons pas que les notes de notre site tombent en dessous de 80 % dans toutes les catégories. Pour y parvenir, nous devons ajouter des assertions au fichier de configuration :

// lighthouserc.js

module.exports = {
  ci: {
    collect: {
        url: ['https://semaphoreci.com', 'https://semaphoreci.com/blog'],
        numberOfRuns: 5
    },
    upload: {
      target: 'filesystem',
      outputDir: 'reports'
    },
    // enforce limits
    assert: {
      assertions: {
        'categories:performance': ['error', {minScore: 0.8}],
        'categories:accessibility': ['error', {minScore: 0.8}],
        'categories:seo': ['error', {minScore: 0.8}],
        'categories:best-practices': ['error', {minScore: 0.8}]
        }
    }
  }
};

Mesure de la vitesse de page avec CI/CD

Si vous souhaitez automatiser l’analyse comparative avec CI/CD, consultez ce tutoriel étape par étape.

Configurer un tableau de bord

Le projet Lighthouse CI comprend un tableau de bord facultatif qui vous permet de parcourir les données historiques et de trouver des tendances.

L’inconvénient de cette approche est évident : vous devez gérer un autre serveur. Mais cela peut valoir la peine si vous avez beaucoup de sites à analyser.

Exécution de Lighthouse dans le développement Web

Nous nous sommes concentrés uniquement sur le test d’un site Web existant et en cours d’exécution. Mais une configuration comme celle-ci peut effectuer des tests non fonctionnels pendant le développement Web. Vous pouvez, par exemple, échouer les validations qui aggravent les performances du site ou enfreignent les règles d’accessibilité.

Le temps, c’est de l’argent

Les utilisateurs sont attirés par des sites Web rapides et réactifs. Le problème est qu’il est difficile de mesurer de manière fiable la vitesse des pages, car vous ne pouvez pas supposer que tout le monde dispose d’une connexion rapide et utilise un appareil de premier plan. Avec Lighthouse dans votre pipeline CI/CD, vous pouvez obtenir des résultats plus proches des conditions réelles et des informations pour vous aider à vous améliorer en permanence.

Merci d’avoir lu!