TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

6

Google pousse les webmasters à mettre en place toutes les mesures nécessaires pour améliorer la vitesse de chargement des pages. La vitesse de chargement des pages de votre site Web est mesurée en fonction de quelques paramètres, comme vous pouvez le voir dans l’outil Google PageSpeed ​​Insights. Le Cumulative Layout Shift (CLS) est l’un des critères de mesure de la vitesse de Core Web Vital. C’est un facteur important non seulement pour améliorer la vitesse, mais aussi pour une meilleure expérience utilisateur. Dans cet article, nous expliquerons diverses raisons du problème CLS et comment corriger l’erreur de décalage de mise en page cumulative dans WordPress.

Qu’est-ce que le décalage de mise en page cumulatif ?

Avant de poursuivre la lecture, il est nécessaire de comprendre ce qu’est CLS. En termes simples, il s’agit d’un changement dans la mise en page du contenu qui entraîne une mauvaise expérience utilisateur. Par exemple, vous êtes sur le point de cliquer sur un bouton sur une page et soudain une image de bannière se charge au-dessus et pousse le bouton vers le bas. En fin de compte, vous finirez par cliquer sur l’image par inadvertance, ce qui peut vous amener à une autre page. C’est une très mauvaise expérience utilisateur et Google a une bonne explication dans cet article que vous pouvez lire plus loin.

Connexe : Comment activer le chargement paresseux des images dans Google Chrome ?

Vérification de l’erreur de décalage de mise en page cumulée

Ouvrez l’outil Google PageSpeed ​​Insights (PSI) et vérifiez la vitesse de votre page Web. Vous pouvez vérifier les données de champ ou le résumé d’origine pour confirmer que le problème de décalage de mise en page cumulatif existe sur votre site. Vous pouvez survoler la barre de progression pour trouver le pourcentage cumulé de chargement dans lequel le problème existe sur la page/le site.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Vérifier le problème CLS dans PSI

Afin de trouver les éléments à l’origine des problèmes, faites défiler jusqu’à la section de diagnostic et vérifiez sous « Éviter les grands changements de mise en page ». Ici, Google affichera la liste des éléments provoquant un changement de mise en page sur la page testée.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Évitez les grands décalages de mise en page

Vérifier les détails dans la console de recherche Google

Vous pouvez afficher les URL des pages présentant un problème CLS dans votre compte Google Search Console. Après vous être connecté à votre compte, accédez à la section « Core Web Vitals » sous la section « Améliorations ». Vous pouvez trouver les rapports pour mobile et ordinateur de bureau pour afficher les pages avec « Problème CLS : plus de 0,25 (mobile) / (ordinateur de bureau) ».

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Problème CLS dans la console de recherche Google

Cliquez sur le problème pour afficher l’exemple d’URL sur votre site affecté par le problème CLS et le temps CLS moyen. Google considérera que CLS est un problème selon le tableau ci-dessous :

Bon A besoin d’amélioration Pauvres
<0.1s 0,1 à 0,25 s >0.25s

Par conséquent, vous devez viser à réduire le temps CLS à moins de 0,25 seconde afin de rendre cet outil vert/jaune dans PSI et supprimer les erreurs de votre compte Search Console.

Correction d’une erreur de décalage de mise en page cumulative dans WordPress

Voici quelques-uns des facteurs qui peuvent entraîner un retard cumulatif de changement de mise en page sur le site WordPress. Expliquons chacun des problèmes et des solutions possibles en détail.

1 Optimisation de la livraison CSS

Comme vous le voyez dans la capture d’écran ci-dessus de "Éviter les grands décalages de mise en page", le premier élément est "<div class="row footer-row">". Ceci est surprenant car il n’y a aucune possibilité de charger la section de pied de page au-dessus de la zone de pliage. Après vérification, nous avons compris que cela était dû à l’option "Optimiser la livraison CSS" activée avec le plugin WP Rocket. Cette option générera un CSS critique et l’intégrera dans la section d’en-tête pour supprimer le CSS bloquant le rendu. Cependant, cela conduira à un problème de décalage de mise en page cumulatif dans de nombreux cas. Si vous utilisez WP Rocket ou tout autre plugin de mise en cache pour incorporer CSS dans l’en-tête, désactivez cette option et vérifiez si cela contribue à améliorer le délai CLS.

