Deux mots que vous entendez souvent ensemble sont mobile et vitesse du site. Et ce n’est pas sans raison, car ces deux vont de pair. La convivialité mobile et la vitesse du site sont parmi les questions les plus urgentes auxquelles nous devons faire face. Mesurer la vitesse des pages a toujours été un art sombre. le outils de vitesse du site que nous utilisons aujourd’hui sont assez adéquats, mais avec les nouvelles mesures Web Vitals, Google essaie de l’aborder sous un angle différent et plus réaliste, en prenant expérience de la page en compte. Ici, je vais voir de plus près comment vérifier la vitesse et le référencement de votre site mobile avec Google Lighthouse.

Table des matières

Qu’est-ce que Google Lighthouse?

Phare est un outil de création de pages créé par Google et initialement destiné à l’audit de Progressive Web Apps (PWA). L’outil exécute cinq audits pour l’accessibilité, les performances, le référencement, les applications Web progressives et une liste étendue des meilleures pratiques. Propulsés par les nouveaux Core Web Vitals, ces audits vous donnent ensemble un excellent aperçu de la qualité et des performances de votre site Web mobile ainsi que de votre site de bureau ou application Web.

La vitesse du site est une question de perception et d’expérience utilisateur. La vitesse en chiffres ne signifie rien si votre site semble encore lent. De nombreux utilisateurs du monde entier utilisent des connexions mobiles plutôt minables de 3G ou moins. Même avec des connexions 5G ultra-rapides, un site peut simplement se sentir lent et lent. Et nous savons tous quel effet dévastateur un site lent peut avoir sur votre conversion. Raser les millisecondes du temps nécessaire au chargement de votre site pourrait faire toute la différence. Sans parler de la frustration qui se produit lorsqu’une annonce à chargement lent appuie sur le bouton sur lequel vous souhaitez simplement cliquer.

Vous pouvez exécuter un audit Lighthouse directement à partir des outils de développement dans Google Chrome – ou installer l’extension Chrome

Pendant les tests, Google Lighthouse simule la visite de votre site mobile via une connexion 3G feuilletée sur un appareil légèrement sous-alimenté. Les paquets sont perdus pour tenter de simuler les conditions du monde réel aussi authentiquement que possible. Ces informations sont combinées avec d’autres données. Après avoir exécuté le test, vous obtiendrez un rapport avec un score et des conseils concrets sur les problèmes à résoudre.

PageSpeed ​​Insights contre Google Lighthouse

PageSpeed ​​Insights est probablement l’outil d’analyse de la vitesse du site le plus utilisé. Il vous donne un bon score et une liste des améliorations possibles, en plus il vous donne une idée de la vitesse de chargement perçue de votre site. PageSpeed ​​Insights fournit également des recommandations et identifie les opportunités pour améliorer les performances de votre page. Certains d’entre eux ont tendance à être difficiles à mettre en œuvre, donc obtenir un 100/100 est un rêve de pipe pour la plupart des sites.

PageSpeed ​​Insights et Lighthouse étaient deux outils différents pour le travail. Ils ont tous deux fourni des informations précieuses, mais étaient difficiles à combiner. Avec l’avènement de Web Vitals et la mise à jour de l’expérience de page, Google a amélioré les statistiques à tous les niveaux. Non seulement ils sont devenus plus faciles à comprendre, mais ils étaient également des métriques partagées. Bien sûr, chaque outil est conçu pour une sous-tâche spécifique et propose des mesures spécifiques. Ces mesures proviennent d’environnements différents.

Données de terrain vs données de laboratoire

Web Vitals a introduit de nouvelles façons de déterminer les performances. Certaines de ces mesures peuvent être calculées dans un environnement de laboratoire – simulées, pour ainsi dire, tandis que d’autres mesures n’ont de sens que si elles sont testées et collectées sur le terrain. En outre, certaines mesures fonctionnent bien dans les deux paramètres. Les outils d’expérience de page de Google utilisent une variété de mesures pour vous fournir les données dont vous avez besoin pour améliorer votre site.

Si vous regardez attentivement, vous remarquerez que certaines mesures ne fonctionnent que dans des outils de laboratoire tels que les outils de développement et Lighthouse. Les mesures de champ apparaissent dans des outils tels que le rapport Web Vitals dans la Search Console et PageSpeed ​​Insights. Les principaux composants Web Web comme LCP, FID et CLS fonctionneront partout.

Vitaux Web de base

Le tout nouveau Core Web Vitals apparaîtra dans tout Des outils Google qui mesurent la vitesse, les performances et l’expérience du site, même dans le nouveau rapport Web Vitals dans la Search Console. Maintenant, vous devez simplement comprendre trois mesures de base pour avoir une idée de la performance de votre site ou de certaines pages. Ces éléments essentiels du Web sont:

