Comment optimiser la mise en page cumulative pour passer à WordPress (CLS) – les clés Web de base

Mauvais cumul des mises en page sur WordPress? Les changements cumulatifs de mise en page, appelés CLS, sont l’un des trois indicateurs des projets clés du nouveau réseau de base de Google. Google a annoncé qu’à partir de mai 2021, il commencera à utiliser des informations importantes sur les sites Web de base comme facteurs de classement, ce qui est généralement un bon indicateur de l’expérience utilisateur. Par conséquent, si votre score cumulatif de conversion de mise en page n’atteint pas la plage recommandée par Google, nous vous recommandons de le corriger immédiatement afin qu’il so it inférieur au seuil de Google et qu’il n’y ait aucun problème (en général, il est également possible de créer une meilleure expérience pour vos visiteurs).
Dans cet article, je vais expliquer ce qu’est un décalage de mise en page cumulatif et comment il est connecté à WordPress. Ensuite, je partagerai quelques conseils WordPress spécifiques pour améliorer votre score cumulatif de conversion de mise en page. Quel est le déplacement de mise en page cumulé sur WordPress? Avez – vous déjà lu un article sur le site Web de l’éditeur (p. ex., nouvelles) et le contenu de l’article est constamment poussé vers le bas à mesure que de nouvelles annonces sont téléchargées? Ce n’est pas seulement ennuyeux: C’est un exemple parfait de changements cumulatifs de mise en page! Le déplacement cumulatif de la disposition se produit lorsque le contenu du site est « déplacé » pendant le chargement. Comme vous l’avez peut – être vécu dans votre vie, c’est ennuyeux, c’est pourquoi Google encourage les webmasters à se concentrer sur cet indicateur et à l’améliorer.
Les changements cumulatifs de mise en page sont également l’un des trois indicateurs du programme Google Core Web vitals: en savoir plus sur Core Web vitals et WordPress. Quel est le score cumulatif pour un bon déplacement de mise en page? Pour comprendre le déplacement cumulatif de la disposition du site, Google propose trois valeurs possibles: Bon – inférieur à 0,1 nécessite une amélioration – entre 0,1 et 0,25 – mauvais – supérieur à 0,25 Comment trouver les éléments qui changent sur le site maintenant, commençons
Allez à des recommandations pratiques pour améliorer la navigation de mise en page cumulative des sites WordPress.
Cependant, avant d’augmenter votre score, vous devez diagnostiquer le problème. Heureusement, Google l’a rendu facile grâce à PageSpeed Insights. Page speed Insights pour commencer, allez à page speed Insights et analysez l’une des URL du site, comme la page d’accueil. En haut, vous devriez voir un résumé des scores cumulatifs des postes de mise en page: Cependant, les aperçus de vitesse de page vous permettent également d’approfondir et de découvrir des éléments spécifiques qui « changent ». Pour trouver cette analyse, faites défiler vers le bas vers la section diagnostic et étendez le Guide Éviter les grands déplacements de mise en page:
Comme vous pouvez le voir, le titre de mon site Portfolio est le plus grand contributeur au changement de mise en page (bien qu’il soit encore petit). Assurez – vous de voir l’analyse des résultats de déplacement et de bureau. Par exemple, bien que mon site Web ait trois projets que Google a signalés en regardant les résultats mobiles, il n’a signalé aucun projet dans les résultats de bureau. Vous remarquerez peut – être une situation similaire, ou vous pourriez avoir un ensemble différent d’éléments mobiles pour mobile et Desktop. Une autre façon de voir les changements dans le contenu d’un site Web est de réduire artificiellement la vitesse de connexion à l’aide des outils de développement chrome (ce qui facilite la détection des changements mineurs dans le contenu). Allez à l’onglet réseau dans les outils de développement de chrome et utilisez le menu déroulant en ligne pour définir des valeurs personnalisées très lentes, comme 60 Ko \/ s télécharger:
L’article se poursuit comme suit: Donc, rechargez votre site et vous devriez être en mesure de voir plus clairement comment votre contenu se déplace au moment du téléchargement. Une fois que vous savez ce qui a changé
Vous pouvez vous concentrer sur ces problèmes. Cependant, il existe également des pratiques exemplaires générales pour les mises en page cumulatives mobiles que vous devriez mettre en oeuvre afin d’éviter les problèmes dans l’ensemble du site. Comment corriger les décalages cumulatifs de mise en page sur WordPress malheureusement, contrairement à améliorer la plus grande peinture de contenu sur WordPress, corriger les décalages cumulatifs de mise en page peut être un peu technique. De nombreuses corrections impliquent l’analyse de code. Malheureusement, il est difficile d’éviter de lire le Code ici, mais je ferai de mon mieux pour inclure des solutions plug – in là où c’est possible.
Toujours définir la taille de l’image si vous ne définissez pas la taille de l’image dans le Code du site, l’image peut faire bouger d’autres contenus pendant le téléchargement. Heureusement, si vous ajoutez des images via l’éditeur WordPress, WordPress ajoutera automatiquement des images pour vous (et il utilisera également srcset pour définir les images de réponse). Cependant, si vous ajoutez manuellement des images à votre site par Code, assurez – vous d’inclure toujours la taille. Vous devriez voir les attributs hauteur et largeur dans l’image HTML. Par exemple:
Vous définissez toujours la taille de Embed \/ IFRAME comme vous définissez une image, et vous devez vous assurer que vous définissez la taille de tout Embed \/ IFRAME que vous utilisez. Par exemple, si vous voulez intégrer une vidéo YouTube ou une carte Google, assurez – vous de spécifier la hauteur et la largeur. Vous pouvez également envisager de charger des substituants avant l’intégration, ce qui est généralement une bonne pratique de performance. Vous pouvez trouver de nombreuses solutions qui vous permettent de remplacer votre intégration YouTube par une image substituante (jusqu’à ce que l’utilisateur clique sur play video). Quelques bonnes options sont WP rocket (nos commentaires) ou le plug – in de chargement différé gratuit pour l’équipe WP ro
Les visiteurs téléchargent immédiatement les fichiers de police, éliminant ainsi la possibilité d’un foit \/ foit. Cependant, Notez que seules les ressources les plus importantes sont préchargées (par exemple, les polices qui effondrent le contenu ci – dessus). L’utilisation d’un précharge excessif peut ralentir le site. Vous pouvez définir la liste des ressources de police dans la section extras pour le préchargement avec le plug – in autooptimize gratuit: Pour les polices Google, vous pouvez également envisager d’héberger des fichiers de polices localement et de les précharger de cette façon. Vous pouvez le configurer avec le plug – in omgf gratuit, qui contient une bonne fonctionnalité pour précharger automatiquement les caractères au – dessus de l’effondrement. Si vous souhaitez en savoir plus, Google a également un bon article sur la combinaison du précharge et de l’affichage des polices: Vous pouvez choisir d’optimiser réellement le chargement des polices et d’éviter les substitutions de mise en page. Si vous voulez vraiment éviter les problèmes, envisagez d’utiliser la pile de polices système, ce que j’ai fait pour de nombreux sites Web. Cela résout non seulement le problème du chargement des caractères, mais réduit également le nombre de requêtes http et accélère le site. Certains sujets, comme generatepress, simplifient l’utilisation de la pile de caractères système. Cependant, l’inconvénient est clairement que la flexibilité est beaucoup plus faible en termes de style \/ conception. Si vous souhaitez activer l’insertion dynamique de contenu pour les formulaires, le contenu connexe, les alertes gdpr, etc., pour les courriels, utilisez soigneusement l’injection dynamique de contenu. Vous devez faire attention à éviter de déplacer la disposition. En général, une bonne pratique ici est de ne jamais injecter dynamiquement du contenu au – dessus du contenu existant à moins qu’il ne provienne d’une interaction utilisateur (par exemple, un utilisateur qui clique sur un bouton). Par exemple, si vous prévoyez injecter dynamiquement un élément CTA, essayez de l’insérer sous votre billet de blog
C’est en haut ou au milieu. Augmenter les scores cumulatifs de déplacement de mise en page WordPress aujourd’hui, avec les conseils de cet article, vous devriez être en mesure d’augmenter les scores cumulatifs de déplacement de mise en page WordPress (CLS) et de gagner la faveur de Google. Bien sûr, les changements cumulatifs de mise en page ne sont qu’un des trois indicateurs des éléments clés du réseau de base – vous devez également vous concentrer sur d’autres indicateurs. Ainsi, une fois que vous avez mis en œuvre ces stratégies, consultez notre guide pour savoir comment améliorer le plus grand contenu de peinture sur wordpress pour résoudre ce problème. Avez – vous d’autres questions sur la mise en page cumulative et WordPress? Demandez – nous dans les commentaires!