2 AdSense et autres scripts publicitaires en ATF

De nombreux éditeurs utilisent Google AdSense ou un autre réseau publicitaire pour monétiser leur contenu en ligne. Vous devez insérer un morceau de code publicitaire JavaScript sur votre page Web afin d’afficher des publicités. En règle générale, vous devez insérer le code d’annonce au-dessus du pli (ATF) pour augmenter la visibilité et les revenus de l’annonce. Cependant, cela affectera directement la vitesse de chargement de la page et créera une erreur de décalage de mise en page cumulative dans l’outil Google PageSpeed ​​Insight (PSI).

Après avoir complètement chargé le contenu au-dessus du pli, votre publicité commencera à se charger et à pousser le contenu vers le bas.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Modification de la mise en page due à la publicité

Il existe peu d’options pour résoudre ce problème. L’une consiste à différer le script publicitaire dans WordPress à l’aide de plugins comme WP Rocket. Cependant, cela aura un impact sur votre impression d’annonce et votre taux de clics, réduisant ainsi les revenus globaux.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Retarder l’exécution JavaScript de l’annonce

La deuxième option consiste à utiliser des publicités à largeur fixe au-dessus de la zone de pliage, comme le recommande Google. Malheureusement, Google indique également clairement que l’utilisation d’une largeur fixe n’est pas possible avec des annonces réactives ou fluides.

Il n’est pas possible de réserver de l’espace pour ces emplacements avant de demander du contenu publicitaire, et les annonces de taille fluide entraînent toujours des changements de mise en page. Pour atténuer les effets des changements de mise en page lorsque vous travaillez avec des espaces publicitaires fluides, nous vous recommandons ce qui suit : N’utilisez la taille fluide que pour les espaces situés sous la ligne de flottaison.

Google

Par conséquent, en résumé, vous ne pouvez pas résoudre le problème à moins de supprimer le code d’annonce externe de la zone ATF. Cela est vrai pour tout autre code tiers que vous avez placé dans la section d’en-tête de votre site.

3 Utilisez des dimensions d’image appropriées

Ceci est similaire à l’utilisation de fixes avec des publicités. Lorsque vous n’avez pas de dimensions d’image, les navigateurs attendront que les images se chargent et pousseront le contenu ci-dessous, provoquant un problème de décalage de mise en page. Heureusement, ce n’est pas un problème car WordPress ajoutera automatiquement des dimensions aux images lors du téléchargement via l’éditeur de publication. Cependant, vous devez ajouter manuellement des paramètres de hauteur et de largeur à la balise img si vous insérez manuellement des images à l’aide du bloc "HTML personnalisé", de la fonction "Modifier en HTML" ou de l’image du logo. De plus, définissez une largeur et une hauteur fixes lors de l’intégration de vidéos et d’iframes à partir de sites Web tiers.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Largeur et hauteur manquantes pour l’image

4 polices retardant le chargement du contenu

Chaque site Web utilise des polices. Cela créera un problème de décalage de mise en page cumulatif, en particulier lors de l’utilisation de services tiers tels que les polices Google. Étant donné que les polices Google doivent être chargées à partir de serveurs externes, cela créera un problème de décalage de mise en page cumulatif similaire à celui du code publicitaire. Vous pouvez également voir ce problème dans PSI comme « Assurez-vous que le texte reste visible pendant le chargement de la police Web », indiquant qu’il y a un retard dans le chargement du contenu visible.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Problème de police

  • Le moyen efficace de résoudre ce problème consiste à utiliser un plug-in de mise en cache pour préconnecter et prélecturer DNS des domaines tels que fonts.googleapis.com et fonts.gistatic.com. Cela vous aidera à accélérer le chargement des polices en préconnectant le serveur de polices Google. SG Optimizer, WP Rocket (automatique) et de nombreux autres plugins offrent cette fonctionnalité que vous pouvez utiliser à cette fin. De plus, vous pouvez limiter le nombre de familles de polices et réduire la taille du fichier à télécharger.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Optimisation des polices Web SG Optimizer

  • Une autre option consiste à utiliser les polices système ou à héberger les fichiers de polices sur votre serveur. Par exemple, des thèmes comme GeneratePress et Astra vous permettent de choisir la police système pour votre site.
  • Dans tous les cas, assurez-vous de précharger les polices pour éliminer l’avertissement de demande de clé de préchargement qui peut également entraîner un retard de décalage de mise en page cumulatif.

