À l’aide de la solution de surveillance du site Web Dotcom-Monitor, vous pouvez créer et configurer un dispositif de surveillance lighthouse report (solution de surveillance de page Web) pour auditer automatiquement les performances, l’optimisation des moteurs de recherche (SEO) et d’autres paramètres du site Web.

Qu’est-ce que Google Lighthouse?

Google Lighthouse est un outil automatisé open-source pour vérifier la vitesse et les performances du site Web. Il vérifie le temps de chargement, l’accessibilité, le référencement des pages Web, les applications Web progressives et une liste étendue de meilleures pratiques. Lighthouse a été incorporé dans PageSpeed Insights (PSI) et les utilisateurs peuvent maintenant examiner les rapports sur les données de performance. De plus, PageSpeed Insights utilise une combinaison de données de laboratoire et de données réelles, tandis que Lighthouse n’utilise que des données de laboratoire pour la création de rapports.

Les métriques PageSpeed Insights aident à fournir un aperçu de la perception d’un utilisateur de la vitesse de la page Web, ce qui est devenu un facteur pour les classements SEO. Cependant, aussi important qu’il soit de viser un grand score lighthouse, que nous couvrons plus dans cet article ci-dessous, ce qui est important, c’est ce que vous faites avec ces recommandations Lighthouse pour améliorer les performances de la page Web en diminuant les temps de chargement des pages Web perçues et réelles.

Lighthouse simule le chargement d’une page Web dans un navigateur réel dans des conditions réelles (paquets perdus, mauvaise connexion, etc.) et génère le rapport avec des scores reflétant les mesures d’audit. En outre, le rapport contient des suggestions sur la façon d’améliorer la vitesse du site et les scores de performance. Outre les tests isolés, les rapports Lighthouse peuvent être extrêmement utiles dans le développement Web pour comparer les changements dans les résultats au fil du temps.

Toutefois, lorsqu’il s’agit de tests récurrents sur le site Web, l’exécution manuelle de Lighthouse sur chaque cas de test ne semble pas efficace. Dans cet article, nous aborderons la façon d’exécuter automatiquement l’audit à l’aide de Dotcom-Monitor.

Comment utiliser le rapport phare plus efficacement

Chaque fois que vous améliorez le contenu d’une page Web pour répondre aux exigences SEO, vous devrez peut-être suivre les changements dans les scores SEO avant et après les améliorations. Dans le cas du référencement, une vérification non-temps ne sera pas significative. C’est tout le contraire qui est vrai. Il est nécessaire de surveiller comment les scores seo changent au fil du temps et sur une base régulière.

Supposons que vous souhaitiez avoir un aperçu de l’impact des mises à jour de pages Web en ce qui concerne les mesures de performance, sans avoir à extraire les rapports manuellement sur chaque version. En outre, parfois l’optimisation de la fonctionnalité du site Web peut affecter une mesure de performance particulière. Par exemple, si vous travaillez à raccourcir le temps qu’il faut pour charger le contenu sur une page Web, vous devez vous concentrer sur les modifications apportées aux scores first contentful paint ou first meaningful paint et vous assurer que le score ne baisse pas. Nous discuterons plus en détail de ces mesures dans cet article.

Configurer un rapport phare avec Dotcom-Monitor

Dotcom-Monitor peut générer un rapport Lighthouse avec la fréquence spécifiée pour surveiller les changements dans une mesure spécifique de page Web. La principale caractéristique de la solution est le suivi d’une mesure d’audit spécifique. Vous pouvez sélectionner une mesure et définir un seuil d’erreur pour recevoir des notifications d’alerte lorsqu’un score surveillé est hors de la plage acceptable. En outre, vous pouvez configurer l’alerte sur les erreurs qui se sont produites lors de l’exécution de Lighthouse, spécifier un calendrier de vérification et configurer les rapports planifiés sur les résultats de surveillance.

Une fois que le dispositif de surveillance a été configuré, vous pouvez tirer les rapports Lighthouse du rapport en ligne Dotcom -Monitor.

Mise en place d’un audit du rapport phare

Url

Entrez l’URL que vous souhaitez auditer avec Lighthouse. L’adresse URL doit être formée exactement comme vous l’utiliseriez dans un navigateur, comme http://www.example.com. Vous devez inclure le http:// ou https:// au début de l’adresse. À ce moment,, vous pouvez également inclure tous les paramètres GET à la fin de votre URL.

Métriques du rapport phare

