Comment optimiser votre site Web pour Core Web Vitals (Adsense)

La course pour améliorer Core Web Vitals n'est pas facile. Cela devient plus difficile si vous comptez sur un programme publicitaire comme Google AdSense pour monétiser votre site Web.

Les sites Web exécutant Google AdSense sont 10 fois plus susceptibles d'échouer au test Core Web Vitals que le même site Web sans Google AdSense. Cela est principalement dû au nombre de demandes et d'éléments tiers que Google AdSense ajoute à votre site Web. La plupart de ces actifs sont non optimisés, volumineux et non conviviaux.

En dehors d'AdSense et des plates-formes publicitaires, si vous avez beaucoup d'images, de JavaScript et de CSS non optimisés, en particulier au-dessus de la ligne de flottaison, vous risquez également très probablement d'échouer au test Core Web Vitals.

Si vous avez du mal à réussir le test Core Web Vitals et à améliorer votre moteur de recherche potentiels de classement, vous trouverez des solutions pratiques dans cet article.

Qu'est-ce que Core Web Vitals?

Les Core Web Vitals sont des mesures alimentées par Google Lighthouse qui déterminent comment un site offre une bonne expérience de page. Bien qu'il existe de nombreuses métriques lors de l'exécution d'un test, les métriques les plus importantes sont le Largest Contentful Paint (LCP), le First Input Delay (FID) et le Cumulative Layout Shift (CLS).

Google a annoncé qu'à partir de mai 2021, ces mesures feront partie de leurs signaux de classement utilisés pour déterminer les positions des pages Web dans les résultats de recherche.

En résumé, vous pouvez dire que Core Web Vitals n'était pas censé être une terreur pour les webmasters, mais un moyen d'améliorer l'expérience de la page des sites Web.

La plus grande peinture contentieuse (LCP): LCP mesure le temps nécessaire au chargement de la plus grande image visible ou d'un bloc de texte sur une page Web. Si le texte ou l'image visible le plus grand se charge rapidement, il est perçu que le reste de vos images et de votre texte se chargera rapidement. Le temps de chargement requis pour passer est en 2.5 secondes.

Premier délai d'entrée (FID): FID mesure l'interactivité des pages Web. Ceci est déterminé par le temps qu'il faut au navigateur pour commencer à traiter les gestionnaires d'événements après qu'un utilisateur a cliqué sur votre site. C'est ce qu'on appelle communément la première impression de votre site Web. Le temps nécessaire pour passer est Millisecondes 100.

Décalage de mise en page cumulatif (CLS): CLS mesure le changement de mise en page qui se produit sur une page Web. Lorsqu'une page Web se charge et que soudainement quelque chose apparaît ou disparaît et que la page doit s'adapter pour être plus grande ou plus petite, ce changement est ce qui est mesuré. C'est terrible pour l'expérience utilisateur et je suis d'accord. Le score que vous devriez avoir à passer est 0.1.

Comment optimiser votre site Web pour Core Web Vitals

Suivez ces étapes pour optimiser votre site Web :

1. Commencez avec un hébergeur rapide

Si vous avez un hébergeur avec un temps de réponse terrible, alors toutes les autres choses que je vais énumérer ici pourraient ne pas donner les résultats souhaités. Plus votre serveur répond rapidement aux demandes, mieux c'est.

Pourquoi un hébergeur Web avec un Time to first byte (TTFB) rapide est-il important ? Certains diront que le TTFB n'a pas d'importance, mais c'est le cas. C'est la base de tout le reste. Si vous avez des utilisateurs dans des villes où l'Internet est lent, la rapidité avec laquelle votre hébergeur peut répondre signifiera tout. N'importe quel hébergeur peut bien fonctionner si vous avez des utilisateurs provenant principalement de villes avec une connexion Internet ultra-rapide.

Essayez de tester comment votre hébergeur répondra à la 3G ou à la 2G au lieu de la 4G. Parce que si vous avez beaucoup d'utilisateurs qui se connectent via 3G ou 2G, cela s'ajoute à votre score Core Web Vitals. Ainsi, chaque milliseconde compte. La différence entre obtenir 100 ms dans votre FID et obtenir 101 ms est qu'avec 100 ms, vous réussissez mais avec 101 ms vous échouez. Donc, si quelqu'un vous dit que 1 ms n'a pas d'importance, cette personne pourrait se tromper.

