Nouveau facteur de classement de Google 2021: Core Web Vitals

0
51

Nouveau facteur de classement de Google 2021: Core Web Vitals

En mai 2020, Google a annoncé qu'il ajouterait plus de signaux d'expérience utilisateur (UX) à son algorithme de classement.

C’est pourquoi l’année prochaine, Vitaux Web de base deviendront des facteurs de classement.

Mais que sont exactement ces Core Web Vitals?

Eh bien, ce sont trois métriques:

  • La plus grande peinture de contenu (FCP)
  • Décalage cumulatif de la disposition (CLS)
  • Premier délai d'entrée (FID)

Dans cet article, nous allons parler de ce que représentent ces statistiques et de la manière dont vous pouvez améliorer les pour votre site Web.

Commençons.

La plus grande peinture de contenu (LCP)

La métrique LCP représente le temps de chargement d'une page. Il mesure combien de temps il faut pour le plus grand au-dessus de l'élément de contenu de pli charger. Cet élément le plus grand peut être une image, une vidéo ou un bloc de texte.

core-web-vitals-le-plus grand-élément-triggers-LCP "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static /optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-the-largest-element-triggers-LCP.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbjJeZm assets / statique / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-the-large-element-triggers-LCP-768x434.png 768w "src =" https: // cdn- akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-the-largest-element-png "class" wp.png " -image-76199 nitro-lazy "nitro-lazy-empty =" "id =" MjM1OjU0Nw == - 1 "/></figure>
</div>
<p>Selon PageSpeed ​​Insights (PSI), votre LCP devrait avoir lieu <strong>en moins de 2,5 s.</strong></p>
<p>Comme il s’agit de l’élément le plus important, c’est généralement le plus important. C'est pourquoi Google accorde tellement d'attention à la rapidité de chargement.</p>
<p>Alors que d'autres mesures de vitesse comme FCP suivent le début de l'expérience de chargement, LCP suit son <strong>culmination</strong>.</p>
<p>Il est également important de noter que seul le contenu au-dessus de la ligne de flottaison peut affecter cette statistique. Si un utilisateur appuie sur l'écran ou fait défiler vers le bas, le navigateur arrête de rechercher un autre candidat LCP.</p>
<p>Voici comment vous pouvez vérifier quel élément déclenche la métrique LCP sur votre site Web.</p>
<h3>Vérification de LCP avec les DevTools de Chrome</h3>
<p>Tout d'abord, ouvrez la page que vous souhaitez inspecter dans Chrome. Cliquez avec le bouton droit de la souris et sélectionnez «Inspecter».</p>
<p>À partir de là, accédez à "Performances".</p>
<div class=
core-web-vitals-checks-LCP-with-chromes-devtools "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/ /optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-checking-LCP-with-chromes-devtools.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjJLoGQbiguzm assets / statique / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-checking-LCP-with-chromes-devtools-768x239.png 768w "src =" https: // cdn- akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-vitals-checking-LCP-with-chromes "class wp-ngs" -image-76202 nitro-lazy "nitro-lazy-empty =" "id =" MjcxOjU1NQ == - 1 "/></figure>
</div>
<p>Cliquez sur le bouton «Recharger».</p>
<div class=
core-web-vitals-reload-button "tailles =" (largeur max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/coptimized/rev /wp-content/uploads/2020/11/core-web-vitals-reload-button.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60-c60-assets/static/optimized/rev-c60-c60- content / uploads / 2020/11 / core-web-vitals-reload-button-768x215.png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c603 wp-content / uploads / 2020/11 / core-web-vitals-reload-button.png "class =" wp-image-76197 nitro-lazy "nitro-lazy-empty =" "id =" Mjc5OjQ3MQ == - 1 "/></figure>
</div>
<p>Chrome analysera la page pendant quelques secondes et vous remettra un rapport.</p>
<p>Dans la section «Timings», vous pouvez voir une petite icône LCP. Lorsque vous le survolez, le plus grand élément de la page sera peint en bleu.</p>
<div class=
core-web-vitals-small-LCP-icon "tailles =" (largeur maximale: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/ -c60113e / wp-content / uploads / 2020/11 / core-web-vitals-small-LCP-icon.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev c60113e / wp-content / uploads / 2020/11 / core-web-vitals-small-LCP-icon-768x370.png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/ optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-small-LCP-icon.png "class =" wp-image-76198 nitro-lazy "nitro-lazy-empty =" " id = "MjkxOjQ3NQ == - 1" /></figure>
</div>
<p class=Source de l'image: Amazon.com

Vous pouvez utiliser cette technique pour toutes vos pages.

Voici quelques optimisations qui peuvent vous aider avec votre score LCP:

  • Optimiser les images: L'optimisation d'image comprend des techniques telles que la compression, la conversion de format et l'ajout de descripteurs de largeur / hauteur à vos images. Les images étant souvent le plus gros problème pour les sites Web lents, il est essentiel de les optimiser.
  • Implémentez Critical CSS: Le CSS critique est une technique qui consiste à trouver le CSS responsable de la mise en forme au-dessus du contenu du pli et à l'insérer dans la balise d'en-tête de votre page. C’est un excellent moyen d’améliorer les performances perçues.
  • Réduisez le CSS et le JavaScript: Les minifications de code consistent à supprimer toutes les parties inutiles du code de votre site Web. Ceux-ci incluent des éléments tels que les commentaires, les espaces et les sauts de ligne.

Décalage cumulatif de la disposition (CLS)

CLS représente la stabilité visuelle d'une page. Il mesure l'importance du inattendu les changements de disposition sur une page sont. Des changements de mise en page inattendus se produisent lorsque le contenu de la page se déplace sans intervention de l'utilisateur ni notification préalable.

Un score CLS inférieur à 0,1 signifie qu'une page est visuellement stable.

core-web-vitals-cumulative-layout-shift-CLS "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/ /rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-cumulative-layout-shift-CLS.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguets/Kstatic/ optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-cumulative-layout-shift-CLS-768x215.png 768w "src =" https://cdn-akebd.nitrocdn.com/ bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ / assets / static / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-cumulative-layout-shift-CLS.png "class =" wp-image-76206 nitro-lazy " nitro-lazy-empty = "" id = "MzIzOjUyNw == - 1" /></figure>
</div>
<p class=Source de l'image: web.dev

Pour obtenir ce score, Google calcule le fraction d'impact et fraction de distance pour chaque changement de disposition inattendu. Au fur et à mesure que ces fractions augmentent, le score CLS s'aggrave.

Mettre tout simplement, le score CLS est la somme totale de tous les scores de changement de mise en page pour chaque changement de mise en page inattendu.

Encore une fois, il est important de faire la différence entre les changements de disposition attendus et inattendus.

Un changement de disposition attendu est exactement ce à quoi cela ressemble. Vous cliquez sur quelque chose qui devrait changer la mise en page de la page et c'est le cas.

Par exemple, si vous cliquez sur une icône de recherche et qu'une barre de recherche apparaît.

core-web-vitals-expected-layout-shifts-search-bar "sizes =" (max-width: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static /optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-expected-layout-shifts-search-bar.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZm assets / static / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-expected-layout-shifts-search-bar-768x434.png 768w "src =" https: // cdn- akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-expected-layout-shifts-search class-bar.png.png. -image-76190 nitro-lazy "nitro-lazy-empty =" "id =" MzUxOjU1MQ == - 1 "/></figure>
</div>
<p>C’est exactement ce qui devrait arriver.</p>
<p>Mais si vous essayez de cliquer sur quelque chose et qu'une annonce vous gêne, il s'agit d'un changement de mise en page inattendu.</p>
<figure class=core-web-vitals -xpected-layout-shift-ad-gets-in-the-way "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com /bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-unexpected-layout-shift-ad-gets-in-the-way. https: 810w //cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-unexpected-layout-shift-adgets the-way-768x434.png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11 vitals -xpected-layout-shift-ad-gets-in-the-way.png "class =" wp-image-76200 nitro-lazy "nitro-lazy-empty =" "id =" MzYzOjU2Mg == - 1 "/ ></figure>
<p>Dans ce cas, nous pourrions également dire que le changement de disposition est terrible d'un point de vue UX. Lorsque les utilisateurs essaient de cliquer sur un bouton, ils ne s'attendent pas (et ne veulent pas) à être interrompus et à faire un mauvais clic sur une annonce.</p>
<p>Le point est: <strong>tous les changements de disposition ne sont pas identiques</strong>.</p>
<p>Heureusement, Google fait la différence entre les changements de mise en page initiés par l'utilisateur et inattendus.</p>
<p>Ils signalent les changements qui se produisent dans les 500 ms suivant les interactions de l'utilisateur avec un <strong>hadRecentInput</strong> attribut. Ces changements de disposition <strong>ne compte pas</strong> vers votre score CLS.</p>
<p>C'est pourquoi vous ne devriez pas vous soucier de votre score CLS si votre site Web ne comporte que des fenêtres contextuelles lancées par l'utilisateur.</p>
<h3>Comment vérifier les changements de disposition</h3>
<p>Les DevTools de Chrome peuvent vous aider à trouver facilement les changements de disposition. Cliquez avec le bouton droit sur une page que vous souhaitez analyser et sélectionnez «Inspecter».</p>
<p>Accédez à "Plus d'outils" et sélectionnez "Rendu".</p>
<div class=
core-web-vitals-Chromes-devtools-layout-shift-regions "tailles =" (largeur max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/ /optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-Chromes-devtools-layout-shift-regions.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjJLoGQbiguzm assets / statique / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-Chromes-devtools-layout-shift-regions-768x692.png 768w "src =" https: // cdn- akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-Chromes-devtools-layout-png-classe- " -image-76203 nitro-lazy "nitro-lazy-empty =" "id =" Mzk5OjU2Nw == - 1 "/></figure>
</div>
<p>En bas, vous verrez une option "Régions de décalage de disposition" avec une case à cocher à côté.</p>
<div class=
core-web-vitals-chromes-devtools-layout-shift-regions-rendering -lined "sizes =" (max-width: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ /assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-chromes-devtools-layout-shift-regions-rendering-highlighted.png 810w, https: // cdn- akebd. png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitalstvitals layout-shift-regions-rendering-highlight.png "class =" wp-image-76204 nitro-lazy "nitro-lazy-empty =" "id =" NDA3OjY1NQ == - 1 "/></figure>
</div>
<p>Désormais, chaque fois qu'un changement de disposition se produit, la zone déplacée sera mise en surbrillance.</p>
<figure class=core-web-vitals-chromes-devtools-layout-shift-regions-rendering-highlight-forbes "size =" (max-width: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com /bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-chromes-devtools-layout-shift-regions-renderingbes.highps: 8. //cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-out-vitals-chromes-devendtools-lay-regings faits saillants-forbes-768x369.png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/upload/20web vitals-chromes-devtools-layout-shift-regions-rendering-highlight-forbes.png "class =" wp-image-76205 nitro-lazy "nitro-lazy-empty =" "id =" NDE1OjY1NA == - 1 "/ ></figure>
<p class=Source de l'image: forbes.com

Voici quelques optimisations qui peuvent vous aider avec votre score CLS:

  • Évitez d'insérer des publicités et des pop-ups au-dessus d'autres contenus: L'insertion de contenu au-dessus d'un autre contenu entraîne un décalage de tout ce qui suit, ce qui entraîne un mauvais score CLS.
  • Ajoutez des attributs de largeur et de hauteur aux images: De cette façon, le navigateur sait à l'avance la quantité d'espace à allouer à chaque image. Cela facilite son travail et réduit les changements de disposition.
  • Optimiser la livraison des polices: Le préchargement des polices peut les aider à atteindre la première peinture, auquel cas elles ne provoquent pas de changement de disposition. L'utilisation facultative de l'affichage des polices peut également aider à la livraison des polices.

Premier délai d'entrée (FID)

FID représente l'interactivité d'une page. Il mesure le temps nécessaire au navigateur pour répondre au premier distinct interaction de l'utilisateur – comme un robinet ou un clic.

Si vous maintenez votre FID en dessous de 100 ms, vous êtes prêt à partir.

Désormais, le FID suit le délai après seulement le première contribution. D'une certaine manière, c'est le retard le plus important sur votre site Web.

Voici pourquoi:

Les premières impressions sont tout sur le Web. Les utilisateurs partiront instantanément et ne reviendront probablement pas si un site Web les frustrent lors de leur première visite.

C’est pourquoi garder un FID bas est crucial.

FID est aussi un métrique de champ uniquement (LCP et CLS peuvent tous deux être mesurés sur le terrain et en laboratoire). Il faut qu'un utilisateur réel fournisse une entrée à un moment précis.

S'il n'y a pas d'entrée, il n'y a rien à mesurer. Et un utilisateur cliquant sur le même bouton à des moments différents produira un résultat différent.

C’est pourquoi vous pouvez voir différents résultats FID sur différents tests.

Comment vérifier votre FID

Vous pouvez facilement vérifier votre FID avec PageSpeed ​​Insights de Google. C'est l'une des premières choses que vous voyez dans le rapport "Données de terrain".

core-web-vitals-FID-Googles-pagespeed-insights "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/optassimatic/ /rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-FID-Googles-pagespeed-insights.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNassets/ optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-FID-Googles-pagespeed-insights-768x263.png 768w "src =" https://cdn-akebd.nitrocdn.com/ bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ / assets / static / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-FID-Googles-pagespeed-insights.png "class =" wp-image-76191 nitro-lazy " nitro-lazy-empty = "" id = "NDc5OjUzOQ == - 1" /></figure>
</div>
<p>Voici deux optimisations qui peuvent vous aider avec votre FID:</p>
<ul>
<li><strong>Séparez les longues tâches:</strong> Les tâches longues prennent plus de 50 ms sur le thread principal, ce qui le rend insensible aux interactions des utilisateurs. En les décomposant, vous pouvez considérablement améliorer l'interactivité de votre site Web.</li>
<li><strong>Utilisez des web workers:</strong> Les web workers permettent d'exécuter des scripts en arrière-plan sans affecter le thread principal. En général, déplacer les opérations non liées à l'interface utilisateur vers un thread d'arrière-plan est une bonne idée.</li>
</ul>
<p>Voyons maintenant comment vous pouvez auditer l'intégralité de votre site à la recherche de Core Web Vitals et des problèmes généraux de vitesse du site.</p>
<h2>Utilisation du nouveau rapport Google Search Console (GSC)</h2>
<p>Récemment, Google a introduit un nouveau rapport dans le SGC.</p>
<div class=
core-web-vitals-google-search-console-gsc-report-mobile-desktop "tailles =" (largeur max .: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ /assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-google-search-console-gsc-report-mobile-desktop.png 810w, https: // cdn- akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-google-search-console-gobile-deskreport-google-search-console-gobile-deskx76-deskreport- png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-webogle-search-vitals console-gsc-report-mobile-desktop.png "class =" wp-image-76192 nitro-lazy "nitro-lazy-empty =" "id =" NTAzOjYwNw == - 1 "/></figure>
</div>
<p>Lorsque vous cliquez sur "Core Web Vitals" dans GSC, vous obtenez un rapport Mobile et Desktop.</p>
<p>Dans ces rapports, vous pouvez connaître le nombre d'URL médiocres, décentes et bonnes de votre site Web.</p>
<div class=
core-web-vitals-google-search-console-gsc-report-url-details "tailles =" (largeur max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ /assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-google-search-console-gsc-report-url-details.png 810w, https: // cdn- akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-google-search-console-gscxetails-vitals-google-search-console-gscxetails2 png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-webogle-search-vitals console-gsc-report-url-details.png "class =" wp-image-76193 nitro-lazy "nitro-lazy-empty =" "id =" NTE1OjU5NQ == - 1 "/></figure>
</div>
<p>Malheureusement, ce rapport ne vous montrera pas chaque URL individuelle avec un problème spécifique (par exemple, un CLS incorrect).</p>
<p>Au lieu de cela, GSC vous donnera un exemple d'URL qui présente ce problème.</p>
<p>Il fait cela parce que le système attribue des problèmes à un groupe d'URL. Dans ce rapport, <strong>Google suppose que les pages avec un contenu et des ressources similaires ont des problèmes de performances similaires</strong>.</p>
<p>Par exemple, supposons que vous ayez une boutique de commerce électronique avec des centaines de pages produits identiques. Si l'image du produit pour une page n'est pas optimisée, les images des autres pages de produit ne le seront probablement pas non plus.</p>
<p>Et si les images du produit sont les <strong>le plus grand</strong> éléments sur la page produit, ils déclencheront la métrique LCP.</p>
<p>En conséquence, vous avez un groupe de pages avec le même problème – un LCP lent.</p>
<p>Une fois que vous avez cette idée générale des problèmes de votre site Web, vous pouvez commencer à localiser des problèmes spécifiques.</p>
<p>Par exemple, si vous constatez qu'un groupe de pages a un mauvais score LCP, vous pouvez trouver les éléments qui déclenchent la métrique avec les DevTools de Chrome. S'il s'avère que l'élément le plus grand est généralement une image, vous devrez optimiser vos images.</p>
<p>Vous pouvez (et devriez) exécuter toutes les pages problématiques via PSI.</p>
<h2>Obtenez plus d'informations avec PSI</h2>
<p>Accédez à la page PSI, entrez l'URL que vous souhaitez analyser et Google vous donnera une évaluation des Core Web Vitals en haut.</p>
<div class=
core-web-vitals-PSI-page-field-data "tailles =" (largeur maximale: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optatic /rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-PSI-page-field-data.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/assets/ optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-PSI-page-field-data-768x262.png 768w "src =" https://cdn-akebd.nitrocdn.com/ bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ / assets / static / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-PSI-page-field-data.png "class =" wp-image-76196 nitro-lazy " nitro-lazy-empty = "" id = "NTYzOjQ5NQ == - 1" /></figure>
</div>
<p>Vous pouvez obtenir des suggestions d'amélioration spécifiques dans les sections «Opportunités» et «Diagnostics».</p>
<div class=
core-web-vitals-PSI-page-données-opportunités-et-diagnostics-sections-opportunité "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com /bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-PSI-page-data-opportunities-and-ngdiagnostics-sections //cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-PSI-page-data-opportunities sections-opportunité-768x448.png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11 vitals-PSI-page-données-opportunités-et-diagnostics-sections-opportunité.png "class =" wp-image-76195 nitro-lazy "nitro-lazy-empty =" "id =" NTcxOjY3NQ == - 1 "/ ></figure>
</div>
<div class=
core-web-vitals-PSI-page-données-opportunités-et-diagnostics-sections-diagnostics "tailles =" (largeur maximale: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com /bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vital-PSI-page-data-opportunities-and-diagnostics-sections //cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-PSI-page-data-opportunities sections-diagnostics-768x287.png 768w "src =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/optimized/rev-c60113e/wp-content/uploads/2020/11 vitals-PSI-page-données-opportunités-et-diagnostics-sections-diagnostics.png "class =" wp-image-76194 nitro-lazy "nitro-lazy-empty =" "id =" NTc1OjY3NQ == - 1 "/ ></figure>
</div>
<p>À partir de là, vous pouvez aborder chaque problème un par un.</p>
<h2>Comment mettre en œuvre des stratégies d'optimisation de site Web</h2>
<p>Maintenant que vous savez comment détecter les problèmes liés à la vitesse de votre site, expliquons comment les résoudre.</p>
<p>Voici les deux principales façons dont les gens améliorent la vitesse de leur site:</p>
<ul>
<li>Installez 5 à 6 outils différents et effectuez des optimisations manuelles</li>
<li>Utilisez un service complet d'optimisation de la vitesse</li>
</ul>
<p>Vous pouvez absolument tout faire à la main ou demander à un développeur de le faire pour vous. Mais c'est <strong>long</strong> et <strong>coûteux</strong>.</p>
<p>En plus de cela, le Web est en constante évolution. De nouvelles bonnes pratiques émergent tout le temps et vous devez constamment être au top de votre forme.</p>
<p>Et avec autant d'outils, y compris des outils gratuits, cela n'a aucun sens de s'y prendre de cette façon.</p>
<p><strong>Outils / plugins gratuits</strong> qui optimisent chaque partie de votre site Web peuvent fonctionner correctement. Il existe des tonnes de solutions qui font du bon travail. Et vous pouvez les trouver avec une simple recherche Google.</p>
<p>Mais cette approche présente également des inconvénients.</p>
<p>Premièrement, trouver, installer et configurer chaque outil peut facilement prendre quelques <strong>journées</strong>.</p>
<p>Deuxièmement, rien ne garantit qu’un outil gratuit sera mis à jour lorsqu’une nouvelle meilleure pratique sera introduite. Vous devrez surveiller cela et agir en conséquence.</p>
<p>Enfin, ces outils n'offrent pas d'assistance. Quand quelque chose se brise, vous êtes seul.</p>
<p>Contourner tous ces inconvénients n’est pas impossible, mais ce n’est pas efficace.</p>
<p>Si vous voulez prendre soin de votre entreprise tout en ayant un site Web rapide, la dernière option est votre meilleur pari.</p>
<p>Utilisant un <strong>service complet d'optimisation de la vitesse</strong> comme NitroPack vous facilite la vie. Il est facile à configurer, ne nécessite aucune surveillance et, surtout, il produit des résultats instantanés.</p>
<p>Par exemple, voici le score PageSpeed ​​Insights pour jeffbullas.com quelques minutes après l'installation de NitroPack.</p>
<div class=
core-web-vitals-optimisation-de-site-stratégies-nitropack "tailles =" (largeur-max: 810px) 100vw, 810px "srcset =" https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ/assets/static/ /rev-c60113e/wp-content/uploads/2020/11/core-web-vitals-website-optimization-strategies-nitropack.png 810w, https://cdn-akebd.nitrocdn.com/bCWGvmHIgAlrWiguWzdjLoGQbzvNeZiguWzdjLoGQbzvNeZiguas/ optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-optimisation-de-site-stratégies-nitropack-768x318.png 768w "src =" https://cdn-akebd.nitrocdn.com/ bCWGvmHIgAlrWzdjLoGQbzvNeZiguKmJ / assets / static / optimisé / rev-c60113e / wp-content / uploads / 2020/11 / core-web-vitals-optimisation de site Web-stratégies-nitropack.png "class =" wp-image-76201 nitro-lazy " nitro-lazy-empty = "" id = "NjQ3OjU4Mw == - 1" /></figure>
</div>
<p>Bien sûr, vous pouvez également tester d'autres outils et stratégies. Et votre choix dépendra du temps et des efforts que vous êtes prêt à consacrer à la vitesse du site.</p>
<p>Quoi qu'il en soit, vous devriez commencer à résoudre les problèmes de performances de votre site Web immédiatement.</p>
</p></div>
        </div>

        <footer>
            <!-- post pagination -->            <!-- review -->
            <div class=
Previous articleComment utiliser Quora Marketing pour accroître votre influence – Le guide ultime du débutant
Next articleUn plan en 5 points pour réussir vos blogs en 2021 et au-delà