Dotcom-Monitor permet de surveiller et d’alerter pour une mesure d’audit de page Web particulière. Le système surveillera les scores métriques sélectionnés dans le rapport Lighthouse. Si le seuil d’erreur pour le score métrique est spécifié et que l’option alerte sur les erreurs de phare est sélectionnée, l’appareil sera considéré comme échoué dans les cas où le score d’intérêt est au-delà de la plage permise. Pour recevoir des notifications d’alerte, configurez des alertes pour l’appareil sur l’onglet Alertes de l’écran de modification de l’appareil.

En outre, vous pouvez configurer des rapports planifiés qui regrouperont les résultats de la surveillance métrique sélectionnée en fonction des statistiques quotidiennes, hebdomadaires ou mensuelles. Choisissez une mesure de vérification parmi les mesures phare suivantes pour recevoir des alertes et des rapports. Le rapport sur le rendement comprend diverses mesures, et nous discuterons de chacune de ces mesures ci-dessous.

Score global de performance

Le score global de performance est la moyenne pondérée de toutes les mesures de performance. Des mesures plus pondérées ont un effet plus important sur le score global de performance.

Première peinture contente

La première peinture contente (FCP) mesure le temps qu’il faut au navigateur pour rendre le premier élément de contenu DOM après qu’un utilisateur a navigué vers votre page. Un bon score first contentful paint est tout ce qui est en dessous d’une seconde. Il est important de différencier First Contentful Paint du terme First Paint. Tout d’abord, Paint est lorsque quelque chose est considéré comme rendu, ce qui peut être aussi simple que la couleur d’arrière-plan de la page elle-même, mais il ne fournit aucun contenu ou information pertinent que l’utilisateur est venu utiliser ou sur lequel il a agi.

La première peinture contentieuse sera un contenu livré ou peint à l’utilisateur. Pour la plupart des pages Web, il s’agit généralement du contenu au-dessus de la ligne de flottaison, comme le menu de navigation ou une image héroïque, par exemple. Ce seront les premiers éléments du contenu réel que les utilisateurs verront lors du chargement de la page. First Contentful Paint fournit un point de données réel plus utile que First Paint.

Indice de vitesse

L’indice de vitesse indique la rapidité avec laquelle le contenu d’une page est visiblement rempli. L’indice de vitesse est déterminé en mesurant la vitesse de votre page Web et en comparant cela avec les données d’autres sites Web. Plus le score de l’indice de vitesse est faible, meilleures sont les performances. Toute page de moins de 4,3 secondes est considérée comme bonne et sera indiquée par un code de couleur vert. Une vitesse de page comprise entre 4,4 et 5,8 est considérée comme une vitesse modérée et sera indiquée en orange. Enfin, une vitesse de page de plus de 5,8 secondes est considérée comme lente et sera indiquée en rouge.

Il est temps d’interactive

Le temps d’interactive, ou ITT, mesure le temps à partir du moment où la page commence à charger à quand ses sous-ressources principales ont chargé, et il est capable de répondre de manière fiable à l’entrée de l’utilisateur rapidement. Un délai raisonnable pour interactif est inférieur à cinq secondes. Une remarque importante à propos de Time to Interactive est que vous voulez vous assurer que les utilisateurs peuvent interagir avec votre site lorsque le contenu de la page, comme les boutons ou les liens, devient visible. L’objectif est de rendre le temps entre First Contentful Paint et Time to Interactive aussi court que possible. Si votre page est mise en place pour servir ce contenu, mais qu’elle n’est pas interactive tant que le script n’est pas chargé, cela pourrait agacer certains utilisateurs.

Première peinture significative

La première peinture significative (FMP) mesure lorsque le contenu principal d’une page est visible. La première peinture significative est le temps écoulé entre le moment où le chargement de la page est lancé et le moment où le principal, au-dessus de la ligne de flottaison, a été rendu. First Meaningful Paint est mesuré de la même manière que First Contentful Paint, qui est marqué par rapport aux performances réelles des données du site Web. Selon la façon dont la page est configurée pour le chargement, la première peinture significative et la première peinture contentieuse peuvent avoir le même score, cependant, dans les cas où un cadre en ligne (iframe) est utilisé, par exemple, les heures seront différentes. Un temps de moins de deux secondes est considéré comme rapide et sera indiqué en vert. Tout ce qui se situe entre deux et quatre secondes est modéré et sera indiqué en orange. Enfin, tout ce qui est plus de quatre secondes est lent et sera indiqué en rouge.

Premier CPU Inactif