Lors de la sélection d'un hébergeur, assurez-vous toujours de rapprocher un centre de données de la majorité des utilisateurs de votre site Web. Vous pouvez trouver leurs emplacements en consultant vos analyses. D'où viennent la plupart de vos utilisateurs ? Choisissez un centre de données plus proche d'eux. Plus c'est proche, mieux c'est.

J'ai personnellement remarqué un changement significatif dans les données de terrain de Core Web Vitals d'un site Web après avoir changé d'hébergeur. Je n'ai rien fait d'autre.

Si vous recherchez un hébergeur rapide, il existe de nombreuses recommandations basées uniquement sur Affiliés sans sincérité. Si vous utilisez WordPress et que vous pouvez vous le permettre, je vous le recommande vivement Kinsta. Ils sont les meilleurs pour WordPress. Si vous avez besoin de quelque chose de moins cher ou si vous n'utilisez pas WordPress, alors Cloudways est très efficace aussi.

2. Utilisez un thème léger et optimisé pour la vitesse

Cette astuce est particulièrement très utile aux non codeurs et même aux codeurs disposant de moins de temps. Surtout si vous utilisez WordPress où il y a tant d'options, assurez-vous d'utiliser un thème léger et optimisé pour la vitesse.

Parce que le thème est comme le squelette de votre site Web, si le squelette est brisé, le corps sera brisé. C'est juste ça.

Il existe une longue liste de bonnes pratiques à rechercher dans un thème. Certaines des mauvaises pratiques les plus courantes sont trop dépendantes de JQuery, chargeant trop de CSS/JS lorsqu'elles ne sont pas nécessaires, une grande taille de thème, etc. Vous pouvez toujours utiliser un outil comme Laboratoires jaunes, pour tester la démo.

Si vous utilisez WordPress, vous pouvez consulter la liste des thèmes WordPress les plus rapides.

3. Optimisez vos images

Les images sont cool. Ils rendent le contenu si attrayant. Mais ils peuvent être un fardeau s'ils ne sont pas optimisés. Avoir de grandes images comme 3 Mo affectera certainement votre vitesse. Et si ces images sont visibles lorsque votre site est visité avant le défilement, elles affecteront certainement votre métrique LCP.

La vérité est que les images non optimisées augmentent la taille de votre page. Plus la taille de la page est grande, plus le temps de chargement est long.

Personnellement, je préfère optimiser chaque image avant de les télécharger. Je n'utilise aucun service externe pour l'optimisation des images. Cependant, si vous utilisez WordPress ou similaire , Il ya plugins et des solutions pour optimiser automatiquement les images. Il existe également des solutions cloud quel que soit ce que vous utilisez.

4. Supprimer ou réduire la taille des images d'arrière-plan

Les images d'arrière-plan sont généralement très grandes. Et cela peut ralentir votre temps de chargement car il doit d'abord être chargé avant que le contenu significatif ne soit affiché.

Vous pouvez supprimer complètement l'image d'arrière-plan pour avoir un site Web plus rapide. S'ils sont si importants, envisagez de les optimiser à la plus petite taille possible ou d'utiliser des motifs au lieu d'images.

5. Utilisez la mise en cache du navigateur

Si vous avez beaucoup de lecteurs fidèles, vous devriez envisager la mise en cache du navigateur. Lorsqu'un utilisateur visite votre site Web pour la première fois, le navigateur met en cache ce site Web. Pour chaque autre visite, il se chargera en un instant. Cela peut grandement améliorer le FID et le LCP à partir de la deuxième visite.

Pour les utilisateurs de WordPress, la plupart des plugins de mise en cache peuvent vous aider à y parvenir.

6. Minifier le JavaScript et différer le JavaScript inutilisé

Bien que JavaScript soit incroyable, il bloque souvent le rendu. Cela signifie que cela peut avoir un impact sur votre temps de chargement et, en fin de compte, sur votre FID.

Essayez de réduire JavaScript en supprimant les espaces blancs et les commentaires pour réduire la taille du fichier. Assurez-vous également de différer le JavaScript non critique. Cela devrait améliorer votre FID.

Pour les utilisateurs de WordPress, il existe des plugins comme Autoptimize, WP Rocket, et d'autres qui peuvent le faire pour vous.

7. Définir l'attribut de taille AdSense

Si vous utilisez AdSense sur votre site Web et que vous rencontrez des difficultés avec CLS, cela peut résoudre tous vos problèmes. Il a fait pour moi et il devrait pour vous.

