Il est impossible de satisfaire complètement Google. Je l'ai abandonné il y a longtemps, bien qu'il y ait des problèmes à régler, comme le CLS (Décalage cumulatif de la mise en page).
Décalage cumulatif de la mise en page
Le décalage cumulatif de la mise en page est le changement cumulatif de la mise en page. Cette métrique est importante car elle analyse stabilité visuelle et la fréquence à laquelle les visiteurs subissent des changements inattendus dans la mise en page
En bref, cela mesure tout déplacement des éléments en haut de la page pendant le chargement.
L'obtention d'un CLS faible permet de garantir que la page est agréable à l'œil et d'éviter les mouvements gênants qui peuvent amener le lecteur à perdre de vue et/ou la position d'éléments de navigation importants.
On considère que l'expérience de l'utilisateur est bonne si le CLS ne dépasse pas 0,1, jusqu'à 0,25 il doit s'améliorer et à partir de là il est considéré comme un mauvais score. Comme vous le savez, je suppose, cela peut être mesuré de plusieurs façons. Le plus couramment utilisé est PageSpeed Insights.
Comme indiqué dans la documentation du Core Web Vitalsla documentation, un mauvais CLS peut être causé par divers éléments tels qu'une image ou une vidéo aux dimensions inconnues, une police qui s'affiche plus grande ou plus petite que son alternative, ou une publicité ou un widget tiers qui change de taille de manière dynamique
Paradoxalement, certains des éléments qui ont tendance à brosser le CLS sont les annonces Google Adsense. Surtout si vous utilisez le annonces automatiques (non recommandé). Il y a des cas où ils ruinent même complètement la vitesse de chargement.
Comment détecter le défilement
Maintenant que nous sommes en train d'essayer de régler le problème d'Adsense, nous pouvons nous pencher sur le reste des éléments qui peuvent engraisser le CLS. Il existe différentes façons de procéder, en voici quelques-unes.
Regarder
La méthode la plus rustique est la simple observation, à l'œil. Si le mouvement est perceptible, vous le verrez tout de suite, mais il existe des mouvements moins perceptibles qui nécessitent une inspection plus approfondie.
Dans la Search Console
Dans GSC, sous "Top web metrics", vous pouvez obtenir la liste des URL présentant des problèmes de CLS et de LCP pour les examiner de plus près, un par un.
Avec une extension de navigateur
Vous pouvez installer l'extension Chrome CLS Checker - Aller plus loin et testez toutes ces URL, s qui sont pleines de ponctuation. En outre, l'extension donne des indices sous forme de balises rouges et vous montre la liste des éléments et les CLS qu'ils consomment. En cliquant sur "Toogle", vous mettez en évidence l'élément en question. Dans mon cas, comme le problème des annonces Adsense était déjà réglé, une seule apparaît.
Vidéo
Après avoir fait un test sur webpagetest.org vous pouvez voir les vidéos qu'il génère.
La mise en pause de la vidéo permet de trouver plus facilement les petits déplacements.
Il génère également un gif animé comme celui-ci. Si vous regardez de près, les éléments du menu ainsi que le titre et le texte défilent un peu à cause de ce qui semble être un changement de taille et/ou d'emplacement de la police, mais l'espace publicitaire au-dessus du titre est déjà réservé, il ne défile donc pas.
Mais c'est un autre pod, traitons maintenant du comportement des annonces.
Solutions pour la réservation d'espaces de blocs publicitaires
En cherchant la solution la meilleure et la plus rapide, j'ai découvert que la solution consistait à ajouter une valeur de hauteur minimale à un wrapper (div) autour de chacun des blocs d'annonces pour réserver cet espace et empêcher le défilement après le chargement
Toutefois, il semble qu'il ne suffise pas d'utiliser une classe pour pointer vers cette propriété CSS, mais qu'il faille également utiliser un ID pour le wrapper. Il semble que, pour une raison inconnue, Google AdSense JavaScript supprime les directives de hauteur minimale de tout objet parent. Cependant, ils ne sont pas supprimés si un ID est utilisé pour le ciblage CSS.
Ceci est expliqué ici résumée et quelque peu plus détaillé dans la documentation de Google. Comme cette solution me semblait pénible, car je devais vérifier tous les blocs, j'ai continué à chercher une alternative jusqu'à ce que je trouve ce qui fonctionnait pour moi Inserteur d'annonces. Voici les étapes.
Changer les publicités adaptatives en taille fixe
La première chose a été de cesser d'utiliser les blocs publicitaires adaptatifs. J'ai changé tous les blocs en tailles fixes
Pour cette décision, vous devez étudier et évaluer votre cas spécifique.
Bien que Google affirme que les adaptatifs génèrent plus de revenus (évidemment en raison de la possibilité d'afficher des tailles différentes), cela est assez élastique et peut varier en fonction de différents scénarios. Si vous optez pour les tailles les plus populaires, vous montrerez toujours des annonces.
Désactiver l'optimisation de la taille
Bien que les blocs soient déjà censés avoir une taille fixe, il est préférable de désactiver l'option qui permet à Google de décider seul de la taille des annonces mobiles. Cette option se trouve dans l'administration Adsense, sous Ads/Global Settings.
De cette façon, nous évitons les surprises au cas où nous aurions manqué une annonce que nous avons placée à la main. En tout cas, ce n'est pas parce qu'ils ont une taille fixe qu'ils ne sont plus réactifs.
Réservation d'espace pour les annonces avec Ad Inserter
Ad Inserter est, à mon avis, le meilleur plugin pour la gestion des annonces, qui peut même être utilisé pour ajouter d'autres contenus
Pour réserver un espace pour chaque annonce, il suffit d'aller dans "Affichage" et de définir la largeur et la hauteur de chaque bloc.
Si vous utilisez su version PROvous pouvez également vérifier le Lazy Load, qui tend également à atténuer un peu plus le CLS.
Et pendant que vous y êtes, vous pouvez vous assurer qu'il n'y a pas de dimensions manquantes dans les images, ceci peut également être corrigé de plusieurs façons. En voici quelques-uns, rapides et faciles à utiliser Perfmatters o WP Rocket (tous deux payants).
Ou le plugin Cache Litespeed si vous hébergez votre blog sur un serveur Litespeed.
Si tout se passe bien, vous verrez la chute du CLS dans les rapports de terrain dans quelques heures et dans quelques jours dans les rapports de laboratoire du PageSpeed Insights.
