À quel point les éléments essentiels du Web sont-ils essentiels ?

Voyons comment vous pouvez utiliser Lighthouse pour trouver les problèmes exacts auxquels vous pourriez être confronté.

Regard sur Core Web Vitals dans Lighthouse

Pour ouvrir Lighthouse, cliquez avec le bouton droit n’importe où sur la page Web et sélectionnez Inspect.Nike.com Accédez au rapport Lighthouse et recherchez les opportunités qu’il répertorie. Ceux-ci vous indiquent où vous pouvez optimiser la vitesse de la page via le développement.

Inspection du LCP

Faites défiler vers le bas pour trouver où il est dit Afficher la trace originale. Cela vous mènera à la chronologie, où vous pouvez trouver quand les Core Web Vitals ont été journalisés.Dans la capture d’écran ci-dessous, vous pouvez voir FP (première peinture), FCP (première peinture riche en contenu) et LCP répertoriés dans les horaires. la chronologie, vous pouvez zoomer pour voir la capture d’écran. Cela vous aide à comprendre quel élément Lighthouse marque comme le plus grand. Dans ce cas, il s’agit d’un espace réservé pour une grande image. Cet espace réservé est une bonne pratique pour optimiser LCP. Voici un autre exemple de recherche dans LCP. Remarquez l’écart de temps qu’il a fallu pour que cette image se charge – ce qui entraîne une mauvaise métrique LCP. Encore une fois, Lighthouse montrera ses opportunités recommandées et ses diagnostics sur les performances du site Web afin que vous puissiez trouver des moyens d’améliorer le LCP. endroit pour enregistrer une capture d’écran pour votre développeur et partager les recommandations.

Aperçu des performances de Semrush

Un autre endroit pour obtenir des idées est de Semrush.À partir de l’outil d’audit de site, le rapport sur les performances du site offrira des informations sur la résolution des problèmes liés à la vitesse qui ont été constatés lors de l’exploration.Pour chaque problème, vous pouvez voir exactement où il s’est produit et recevoir des idées. sur la façon dont vous pouvez améliorer vos métriques LCP.Ici, vous verrez un rapport sur tous les problèmes impliquant JavaScript, la lenteur des vitesses de chargement des pages et le HTML qui pourrait être optimisé.Si vous n’êtes pas aussi expert en technologie que votre équipe de développement, cela pourrait être difficile de décider de ce qu’il faut corriger en premier. Une bonne façon de procéder est de collecter autant d’informations spécifiques que possible et de les donner à vos développeurs afin qu’ils puissent proposer une solution de leur point de vue.

Inspection du FID / TBT

Ensuite, il est temps de se pencher sur le premier délai d’entrée – combien de temps il faut avant qu’un utilisateur interagisse avec la page.Selon l’article web.dev de Google, « De longs délais de première entrée se produisent généralement entre First Contentful Paint (FCP) et Time to Interactive ( TTI). « Pour mesurer cela via la simulation, des outils comme Semrush et Lighthouse utilisent le temps de blocage total (TBT), une métrique recommandée par Google en remplacement de FID.TBT mesure le temps total entre First Contentful Paint (FCP) et Time to Interactive (TTI) et corrèle avec FID, capturant les problèmes qui affectent l’interactivité et peuvent être obtenus dans des conditions de laboratoire.Pour inspecter, nous pouvons regarder un exemple d’image à chargement lent en utilisant l’onglet Performance dans la console Dev. Vous pouvez cliquer sur Afficher la trace d’origine dans le rapport Lighthouse.Ensuite, activez le paramètre Web Vitals pour voir quand les tâches longues prennent plus de 50 minutes. :

  • Évitez les longues tâches
  • Minimisez le travail du fil principal
  • Gardez le nombre de demandes bas et les tailles de transfert petites

Il peut être utile de voir quels scripts JavaScript peuvent avoir causé de longues tâches pour votre page.

Inspection de CLS

Le décalage de mise en page cumulatif est la métrique qui vous indique essentiellement à quel point la page saute et se déplace en raison de problèmes avec les images, les polices et les éléments dynamiques tels que les fenêtres contextuelles.

  • Allez dans l’onglet Performance (cliquez sur cliquez sur Afficher la trace originale dans le rapport Lighthouse)
  • Consultez la piste Expérience pour savoir à quel moment les quarts de travail se sont produits
  • Effectuez un zoom avant et recherchez les changements de mise en page pour voir quelle partie de la page a effectué ces changements lors du chargement

Certaines recommandations de Lighthouse qui peuvent aider à gérer les changements de disposition sont les suivantes:

Conclusion

Bien que personne ne puisse savoir à quel point Core Web Vitals aura un impact sur les classements Google, il est toujours préférable d’être préparé et de savoir où vos pages Web peuvent être rendues plus rapidement et offrir une meilleure expérience.C’est pourquoi nous vous recommandons d’utiliser à la fois le site de Semrush. Audit and Lighthouse pour obtenir toutes les informations dont vous avez besoin pour fournir à votre équipe de développement des instructions claires pour améliorer ces éléments vitaux.N’oubliez pas que Google lui-même a souligné à quel point « un contenu de qualité et pertinent » devrait toujours être votre priorité principale – avec l’expérience de la page comme facteur supplémentaire en plus de cet objectif initial.

Tags: