(image + texte) et Cumulative Layout Shift (CLS)

WRInaute passionné
Bonjour,

Je suis en train de résoudre les quelques problèmes de CLS que j'ai sur mon site.
Il ne me reste plus que le cas suivant à traiter. J'ai le code HTML suivant :
Code:
<div class="quelle-classe">
    <p>
        <img src="monimage.png" alt="..." width="14" height="23" />
        Bla bla bla ...
    </p>
</div>

dans mon CSS sur la class "quelle_classe" j'ai un text-align:center;
sur l'image j'ai {vertical-align:bottom;padding:0 0.5em 0 0;}

le rendu est ce que j'attends, sauf que le CLS n'est pas bon (j'ai fait un test en vitesse réseau réduite pour le constater aussi)
En effet, à cause de l'image, le <P> se met d'abord à gauche, puis vient se centrer

Pour info, sans l'image le texte seul se centre d'emblée

une idée ?
 
WRInaute passionné
j'ai un second problème qui, celui-ci, ne peut pas etre résolu avec un background

il s'agit d'un image (150 x 250 pixels) entouré par du texte : truc assez classique
l'image est en float:left suivi d'un texte dans un Paragraphe (texte justifié)

il y a un léger CLS calculé par Page Spped insight

sans l'image en float ==> 0 CLS

constatez-vous la meme chose ?
 
WRInaute passionné
ton image est au dessus ou dessous dans ton code?

Je crois qu'il faut que le texte soit en premier. (je dis peut être une connerie mais c'est ce que j'ai compris en lisant certaines choses)
 
WRInaute passionné
mon texte est en haut à gauche, et c'est effectivement l'image qui s'affiche en premier

je viens de faire un test avec un float: right sur l'image et ça ne change rien

toujours un petit peu de CLS
 
WRInaute passionné
bon j'ai viré le float avec le texte qui entoure l'imge
ma page comme maintenant toutes mes pages de mon site ont un CLS à zéro

j'attends le google update de mai avec impatience ........ ou pas
 
Discussions similaires
Haut