Comment analyser les performances avec Unlighthouse ?

Qu’est-ce qu’Unlighthouse ?

Unlighthouse est un outil d’analyse de site web open-source qui utilise Lighthouse (un outil d’audit de site web développé par Google) pour générer des rapports détaillés sur les performances de votre site web. Voici quelques-unes des caractéristiques et avantages clés de l’outil :

Caractéristiques

• Gratuit et open-source
• Utilise Lighthouse pour générer des rapports détaillés
• Analyse la vitesse de chargement, l’optimisation SEO, l’accessibilité et les meilleures pratiques
• Permet de personnaliser les audits en fonction de vos besoins
• Peut être exécuté à partir de la ligne de commande ou en utilisant une interface utilisateur graphique

Avantages

• Facile à utiliser
• Fournit des rapports détaillés et faciles à comprendre
• Permet d’identifier les problèmes de performance et de les corriger rapidement
• Aide à améliorer l’expérience utilisateur et le référencement de votre site web
• Peut être utilisé pour analyser n’importe quel site web, quelle que soit sa taille ou sa complexité

En utilisant Unlighthouse, vous pouvez facilement identifier les problèmes de performance de votre site web et les corriger rapidement. Cela peut vous aider à améliorer l’expérience utilisateur et le référencement de votre site web, ce qui peut conduire à une augmentation du trafic et des conversions.

Comment installer et configurer Unlighthouse ?

Pour utiliser Unlighthouse, vous devez d’abord l’installer et le configurer. Voici un guide étape par étape pour l’installer et le configurer :

1. Installer Node.js : Unlighthouse est construit sur Node.js, vous devez donc l’installer sur votre ordinateur avant de pouvoir utiliser Unlighthouse. Vous pouvez télécharger Node.js à partir de https://nodejs.org/en/download/.
2. Installer Chrome : Par défaut, Unlighthouse tentera d’utiliser l’installation de Chrome / Chromium de votre système. S’il n’y en a pas, un binaire Chromium sera installé sur votre système mais cette dernière options ne fonctionne pas dans tous les cas. Vous pouvez télécharger Chrome à partir de https://www.google.com/intl/fr_fr/chrome/.
3. Installer Unlighthouse : Une fois que vous avez installé Node.js, vous pouvez installer Unlighthouse en utilisant npm (le gestionnaire de paquets Node.js) et npx. Ouvrez une invite de commande et tapez les commandes suivante :

npm install -g npx
npx unlighthouse --site <URL>Langage du code : Shell Session (shell)

Si la dernière version ne fonctionne pas, essayez une version plus ancienne, la liste est disponible sur le dépôt Github https://github.com/harlan-zw/unlighthouse/releases, par exemple :

npx unlighthouse@0.11.6 --site <URL>Langage du code : Shell Session (shell)

Configurer Unlighthouse

Par défaut l’outil fonctionne avec des options en ligne de commande, mais vous pouvez utiliser un fichier de configuration unlighthouse.config.ts situé dans le répertoire racine.
Vous pouvez modifier le nom du fichier de configuration à l’aide de l’option configFile ou de l’option --config en ligne de commande.

Unlighthouse peut être configuré en utilisant un fichier de configuration. Vous pouvez créer un fichier de configuration en utilisant un éditeur de texte et en enregistrant le fichier au format JavaScript. Voici un exemple de fichier de configuration :

export default {
  site: 'example.com',
  scanner: {
    exclude: ['/wp-admin/*']
  },
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    throttlingMethod: 'simulated'
  },
  debug: true,
}Langage du code : JavaScript (javascript)

Dans cet exemple, nous avons configuré Unlighthouse pour exclure les URL à base de /wp-admin/, n’analyser que les catégories « performance » et « accessibilité », et pour utiliser la méthode de throttling « simulée ». Vous pouvez personnaliser ces paramètres en fonction de vos besoins.

La liste des options disponibles est disponible sur la documentation officielle https://unlighthouse.dev/integrations/cli#configuration.

Exécuter Unlighthouse avec un fichier de configuration

Une fois que vous avez configuré Unlighthouse, vous pouvez l’exécuter en utilisant la commande suivante :

npx unlighthouse --site <URL> --config-path <PATH_TO_CONFIG_FILE>Langage du code : Shell Session (shell)

Remplacez <URL> par l’URL de votre site web et <PATH_TO_CONFIG_FILE> par le chemin d’accès à votre fichier de configuration.

Comment utiliser Unlighthouse ?

Unlighthouse s’installe et s’exécute de avec la commande dans votre terminal :

npx unlighthouse --site <URL>Langage du code : Shell Session (shell)

Vous pouvez rajouter l’option --debug à la fin pour voir les détails d’exécution. Cette commande permettra à Unlighthouse d’analyser les performances de votre site web en fonction des critères suivants :

Vitesse de chargement

Unlighthouse mesurera la vitesse de chargement de votre site web en simulant un utilisateur qui accède à votre site à partir d’un appareil mobile et d’un réseau 3G. Les métriques suivantes seront évaluées :

• First Contentful Paint (FCP) : le temps nécessaire pour que le premier contenu soit affiché à l’écran.
• Speed Index (SI) : le temps nécessaire pour que le contenu visible soit affiché à l’écran.
• Time to Interactive (TTI) : le temps nécessaire pour que le site web devienne interactif et réponde aux actions de l’utilisateur.

Optimisation SEO

Unlighthouse évaluera l’optimisation SEO de votre site web en fonction des critères suivants :