Ces nouveaux Web Vitals adoptent une approche beaucoup plus pratique et mettent l’expérience utilisateur au centre. Les outils visitent votre site via une connexion limitée sur un appareil moyen afin de pouvoir émuler ce qu’un véritable visiteur dans le monde réel pourrait vivre. Au lieu de simplement charger votre site comme les outils de vitesse classiques, ces outils basés sur Web Vitals vérifient comment et quand il répond à l’entrée – et si des choses se produisent après le chargement initial. Il trouve le moment exact où votre contenu est prêt à être utilisé, vous pouvez donc essayer de l’optimiser lorsqu’il semble trop lent. De plus, vous pouvez trouver des ennuis qui entravent une bonne expérience de page.

Gardez également à l’esprit que Lighthouse mesure non seulement les performances, mais vérifie également le référencement, diverses bonnes pratiques et l’accessibilité. Il s’agit d’un outil complet qui vous aide à améliorer votre site de manière globale.

PageSpeed ​​Insights donne des scores légèrement différents. Vous remarquerez également une différence entre les données de terrain et les données de laboratoire

Que rechercher dans les résultats du phare

Le concept global d’accélération de votre site mobile est double. votre site doit être rapide, et il doit ressentir vite. Vous devez donc afficher votre contenu à l’écran le plus rapidement possible. Ne laissez pas les gens attendre. De plus, les utilisateurs doivent pouvoir interagir avec votre contenu dès que possible. Étant donné que Google a annoncé que la vitesse et l’expérience des pages sont des facteurs de classement pour le référencement, vous devez résoudre ces problèmes.

Quelle devrait être votre priorité? Chargez d’abord votre contenu. Des graphismes impressionnants et des animations tueuses peuvent attendre. Votre message – et ce que les gens recherchent – est très probablement dans le contenu. Vous pouvez charger le reste du contenu en arrière-plan et le masquer ultérieurement à l’écran.

Mesures de performances utilisées par Lighthouse 6.0

Lors de la mesure des performances de votre site, Lighthouse 6.0 utilise les métriques suivantes:

  • Première peinture contentieuse: FCP mesure le temps nécessaire au navigateur pour afficher le premier contenu DOM après qu’un utilisateur accède à votre page. Cela comprend, les images, non blanches éléments et SVG, mais exclut les éléments contenus dans un iframe.
  • Indice de vitesse: L’index de vitesse mesure la vitesse à laquelle le contenu s’affiche visuellement pendant le chargement de la page.
  • La plus grande peinture riche en contenu: Le LCP concerne le temps nécessaire au chargement du plus grand objet de contenu (par exemple, une image ou un bloc de texte). Il s’agit de l’une des nouvelles métriques les plus importantes. Ici, avoir un bon score signifie que les utilisateurs perçoivent votre site comme se chargeant rapidement.
  • Temps pour interactif: TTI mesure le temps qu’il faut entre le chargement de la page et le moment où il est capable de répondre de manière fiable aux entrées de l’utilisateur rapidement. La page peut sembler rapide à charger, seulement pour constater que le fait d’appuyer sur certains boutons ne fait rien pour le moment.
  • Temps de blocage total: Le TBT mesure le temps entre le FCP et le TTI où des blocages peuvent se produire, empêchant la réactivité.
  • Décalage de mise en page cumulatif: Le CLS examine le nombre de changements de mise en page qui se produisent pendant le processus de chargement complet de la page. Chaque fois qu’un élément saute sur l’écran d’une image à l’autre, cela compte comme un changement de disposition. Rappelez-vous ces publicités désagréables qui se chargent au dernier moment?

Vous pouvez voir comment votre score est calculé en accédant au calculateur de score du phare:

Le calculateur de notation du phare indique le poids des mesures de différence

Le rapport Lighthouse propose également des opportunités pour améliorer la vitesse du site de votre site mobile, y compris le temps de chargement qu’il permettra d’économiser. Il s’agit notamment de réduire les feuilles de style de blocage du rendu, les scripts de blocage du rendu, de dimensionner correctement les images et de corriger les images hors écran.

Le phare identifie le plus grand élément de peinture contentif afin que vous puissiez facilement l’optimiser

Dans l’ensemble, Lighthouse vous donne une énorme quantité d’informations sur les performances de votre page. Utilisez ces informations à votre avantage.

La vérification SEO du phare

Lighthouse ne fait pas que des performances, il propose également un test d’accessibilité, des suggestions d’amélioration de votre site basées sur les meilleures pratiques et une analyse PWA. Une autre fonctionnalité intéressante de Lighthouse est la vérification SEO de base. Avec cette vérification, vous pouvez exécuter un simple audit SEO pour découvrir les problèmes SEO de base qu’un site peut avoir. Il vous donne également des suggestions pour les corriger. Étant donné que Lighthouse s’exécute localement dans votre navigateur, vous pouvez également exécuter les vérifications sur votre environnement de transfert.

