Cumulative Layout Shift : décalage affichage du texte

[poupilou]

Salut à tous,

Cela fait 2 jours que je cherche une solution à un problème de décalage d'affichage de mon texte mais en vain

Lorsque je charge par exemple cette page sur mobile le titre <h1> ne se positionne pas tout de suite à la bonne place, il monte et puis il redescend et prend enfin sa position définitive, ce n'est pas top pour l'expérience utilisateur.

D'après le PageSpeed Insight pour cette même page, je constate un Cumulative Layout Shift (CLS) à +/- 0.142, c'est pas top et lorsqu'on consulte la carte proportionnelle du résultat de PageSpeed Insight on voit que le <h1> ne se positionne pas tout de suite à la bonne place.

Comment supprimer ce décalage d'affichage de la <h1> (qui existe sur toutes les pages de mon site) ?

D'avance merci pour vos réponses.

 

[colonies]

Il semble que ton site calcule en JS le décalage à appliquer pour que le contenu de la page ne soit pas sous ton header qui devient fixe en mobile.
Un petit patch qui devrait fonctionner : reprendre la valeur calculée et l'intégrer à ta CSS.
Même si une subtilité m'échappe ou si tu ajustes le design plus tard, la valeur reste recalculée, donc au pire, tu auras à nouveau un petit décalage au chargement.

@media (max-width: 767px) {
    .fixed-header-margin {
        padding-top:114px;
    }
}

 

[poupilou]

Merci pour ta réponse.

J'ai ajouté ton code css et testé sur mon site mais le décalage du <h1> est toujours là (voir la carte proportionnelle ci-dessous) et la valeur valeur du CLS est toujours +/- la même 0.142.


Est-ce les ressources qui bloquent le rendu qui provoque ce CLS de 0.142 ?

 

[colonies]

Ça ne fonctionne pas parce que tu as une règle CSS qui prend le dessus, ce qui fait que la modification est ignorée.
Dans ta CSS, recherche :

@media (max-width: 767px) {
    #content-block .content-center, .position-center {
        padding: 0 15px;
    }
}

et remplace par :

@media (max-width: 767px) {
    #content-block .content-center, .position-center {
        padding: 0 15px;
        padding-top: 114px; /* hauteur du header */
    }
}

 

[poupilou]

Grâce à ton aide et 2 lignes de code, le CLS est maintenant de 0.005 :


Un immense merci pour ton aide

 

[poupilou]

Ma homepage a aussi un souci avec le CLS qui est dû aux 3 images de la bannière Wrapper. Ces images se chargent les unes sous les autres et provoquent un décalage d'affichage de cette page, voyez-vous une solution pour fixer ce problème ?

 

[PLuToNiuM]

Ma homepage a aussi un souci avec le CLS qui est dû aux 3 images de la bannière Wrapper. Ces images se chargent les unes sous les autres et provoquent un décalage d'affichage de cette page, voyez-vous une solution pour fixer ce problème ?
Voir la pièce jointe 2182

Bonjour, je pense que votre problème persiste :
https://pagespeed.web.dev/analysis/https-www-diamants-infos-com/8xez9o2ler?form_factor=mobile

Je peux résoudre n’importe quel problème CLS.
J'aimerais t'aider. Envoyez-moi simplement un message privé.