5 icônes de police dans le menu et l’ATF

De nombreux thèmes WordPress utilisent des icônes de police dans la zone de navigation pour afficher les éléments de sous-menu. Généralement, ces icônes sont incluses à partir de sites Web tiers tels que font awesome ou icomoon. Cela créera des problèmes similaires comme les polices et augmentera le temps de décalage cumulatif de la mise en page. Des thèmes comme GeneratePress vous permettent de choisir des icônes SVG au lieu de polices pour le menu de navigation. De même, sur le thème Astra, vous pouvez désactiver le chargement de la bibliothèque de polices à l’aide d’une fonction personnalisée. De cette façon, vous pouvez améliorer le problème de décalage de mise en page cumulatif dans WordPress. Cependant, vous n’aurez pas d’autre choix que de désactiver les éléments de sous-menu dans la plupart des autres thèmes, ce qui n’est pas une bonne solution.

6 Logo d’image de chargement paresseux

Les webmasters comprennent mal l’avertissement PSI sur « Rediffuser les images hors écran ». Cet avertissement se produit lorsque vous ne chargez pas paresseux les images disponibles dans le contenu sous le pli (BTF). Cependant, si vous utilisez un plugin dans WordPress, toutes les images avec HTML

Afin de réduire le temps CLS dans l’outil PSI, vous devez exclure l’image du logo du chargement différé. La solution dépend du plugin que vous utilisez pour le chargement paresseux de vos images. Par exemple, dans WP Rocket, accédez à la section « Média > LazyLoad » et fournissez le nom du logo ou l’URL à exclure du chargement différé.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Exclure le logo du chargement différé

7 curseurs d’image à chargement paresseux dans ATF

Semblable au logo de l’image, vous verrez un temps de décalage de mise en page cumulatif élevé lorsque vous avez des curseurs d’image au-dessus de la zone de pliage. Vous pouvez exclure les images de curseur du chargement paresseux et tester cela aide à réduire le temps CLS.

Connexe : 25 conseils SEO pour classer votre site WordPress.

8 Rendu bloquant JavaScript comme jQuery

Le dernier sujet est le rendu populaire bloquant JavaScript en raison de thèmes basés sur jQuery. En fait, WordPress inclut également jQuery dans le dossier wp-includes. Vous pouvez différer jQuery et d’autres scripts de blocage de rendu sur votre page à l’aide d’un plugin de mise en cache comme W3 Total Cache. Cependant, assurez-vous de tester votre site à fond pour éviter les mises en page cassées.

Validation du correctif dans la console de recherche Google

Après avoir résolu le problème, assurez-vous de soumettre vos validations dans le compte Google Search Console. Vous pouvez revenir à la section « Core Web Vitals » et soumettre des validations pour l’ensemble du site.

Comment réparer le décalage de mise en page cumulatif dans WordPress ?

Validation du problème CLS dans la console de recherche Google

Cela prendra jusqu’à 28 jours pour que Google vérifie le problème CLS sur votre site et affiche les résultats correspondants dans le compte Search Console.

Conclusion

Comme vous pouvez le voir, la principale raison de l’erreur de décalage de mise en page cumulative dans WordPress est due au placement de scripts de blocage de rendu au-dessus de la zone de contenu du pli. Il peut s’agir de codes publicitaires, de jQuery, de polices, d’icônes ou de tout autre élément. La solution pour surmonter ce problème est d’utiliser des thèmes minimalistes simples comme GeneratePress ou Astra. D’un autre côté, vous pouvez utiliser des plug-ins de mise en cache pour vous préconnecter et combiner des fichiers de polices pour réduire le temps de décalage cumulatif de la mise en page.

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails