C'est insupportable !
Pendant le chargement de votre page web, le texte s’affiche mais se déplace ensuite sur l’écran jusqu’à ce que tous les éléments de la page soient chargés.
D’où vient le problème ?
Votre navigateur se sait pas quel espace vide réserver aux images
Votre navigateur commence par charger la structure de la page et affiche les élements qui s’y trouvent déjà : le texte.
Mais les contenus externes : les images et feuilles de style sont chargés ensuite.
Le problème est qu’il ne sait pas quel espace vont prendre certains éléments donc il est obligé de tout décaler lorsque les images arrivent ou que de nouvelles informations sur la présentation de la page arrivent.
Il se produit alors des glissements visuels très désagréables :
Ce glissement désagréable donne une mauvaise note de classement à la mesure CLS qu’utilise aussi Google pour vous positionner.
Le plus gros problème encore est le risque de cliquer sur le mauvais bouton ! Si un bouton sur lequel l’internaute veut cliquer se déplace et est remplacé par un autre, il aura cliqué le mauvais bouton.
Que faire ?
Le problème peut prendre du temps à être résolu car il faut probablement intervenir sur le thème du site ou la feuille de style.
Mais avec de la chance, il suffit de corriger les indications de taille des images ce qui peut être fait avec l’extension WP-Rocket :
Il existe des cas où il est impossible de résoudre le problème : les publicités Google Ads par exemple. Le contenu provient d’un site externe et sa dimension est complètement inconnue à l’avance.