• Balises méta : vérifie si les balises méta importantes sont présentes sur votre site web, telles que la balise titre, la balise description et la balise viewport.
• Structure des contenus : vérifie si le contenu de votre site web est optimisé techniquement pour les moteurs de recherche.
• Liens : vérifie si les liens de votre site web sont fonctionnels et optimisés pour les moteurs de recherche.

Accessibilité

Unlighthouse évaluera l’accessibilité de votre site web en fonction des critères suivants :

• Contraste : vérifie si les couleurs de votre site web ont un contraste suffisant pour être lisibles par tous les utilisateurs.
• Navigation : vérifie si votre site web est facilement navigable à l’aide d’un clavier et d’un lecteur d’écran.
• Contenu : vérifie si le contenu de votre site web est accessible à tous les utilisateurs, y compris ceux qui ont des besoins spécifiques en matière d’accessibilité.

Bonnes pratiques

Unlighthouse évaluera si votre site web suit les bonnes pratiques en matière de développement web, telles que :

• Utilisation de HTTPS : vérifie si votre site web utilise HTTPS pour sécuriser les données de l’utilisateur.
• Optimisation des images : vérifie si les images de votre site web sont optimisées pour réduire le temps de chargement.
• Utilisation de polices web : vérifie si votre site web utilise des polices web pour améliorer la lisibilité et la vitesse de chargement.

Le Chrome User Experience Report (CrUX)

C’est une base de données publique contenant des données sur les performances réelles des sites web tels qu’ils sont vécus par les utilisateurs de Chrome. Les données sont collectées à partir d’un échantillon d’utilisateurs de Chrome qui ont activé la fonctionnalité « Usage et statistiques » dans leur navigateur.

Le CrUX fournit des informations sur les métriques clés de l’expérience utilisateur, telles que le temps de chargement, la stabilité visuelle et l’interactivité des sites web. Ces données peuvent aider les développeurs web à comprendre comment les utilisateurs perçoivent leur site web et à identifier les domaines à améliorer pour offrir une meilleure expérience utilisateur.

Le CrUX est utilisé par plusieurs outils d’analyse de site web, y compris Unlighthouse, pour fournir des informations sur les performances réelles des sites web. Les données du CrUX sont également utilisées par Google pour évaluer la qualité de l’expérience utilisateur d’un site web dans le cadre de son algorithme de classement de recherche.

En résumé, le CrUX est une source de données précieuse pour les développeurs web qui cherchent à améliorer les performances de leur site web et à offrir une meilleure expérience utilisateur.

Comment interpréter les résultats d’Unlighthouse ?

Après avoir exécuté les audits avec Unlighthouse, vous obtiendrez un rapport détaillé avec différentes métriques et scores. Voici comment interpréter les résultats :

1. Les métriques : Unlighthouse génère des métriques pour chaque audit, telles que le temps de chargement, le temps d’interaction, le score d’optimisation SEO, le score d’accessibilité et le score des meilleures pratiques. Ces métriques vous donnent une idée de la performance de votre site web dans chaque domaine.
2. Les scores : Unlighthouse attribue également des scores pour chaque audit, allant de 0 à 100. Plus le score est élevé, mieux c’est. Les scores vous donnent une idée de la qualité globale de votre site web dans chaque domaine.
3. Les opportunités d’amélioration : Unlighthouse fournit également des opportunités d’amélioration pour chaque audit, telles que les images à compresser, les fichiers CSS et JavaScript à minimiser, les balises méta à ajouter, etc. Ces opportunités vous donnent des pistes concrètes pour améliorer les performances de votre site web.

Conseils pour interpréter les résultats

• Concentrez-vous sur les métriques et les scores les plus importants pour votre site web.
• Utilisez les opportunités d’amélioration pour identifier les domaines à améliorer en priorité.
• Comparez les résultats avec les normes de l’industrie pour déterminer si votre site web est compétitif.

Comment améliorer son site avec Unlighthouse ?

Voici quelques conseils pratiques pour améliorer les performances de votre site web avec Unlighthouse :

1. Améliorer la vitesse de chargement
   • Compressez les images et les fichiers volumineux.
   • Minimisez les fichiers CSS et JavaScript.
   • Utilisez la mise en cache du navigateur.
   • Réduisez le temps de réponse du serveur.
2. Améliorer l’optimisation SEO
   • Ajoutez des balises méta et des balises d’en-tête pertinentes.
   • Créez un plan de site XML.
   • Utilisez des URL conviviales pour les moteurs de recherche.
   • Optimisez le contenu pour les mots-clés pertinents.
3. Améliorer l’accessibilité
   • Ajoutez des alternatives textuelles aux images.
   • Utilisez des contrastes de couleurs suffisants.
   • Assurez-vous que le site web est navigable au clavier.
   • Utilisez des étiquettes et des légendes appropriées pour les formulaires.
4. Utiliser les bonnes pratiques
   • Utilisez HTTPS pour sécuriser le site web.
   • Évitez les redirections inutiles.
   • Utilisez des polices web optimisées.
   • Assurez-vous que le site web est compatible avec les différents navigateurs et appareils.

Conclusion

Unlighthouse est un outil puissant pour mesurer et améliorer les performances de multiples pages d’un site web. En utilisant cet outil pour identifier les problèmes et les opportunités d’amélioration, vous pouvez optimiser l’expérience utilisateur et le référencement de votre site web. Nous vous encourageons à utiliser Unlighthouse régulièrement pour surveiller les performances de votre site web et apporter des améliorations continues.

FAQ