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 potentiel de classement dans les moteurs de recherche, 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 indicateurs feront partie intégrante de ses signaux de classement utilisés pour déterminer le positionnement 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.

Largest Contentful Paint (LCP) : Le LCP mesure le temps de chargement de la plus grande image ou du plus grand bloc de texte visible sur une page web. Si le plus grand élément visible se charge rapidement, on considère que le reste du contenu (images et texte) se chargera également rapidement. Le temps de chargement minimal requis est de 2.5 secondes.

Délai de première interaction (FID) : le FID mesure l’interactivité d’une page web. Il correspond au temps nécessaire au navigateur pour commencer à traiter les gestionnaires d’événements après qu’un utilisateur a cliqué sur votre site. On parle souvent de « première impression » de votre site web. Le délai requis est de 100 millisecondes.

Décalage cumulatif de mise en page (CLS) : Le CLS mesure le décalage de mise en page sur une page web. Lorsqu'une page se charge et qu'un élément apparaît ou disparaît soudainement, la page doit s'adapter à une taille différente ; c'est ce décalage qui est mesuré. C'est catastrophique pour l'expérience utilisateur, et je suis d'accord. Le score minimal requis est de 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 du choix d'un hébergeur web , privilégiez toujours un centre de données proche de la majorité des utilisateurs de votre site. Vous pouvez identifier leur localisation grâce à vos statistiques. D'où viennent la plupart de vos utilisateurs ? Choisissez un centre de données proche de leur zone géographique. 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 cherchez un hébergeur web rapide, vous trouverez de nombreuses recommandations, souvent motivées uniquement par des partenariats et sans aucune sincérité. Si vous utilisez WordPress et que votre budget le permet, je recommande vivement Kinsta : c'est le meilleur hébergeur pour WordPress. Si vous avez besoin d'une solution plus économique ou si vous n'utilisez pas WordPress, Cloudways est également très performant.

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 à respecter pour un thème. Parmi les erreurs les plus fréquentes, on peut citer une dépendance excessive à jQuery, le chargement inutile de trop de fichiers CSS/JS, une taille de thème trop importante, etc. Vous pouvez toujours utiliser un outil comme Yellow Labs 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 un CMS similaire, il existe des plugins et des solutions pour optimiser automatiquement les images. Il existe également des solutions cloud indépendamment de 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 faire cela 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 réactif que j'ai utilisé sur mon blog juste en dessous de l'en-tête. J'ai remplacé ma référence éditeur et mon espace publicitaire par XXXXXX. J'ai remarqué que j'ai ajouté l'attribut height (min-height : 300px). Au moment où j'ai fait cela, tous les problèmes de 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 le conseil sur PageSpeed ​​Insight concernant le chargement différé des images hors écran . Cela signifie simplement charger vos images de manière différée.

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 également supprimer les fichiers CSS inutilisés . Si un service que vous utilisez envoie des fichiers CSS inutilisés, vous pouvez les supprimer sans risque.

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.

De nombreux plugins WordPress permettent de réaliser cette opération ; WP Rocket et Flying Scripts en sont des exemples. À ma connaissance, cette méthode ne contrevient pas au règlement de Google AdSense.

Remarque : Bien que cette méthode puisse améliorer la vitesse perçue et le score de page, elle peut impacter vos revenus AdSense. Je vous recommande d’effectuer un test au préalable pour vérifier si 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, l'utilisation d'un CDN 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 les meilleurs CDN disponibles.

14. Configurer la prélecture DNS

Si vous utilisez un service externe comme un CDN pour la diffusion de votre site web, vous devrez peut-être configurer une prélecture DNS afin de minimiser le délai dû à 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. Le principe d'AMP est d'optimiser les pages web pour un chargement plus rapide sur mobile. Et bien sûr, le projet open source AMP a été initié 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 !

Conclusion

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.