Si vous avez un bloc d'annonces près de l'en-tête qui est visible lorsqu'un utilisateur visite, un problème est que l'annonce peut ne pas se charger immédiatement. Il se peut qu'il se charge après que la page est déjà chargée, et lorsque c'est le cas, il y a un changement dans la mise en page. Ceci est très courant pour les blocs d'annonces réactifs. Avec cela, il est impossible de passer la métrique CLS.

La meilleure façon de gérer cela est de modifier un peu votre code AdSense. Pas de soucis, c'est très légitime. Spécifiez simplement l'attribut de taille de l'annonce, en particulier la hauteur. Après cela, vous ne remarquerez plus de changement de mise en page lors du chargement de l'annonce.

Vous trouverez ci-dessous un exemple de bloc d'annonces responsives que j'ai utilisé sur mon blog juste en dessous de l'en-tête. J'ai remplacé mon identifiant d'éditeur et mon espace publicitaire par XXXXXX. J'ai remarqué que j'ai ajouté l'attribut height (hauteur min : 300 px). Au moment où j’ai fait cela, tous les problèmes CLS ont disparu pour toujours.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Cela permet de réserver cette taille sur la page. Ainsi, chaque fois que des annonces s'affichent, il n'y a pas de changement de mise en page, puisque vous avez déjà défini la taille.

8. Définissez l'attribut de taille pour vos images et autres médias

Tout comme avec les publicités, les images et autres médias peuvent entraîner des changements de mise en page lorsqu'ils sont chargés sur votre site Web. Vous pouvez simplement lire quelque chose, puis une image se charge et tout à coup il y a un changement de mise en page, ce que vous lisiez est hors de vue et tout ce que vous voyez est autre chose ou vous cliquez même sur quelque chose d'autre par erreur.

Vous pouvez éviter tout cela en définissant l'attribut de taille sur vos fichiers multimédias. Votre métrique CLS sera heureuse que vous l'ayez fait.

9. Images de chargement paresseux.

Vous avez peut-être vu les conseils sur PageSpeed ​​Insight pour différer les images hors écran. Cela signifie simplement de charger paresseux vos images.

Ce que fait le chargement paresseux est de réduire la taille de la page et également de réduire le temps de chargement de votre page lorsqu'un utilisateur visite. Ce qui est bon pour les métriques CWV.

Cela contribuera notamment à améliorer le LCP.

10. Optimisez le CSS en minimisant et en générant du CSS critique

Le CSS est ce qui rend un site Web cool, mais un gros fichier CSS peut être un gros problème car il retardera le rendu de la page à l'utilisateur.

Lorsqu'un utilisateur visite votre site Web, le navigateur, par son comportement normal, retardera le rendu de votre page Web à l'utilisateur jusqu'à ce qu'il ait chargé, analysé et exécuté tous les CSS référencés dans l'en-tête de votre page Web. Si vous avez un gros fichier CSS, cela peut être un gros problème. Cela ralentira votre site.

Le CSS critique peut aider en ne chargeant que le CSS nécessaire au chargement de la page. Alors que le reste du CSS peut être chargé de manière asynchrone.

Il peut également être utile de réduire votre CSS en supprimant les espaces blancs et les commentaires pour réduire la taille du fichier.

Vous pouvez aussi vous supprimer le CSS inutilisé. Si un service que vous utilisez pousse des CSS qui ne sont pas utilisés, vous pouvez les supprimer en toute sécurité.

Si vous utilisez WordPress, il existe des plugins comme WP Rocket, LiteSpeed ​​Cache, FlyingPress et d'autres qui peuvent vous aider à y parvenir.

11. Mettre en œuvre le chargement intelligent AdSense

Cette méthode peut éliminer presque complètement tous les problèmes si AdSense est responsable du ralentissement de votre site Web.

Il s'agit de charger AdSense de manière intelligente. AdSense ne sera pas chargé tant qu'un utilisateur n'aura pas effectué une action telle que faire défiler ou cliquer. Cela améliorera considérablement le temps de chargement et tous les éléments vitaux Web principaux affectés par AdSense.

Il existe de nombreux plugins WordPress qui peuvent vous aider à faire cela, WP Rocket et Flying Scripts en sont un exemple. Cette méthode, à ma connaissance, ne viole pas la politique de Google AdSense.

