Décalage de mise en page

Bonjour,
Sur l'un de mes sites, j'ai une indication de décalage de mise en page par Lighthouse.
J'ai consulté quelques docs, mais c'est un peu obscur. Et les préconisations que j'ai mises en place n'ont pas produit le résultat attendu. Le plus fort, c'est que pour le même site, je n'ai plus ce décalage en mode mobile (sur Lighthouse).
La perte étant minime, je ne l'avais pas remarqué.
Avez-vous une idée ?

Bonjour,
>> Avez-vous une idée ?
Pour avoir une idée il faudrait avoir une vue du problème!!
Quelle est L’URL concernée? Description du problème? Résultat attendu?

>> mais c'est un peu obscur
Qu'est ce qui est obscur? De quelles docs parlez-vous?

Le site, c'est https://ecrisdroit.fr
Le décalage est indiqué par Lighthouse, qui renvoie sur la doc de Google, que je ne comprends pas trop.
Quand j'ouvre la page, je vois effectivement le bloc de recherche qui passe très brièvement de la droite de la page vers la gauche. C'est très rapide et à peine visible (à condition que la page ait été rechargée).
Parmi les causes, il est indiqué que l'oubli du dimensionnement d'un bloc peut causer ce problème. J'ai vérifié, les dimensions sont bien données.
(À force de bricoler le site, je viens de voir que la recherche ne fonctionne plus, il faut que je corrige ça, mais là n'est pas le problème.)
Modifié par Bongota (24 Oct 2026 - 18:05)

Bonsoir, je ne suis pas un habituer de cet outil, Je viens de regarder sur Chrome avec Lighthouse et je vois 4* 100 comme score.
Je ne vois pas de problème avec cet outil. Pourriez vous poster une capture écran de ce que vous voyez?

Attention cependant vous avez une erreur de balise mal imbriquée que vous pouvez voir grâce au validateur => https://validator.w3.org/nu/?doc=https%3A%2F%2Fecrisdroit.fr%2F
Et une erreur de sémantique pour

 <p><span class="puce"> </span>installer un module sur <b>Gmail.</b><br>

Ce n'est pas un paragraphe qu'il faut mais une liste non ordonnée <ul>
Modifié par casper2 (24 Oct 2026 - 18:52)

Merci pour la balise. Je viens pourtant de passer toutes mes pages au validateur html et je ne l'ai pas vue.
Pour ce qui est du décalage de mise en page, ce n'est effectivement pas énorme, mais j'ai voulu peaufiner.
Voici une capture d'écran.

Et j'ai cassé le JavaScript dans le html en bricolant le site. Je recherche ce que j'ai enlevé.
Cette barre de recherche fonctionne (nait) mais elle est expérimentale. Le but était d'en faire une sans base de données. Elle m'oblige à avoir du JS dans le html, ce que je voudrais éviter.
Modifié par Bongota (24 Oct 2026 - 19:33)

J'ai réparé la barre de recherche, elle fonctionne.
Ce qui pose le problème de décalage de page, c'est précisément cette barre de recherche. Sur la page "Mentions légales" où cette barre de recherche est absente, le décalage de page disparaît sur Lighthouse.
Le lieu est identifié, il reste à trouver la raison.

Bonjour,

Sur votre capture, c’est le bloc

<main>

qui est signalé comme déplacé (score 0,156). Ce n’est pas forcément lui qui provoque le décalage : une modification d’un élément situé avant lui peut le pousser. Définir les dimensions du champ de recherche ne suffit donc pas toujours.

Pour identifier ce qui bouge : dans les outils de développement de Chrome, ouvrez Performance et lancez un enregistrement avec rechargement. Dans la piste « Layout shifts », cliquez sur le losange correspondant au décalage. Vous pourrez examiner les éléments concernés et comparer les images avant/après. Gardez la même largeur de fenêtre que lors du test Lighthouse en mode bureau.

Votre comparaison avec la page Mentions légales est une bonne piste. Pour isoler davantage la cause, sur une copie de test, conservez la barre et son conteneur dans le HTML, mais désactivez seulement son script de recherche. Si le décalage disparaît, regardez les modifications du DOM faites au chargement ; sinon, il faudra examiner aussi le placement CSS du conteneur et de ses voisins.

La documentation Chrome sur la piste Layout shifts.

Une capture de ce détail, avec la largeur de fenêtre utilisée, permettrait d’avancer sans corriger au hasard.

Bonjour.
Ce truc commence à me chauffer.
J'effectue un premier test avec les outils de Chrome (performances) et je trouve que c'est le bandeau de recherche qui pose problème. Je l'enlève temporairement du html (tout en laissant le second bandeau) et effectivement, ça paraît être ça. Je le remets en place, je vide la cache du navigateur et je mesure avec les outils de Chrome. Résultat CLS = 0. Tout ça en ligne, bien sûr.
J'effectue de suite un test avec Lighthouse et je retrouve le décalage !!!
Test avec les outils de Chrome :


Modifié par Bongota (29 Oct 2026 - 17:11)

Bonjour
Une piste en complément : le script de la barre est écrit directement dans la page, juste après le formulaire, au milieu du <main>. Pendant que le navigateur l'exécute, il peut déjà afficher un premier rendu, puis recalculer la grille quand le reste du contenu arrive. Ça pourrait expliquer que le bloc bouge sans que la barre elle-même change de taille.

Comme vous vouliez de toute façon sortir le JS du HTML, ça vaut peut-être le coup d'essayer : mettre ce code dans un fichier à part, chargé avec defer comme votre script.js, puis relancer Lighthouse en mode bureau. Si le décalage disparaît, vous gagnez sur les deux tableaux. Je ne garantis rien, mais le test est rapide.
Modifié par CrayonSEO (30 Oct 2026 - 16:19)

En effet, une IA m'avait déjà signalé que le problème pouvait venir aussi de là, sans proposer de solution. Une bonne occasion pour moi pour virer ce JS du code HTML, qui m'empêche d'ajouter "script-src 'self'; dans le Content-Security-Policy. J'avais déjà essayé ce déport, même avant d'avoir découvert ce décalage. Il y a pourtant un problème, l'array const data = [.......] qui renferme les mots-clés à trouver ne peut pas être déporté. Ou alors je n'ai pas procédé correctement.

Le tableau peut très bien partir dans un fichier à lui, genre data.js, chargé juste avant ton script. Avec defer sur les deux, l'ordre est respecté et ton script trouve data. Sinon tu le mets en JSON et tu le récupères avec fetch.

Merci, c'est exactement ce que je suis en train de mettre en place. Oui, il faudra que ce tableau soit chargé avant le script.
Pour JSON, je n'y avais pas pensé. Même si le problème du décalage n'est pas là, j'aurais au moins éjecté le JS du HTML.
Merci pour tout.