Actuellement, Lighthouse vérifie:

Bien que basiques, les vérifications du phare vous alerteront de tout problème de référencement à résoudre.

Comment installer Google Lighthouse

La mise en route de Google Lighthouse est très simple car elle est intégrée au panneau d’audit des outils de développement de Chrome (Mac: Maj + Cmd + I. Win: Ctrl+Maj + J ou F12). De là, vous pouvez exécuter le test et obtenir le rapport complet. En outre, il existe un Module complémentaire Chrome pour Lighthouse qui ajoute un bouton à votre barre d’outils, bien que son utilisation reste la même avec quelques restrictions: vous ne pouvez pas valider les sites sur votre serveur local et les pages authentifiées ne fonctionneront pas non plus.

Vous pouvez également exécuter Lighthouse en tant que Nœud paquet. De cette façon, vous pouvez intégrer le test dans votre processus de génération. Lorsque vous utilisez le package Node, vous verrez également qu’il existe quelques audits qui ne fonctionnent que dans un environnement Node et non dans le panneau Audits des DevTools.

Pour installer Lighthouse globalement à partir de la ligne de commande, utilisez:

npm install -g lighthouse

Si vous souhaitez exécuter un test pour https://example.com, utilisez:

lighthouse https://example.com

Les résultats complets de l’audit seront disponibles dans le terminal, mais également dans un fichier HTML séparé.

Vous pouvez affiner le test comme bon vous semble

Test de Yoast.com dans Lighthouse

Il est temps de mettre Lighthouse à l’épreuve. Voyons ce qui se passe lorsque je braque les projecteurs du phare sur yoast.com – comme le montre un navigateur mobile. Aujourd’hui, nous nous concentrons uniquement sur l’onglet Performances. Cet onglet indique les performances actuelles de votre site ou de votre application et vous indique comment l’améliorer.

Dans la capture d’écran ci-dessous, vous pouvez voir les résultats pour yoast.com. Le chargement initial du site mobile est visualisé par un certain nombre de captures d’écran montrant quand le contenu apparaît pour la première fois à l’écran. Les mesures montrent combien de temps il faut pour que le contenu devienne visible. Plus vite, mieux c’est.

Vous obtenez les mesures les plus importantes sur un seul écran

Dans la section des statistiques, vous trouverez les informations les plus importantes, avec un point vert, orange ou rouge pour montrer la qualité des performances. Lorsque vous souhaitez optimiser les performances de votre site mobile, vous devez regarder les chiffres pour la première peinture contentive, la plus grande peinture contentive et le temps d’interactivité, comme mentionné précédemment. Essayez également d’améliorer l’indice de vitesse et assurez-vous que rien ne saute à l’écran.

D’après les notes, vous pouvez voir que yoast.com se débrouille assez bien avec un score global de 78. La première peinture satisfaisante pourrait être un peu meilleure, mais l’indice de vitesse et le temps de blocage total sont bons. Heureusement, aucun élément ne change dans la mise en page. Il y a encore quelque chose à gagner en éliminant les ressources bloquant le rendu, comme certains JavaScript et CSS. En d’autres termes, le site semble être assez rapide mais pourrait encore utiliser une certaine accélération dans la partie apparence.

Implémentation des corrections de vitesse du site

Vous pouvez faire beaucoup pour améliorer la vitesse de votre site. Bien que l’explication de tous les correctifs dépasse le cadre de cet article, de nombreuses optimisations peuvent être trouvées dans le chemin de rendu critique. Le chemin de rendu critique est formé par des objets – comme CSS et JavaScript – qui doivent être chargés avant que le contenu puisse apparaître à l’écran. Si ce contenu est bloqué, votre page s’affichera lentement ou pas du tout. Faites attention à cela et gardez le chemin libre d’obstacles. Ilya Grigorik de Google a écrit un excellent guide pour comprendre et améliorer le chemin de rendu critique. Et s’il vous plaît, optimisez vos images! Enfin, n’oubliez pas de lire sur Les nouveaux Web Vitals de Google.

Essayez!

Google Lighthouse n’est pas le seul outil de vitesse de site pour les gouverner tous, mais c’est un ajout très précieux à votre boîte à outils. Les vérifications SEO sont basiques, mais néanmoins les bienvenues. Le phare est plus fin et vous donne un retour immédiat basé sur une utilisation réelle. Vous devez certainement l’utiliser avec vos autres outils de test de vitesse de page, comme PageSpeed ​​Insights, WebPageTest et GTmetrix.

Utilisez-vous Google Lighthouse? Comment tu le trouves? Veuillez partager vos expériences et conseils dans les commentaires. J’aimerais avoir de vos nouvelles!

Lire la suite: Référencement mobile: le guide ultime »


Source link

%d blogueurs aiment cette page :