Le premier ralenti CPU marque la première fois où le thread principal de la page est suffisamment silencieux pour gérer l’entrée. Il peut être considéré comme l’heure entre le chargement de la page et le moment où elle est chargée. Ce score, comme d’autres dans cette liste, est déterminé en comparant votre page avec des données d’autres sites Web. Un bon premier score au ralenti CPU est à tout moment en dessous de 4,7 secondes et sera indiqué en vert. Tout temps entre 4,8 et 6,5 secondes est modérément rapide et sera indiqué en orange. Enfin, tout temps de plus de 6,5 secondes est lent et sera indiqué en rouge.

Max potentiel premier retard d’entrée

Le délai d’entrée maximum potentiel est la durée, en millisecondes, de la plus longue exécution d’appareil que vos utilisateurs pourraient connaître. En d’autres termes, c’est le temps qu’il faut au navigateur pour répondre à l’action de l’utilisateur, comme cliquer sur un lien ou un bouton, et le traitement de cette action. Un retard rapide max potentiel première entrée est quelque chose de moins de 130 millisecondes et sera indiqué en vert. Tout ce qui est de plus de 250 millisecondes est considéré comme lent et sera indiqué en rouge.

Score global d’accessibilité

Le score global d’accessibilité met

en évidence

les

possibilités d’améliorer l’accessibilité de votre site Web.

Il ne s’agit pas seulement d’assurer l’accessibilité aux utilisateurs handicapés. Même les plus petites corrections, tels que makin

g que les éléments HTML sont correctement

intitulés et implémentés

peuvent aller un long chemin pour assurer l’accessibilité pour

tous les

utilisateurs atterrissant sur vos pages Web.

 

Meilleure performance globale des pratiques

Le score global des meilleures pratiques garantit que votre page suit les meilleures pratiques de l’industrie, telles que javascript valide, dimensions d’image, cryptage, et plus encore. Cette section donne également un aperçu des divers éléments qui ont réussi ou échoué à la vérification du Phare, ainsi que des recommandations

Score global seo

Les scores globaux SEO garantissent que votre page est optimisée pour le classement des résultats des moteurs de recherche. Par exemple, l’audit Lighthouse montrera qu’il existe des titres, des méta-descriptions, des codes d’état réussis, etc., pertinents pour la page spécifiée. Cette section comprend également des éléments qui ne répondaient pas aux critères de vérification et qui doivent être examinés pour l’amélioration et l’optimisation des référencements.

Seuil d’erreur

Définissez une plage de score acceptable pour une mesure sélectionnée. Si le score est au-delà de la plage, l’appareil sera marqué comme échoué. Pour recevoir des alertes en fonction du seuil que vous avez défini, sélectionnez Oui dans le champ d’erreurs d’alerte sur phare.

DNS Options

La fonction Options DNS permet aux utilisateurs de choisir comment les demandes de serveur de noms de domaine (DNS) sont effectuées au cours d’une tâche de surveillance.

Pour spécifier le mode de résolution des noms d’hôte, dans la section Mode Résolution DNS, sélectionnez l’un des modes disponibles. Pour plus de détails sur la configuration des fonctionnalités, consultez les options de mode DNS.

La section Hôtes DNS personnalisés contient les mappages des adresses IP aux noms d’hôtes.

Pour spécifier la cartographie, entrez l’adresse IP et le nom de l’hôte dans les champs correspondants.

Exemples:

192.168.107.246 example.com user.example.com userauth.example.com tools.example.com
192.168.107.246 example.com
192.168.107.246 user.example.com
192.168.107.246 userauth.example.com

Voir aussi : Options de mode DNS.

 

Automatiser la surveillance des phares pour une meilleure expérience utilisateur

Il est important de se rendre compte que la vitesse de la page et le temps de chargement de la page, bien que étroitement liés, doivent être considérés comme des facteurs distincts lorsqu’il s’agit de performances du site Web. Alors que le temps de chargement des pages est axé sur la mesure du temps qu’il faut pour que tout le contenu de la page Web soit rendu, ce qui est un facteur lorsqu’il s’agit de fournir une grande expérience utilisateur, les utilisateurs n’attendent pas que vos pages Web se chargent complètement avant de naviguer, de cliquer ou de prendre leurs prochaines mesures.

Les rapports de surveillance lighthouse vous permettent d’évaluer et de suivre continuellement le rendement de vos pages Web au fil du temps et de vous assurer que vos pages respectent les paramètres de performance, les seuils et les meilleures pratiques fixés par PageSpeed Insights, vous donnant la tranquillité d’esprit que vos clients et utilisateurs obtiennent une expérience Web rapide, peu importe où ils se trouvent.

Ressources supplémentaires sur les mesures des phares

Pour obtenir des descriptions plus détaillées des mesures du phare, visitez les pages suivantes :

https://developers.google.com/web/tools/lighthouse

https://web.dev/performance-scoring/