Remarque : Bien que cette méthode puisse contribuer à améliorer la vitesse perçue et les scores des pages, elle peut avoir un impact sur vos revenus AdSense. Je vous recommande de faire une expérience pour être sûr que cela en vaut la peine

12. Utilisez la police System Stack si vous le pouvez

Les polices ajoutent un temps de chargement supplémentaire sur n'importe quel site Web. Et pour les pages Web sans images, votre bloc de texte peut être responsable de votre note LCP. Dans ce cas, votre score LCP sera directement influencé par votre police.

Alors que Google Font et Font Awesome continuent de s'améliorer, l'utilisation de la police de la pile système offre une amélioration significative. Bien que pas aussi fantaisiste selon l'appareil.

13. Utilisez un CDN

Si vous avez des utilisateurs de différentes parties du monde, alors en utilisant un CAN peut vous aider à améliorer votre vitesse et indirectement vos métriques Core Web Vitals.

Un CDN en explication simple fait de nombreuses copies de votre site Web et les stocke dans divers points de présence (POP) dans différentes parties du monde. Lorsque quelqu'un demande votre site Web, il dessert votre site Web à partir de l'emplacement le plus proche.

Par exemple, si votre site est hébergé aux États-Unis et que vous avez un visiteur du Royaume-Uni, au lieu de récupérer votre site depuis les États-Unis, le CDN servira votre site depuis le Royaume-Uni. L'effet de cela sera une livraison rapide. La rapidité.

Vous pouvez consulter le meilleurs CDN là-bas.

14. Configurer la prélecture DNS

Si vous comptez sur un service externe comme un CDN pour la livraison de votre site Web, vous devrez peut-être mettre en place un DNS Prefetching pour minimiser les retards dus à la recherche DNS.

La prélecture DNS prélèvera le DNS avant qu'il ne soit appelé. Pour qu'il se charge en un instant lorsqu'il est enfin appelé.

15. Optimisez les scripts tiers

Vérifiez que certains des services que vous utilisez sur votre site n'ajoutent pas de scripts tiers susceptibles de ralentir vos sites.

Vous pouvez remplacer la solution par des requêtes tierces ralentissant votre site par une meilleure solution.

En ce qui concerne Google AdSense, un autre script tiers, vous ne pouvez pas faire grand-chose. La meilleure pratique consiste à utiliser un maximum de 3 annonces réunies sur une page. Évitez les contenus correspondants car ils génèrent de faibles revenus mais augmentent le temps de chargement.

16. Supprimer AdSense du dessus du pli

Ce conseil est basé sur des expériences. Si toutes vos mesures sont bonnes dans le rapport de la console de recherche, à l'exception de LCP, assurez-vous d'abord que vos images et vos polices sont optimisées. S'ils sont optimisés et que vous échouez toujours au LCP, AdSense pourrait en être responsable.

Si vous pouvez vous le permettre, supprimez AdSense du dessus du pli pendant un mois et voyez si le problème disparaît.

Si vous ne souhaitez pas le supprimer, vous pouvez le retarder manuellement ou à l'aide d'un plugin comme Flying Scripts.

17. Passez à AMP

AMP signifie Accelerated Mobile Pages. L'idée d'AMP est d'optimiser les pages Web pour qu'elles se chargent plus rapidement sur mobile. Et bien sûr, l'AMP open source Projet a été lancé par Google.

Alors qu'AMP était initialement destiné à accélérer les pages mobiles, il peut également accélérer les pages de bureau.

Les pages AMP sont systématiquement plus rapides que les pages mobiles ou de bureau, parfois de plus de 100 % selon notre observation.

Si la seule stratégie de monétisation de votre site Web est Google AdSense, vous pouvez envisager de basculer tout votre site Web vers AMP. J'ai personnellement remarqué que sur un blog que je possède, AdSense sur les pages AMP convertit parfois plus que sur les mobiles et les ordinateurs !

Pour aller plus loin

Les Core Web Vitals peuvent vous aider à améliorer votre site Web pour vos utilisateurs et pas seulement pour Google. Il est très courant d'avoir un bon score de test de données de laboratoire mais un mauvais score de données de terrain.

Cela est dû à la composition de vos utilisateurs. Si la plupart de vos utilisateurs viennent d'endroits où l'Internet est lent, vous avez peut-être fait du bon travail en optimisant, mais vous échouez toujours dans les données de terrain.