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

[saluts92]

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 :

<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 ?

 

[ABCWEB]

si tu mets une div à la place du <p> ?

 

[saluts92]

si tu mets une div à la place du <p> ?

j'ai essayé déjà, et meme sans P, et c pareil

 

[ABCWEB]

avec l'image en background? après ça j'aurai plus trop d'idée

 

[saluts92]

avec l'image en background?

oui, ça va etre l'option suivante

 

[saluts92]

avec l'image en background?

effectivement cela fonctionne en background : CLS=0

mais je trouve quand même bizarre ce décalage à gauche avant de se centrer parce il y a une image

 

[saluts92]

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 ?

 

[ABCWEB]

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)

 

[saluts92]

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

 

[saluts92]

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