Déboguer les décalages de mise en page

Découvrez comment identifier et corriger les décalages de mise en page.

La première partie de cet article présente les outils de débogage des décalages de mise en page, tandis que la seconde partie décrit la démarche à suivre pour identifier la cause d'un décalage de mise en page.

Outils

API Layout Instability

L'API Layout Instability est le mécanisme du navigateur qui permet de mesurer et de signaler les changements de mise en page. Tous les outils de débogage des décalages de mise en page, y compris DevTools, sont finalement basés sur l'API Layout Instability. Toutefois, l'utilisation directe de l'API Layout Instability est un outil de débogage puissant en raison de sa flexibilité.

Utilisation

Le même extrait de code qui mesure le décalage de mise en page cumulé (CLS) peut également servir à déboguer les décalages de mise en page. L'extrait de code ci-dessous consigne des informations sur les décalages de mise en page dans la console. L'inspection de ce journal vous fournira des informations sur le moment, l'emplacement et la manière dont un changement de mise en page s'est produit.

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Lorsque vous exécutez ce script, gardez à l'esprit les points suivants:

• L'option buffered: true indique que PerformanceObserver doit vérifier le tampon d'entrée de performances du navigateur pour les entrées de performances créées avant l'initialisation de l'observateur. Par conséquent, PerformanceObserver signalera les décalages de mise en page qui se sont produits avant et après son initialisation. Gardez cela à l'esprit lorsque vous inspectez les journaux de la console. Un excès initial de changements de mise en page peut refléter un arriéré de rapports, plutôt que l'apparition soudaine de nombreux changements de mise en page.
• Pour éviter d'affecter les performances, PerformanceObserver attend que le thread principal soit inactif pour signaler les décalages de mise en page. Par conséquent, en fonction de l'occupation du thread principal, il peut s'écouler un léger délai entre le moment où un changement de mise en page se produit et celui où il est consigné dans la console.
• Ce script ignore les décalages de mise en page qui se sont produits dans les 500 ms suivant l'entrée utilisateur et qui ne sont donc pas pris en compte dans le CLS.

Les informations sur les décalages de mise en page sont signalées à l'aide d'une combinaison de deux API: les interfaces LayoutShift et LayoutShiftAttribution. Chacune de ces interfaces est expliquée plus en détail dans les sections suivantes.

LayoutShift

Chaque décalage de mise en page est enregistré à l'aide de l'interface LayoutShift. Le contenu d'une entrée se présente comme suit:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

L'entrée ci-dessus indique un décalage de mise en page au cours duquel trois éléments DOM ont changé de position. Le score de décalage de mise en page de ce décalage de mise en page particulier était 0.175.

Voici les propriétés d'une instance LayoutShift les plus pertinentes pour déboguer les décalages de mise en page:

Propriété	Description
sources	La propriété sources liste les éléments DOM qui ont été déplacés lors du décalage de la mise en page. Ce tableau peut contenir jusqu'à cinq sources. Si plus de cinq éléments sont affectés par le décalage de mise en page, les cinq sources les plus importantes (mesurées en fonction de l'impact sur la stabilité de la mise en page) sont signalées. Ces informations sont enregistrées à l'aide de l'interface LayoutShiftAttribution (expliquée plus en détail ci-dessous).
value	La propriété value indique le score de décalage de mise en page pour un décalage de mise en page particulier.
hadRecentInput	La propriété hadRecentInput indique si un décalage de mise en page s'est produit dans les 500 millisecondes suivant l'entrée utilisateur.
startTime	La propriété startTime indique quand un décalage de mise en page s'est produit. startTime est indiqué en millisecondes et est mesuré par rapport au moment où le chargement de la page a commencé.
duration	La propriété duration est toujours définie sur 0. Cette propriété est héritée de l'interface PerformanceEntry (l'interface LayoutShift étend l'interface PerformanceEntry). Toutefois, le concept de durée ne s'applique pas aux événements de changement de mise en page. Il est donc défini sur 0. Pour en savoir plus sur l'interface PerformanceEntry, consultez la spécification.

LayoutShiftAttribution

L'interface LayoutShiftAttribution décrit un seul décalage d'un seul élément DOM. Si plusieurs éléments sont déplacés lors d'un changement de mise en page, la propriété sources contient plusieurs entrées.

Par exemple, le code JSON ci-dessous correspond à un décalage de mise en page avec une seule source: le décalage vers le bas de l'élément DOM <div id='banner'> de y: 76 à y:246.

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

La propriété node identifie l'élément HTML qui a été déplacé. Pointer sur cette propriété dans DevTools met en surbrillance l'élément de page correspondant.

Les propriétés previousRect et currentRect indiquent la taille et la position du nœud.

• Les coordonnées x et y indiquent respectivement la coordonnée X et la coordonnée Y de l'angle supérieur gauche de l'élément.
• Les propriétés width et height indiquent respectivement la largeur et la hauteur de l'élément.
• Les propriétés top, right, bottom et left indiquent les valeurs de coordonnées x ou y correspondant au bord donné de l'élément. En d'autres termes, la valeur de top est égale à y, et celle de bottom est égale à y+height.

Si toutes les propriétés de previousRect sont définies sur 0, cela signifie que l'élément est visible. Si toutes les propriétés de currentRect sont définies sur 0, cela signifie que l'élément est hors de vue.

L'un des points les plus importants à comprendre lors de l'interprétation de ces sorties est que les éléments listés comme sources sont ceux qui ont été déplacés lors du changement de mise en page. Toutefois, il est possible que ces éléments ne soient que indirectement liés à la "cause profonde " de l'instabilité de la mise en page. Voici quelques exemples :

Exemple 1

Ce décalage de mise en page serait signalé avec une seule source: l'élément B. Toutefois, la cause première de ce décalage de mise en page est la modification de la taille de l'élément A.

Exemple 2

Dans cet exemple, le décalage de mise en page serait signalé avec deux sources: l'élément A et l'élément B. La cause première de ce décalage de mise en page est la modification de la position de l'élément A.

Exemple 3

Dans cet exemple, le décalage de mise en page serait signalé avec une seule source: l'élément B. Le décalage de mise en page est dû à la modification de la position de l'élément B.

Exemple 4

Bien que l'élément B change de taille, aucun décalage de mise en page n'est observé dans cet exemple.

Découvrez une démonstration de la façon dont les modifications DOM sont signalées par l'API Layout Instability.

Outils de développement

Panneau "Performances"

Le volet Expérience du panneau Performances de DevTools affiche tous les décalages de mise en page qui se produisent au cours d'une trace de performances donnée, même s'ils se produisent dans les 500 ms d'une interaction utilisateur et ne sont donc pas pris en compte dans le CLS. Si vous pointez sur un décalage de mise en page particulier dans le panneau Expérience, l'élément DOM concerné est mis en surbrillance.

Pour en savoir plus sur le décalage de mise en page, cliquez dessus, puis ouvrez le volet Récapitulatif. Les modifications apportées aux dimensions de l'élément sont listées au format [width, height]. Les modifications apportées à la position de l'élément sont listées au format [x,y]. La propriété Had recent input indique si un changement de mise en page s'est produit dans les 500 ms d'une interaction utilisateur.

Pour en savoir plus sur la durée d'un changement de mise en page, ouvrez l'onglet Journal des événements. Vous pouvez également estimer la durée d'un changement de mise en page en consultant la longueur du rectangle rouge correspondant dans le volet Expérience.

Pour en savoir plus sur l'utilisation du panneau Performances, consultez la documentation de référence sur l'analyse des performances.

Mettre en évidence les zones déplacées dans la mise en page

Mettre en surbrillance les zones déplacées dans la mise en page peut être une technique utile pour obtenir un aperçu rapide de l'emplacement et du moment des déplacements de mise en page sur une page.

Pour activer les régions de décalage de mise en page dans les outils de développement, accédez à Settings > More Tools > Rendering > Layout Shift Regions (Paramètres > Autres outils > Rendu > Régions de décalage de mise en page), puis actualisez la page que vous souhaitez déboguer. Les zones de décalage de mise en page sont brièvement mises en surbrillance en violet.

Processus de réflexion pour identifier la cause des décalages de mise en page

Vous pouvez suivre les étapes ci-dessous pour identifier la cause des décalages de mise en page, quel que soit le moment ou le mode de leur apparition. Vous pouvez compléter ces étapes en exécutant Lighthouse. Toutefois, gardez à l'esprit que Lighthouse ne peut identifier que les décalages de mise en page qui se sont produits lors du chargement initial de la page. De plus, Lighthouse ne peut fournir des suggestions que pour certaines causes de décalage de mise en page, par exemple les éléments d'image qui n'ont pas de largeur et de hauteur explicites.

Identifier la cause d'un décalage de mise en page

Les changements de mise en page peuvent être causés par les événements suivants:

• Modifications apportées à la position d'un élément DOM
• Modifications apportées aux dimensions d'un élément DOM
• Insertion ou suppression d'un élément DOM
• Animations qui déclenchent la mise en page

En particulier, l'élément DOM qui précède immédiatement l'élément décalé est celui qui est le plus susceptible d'être impliqué dans le décalage de mise en page. Par conséquent, lorsque vous examinez pourquoi un décalage de mise en page s'est produit, tenez compte des éléments suivants:

• La position ou les dimensions de l'élément précédent ont-elles changé ?
• Un élément DOM a-t-il été inséré ou supprimé avant l'élément décalé ?
• La position de l'élément décalé a-t-elle été modifiée explicitement ?

Si l'élément précédent n'est pas à l'origine du décalage de la mise en page, poursuivez votre recherche en examinant les autres éléments précédents et à proximité.

De plus, la direction et la distance d'un décalage de mise en page peuvent fournir des indications sur l'origine du problème. Par exemple, un décalage important vers le bas indique souvent l'insertion d'un élément DOM, tandis qu'un décalage de mise en page de 1 px ou 2 px indique souvent l'application de styles CSS en conflit ou le chargement et l'application d'une police Web.

Voici quelques-uns des comportements spécifiques qui provoquent le plus souvent des événements de décalage de mise en page:

Modifications de la position d'un élément (qui ne sont pas dues au déplacement d'un autre élément)

Ce type de modification est souvent le résultat de:

• Les feuilles de style chargées tardivement ou qui écrasent des styles précédemment déclarés.
• Effets d'animation et de transition

Modifications apportées aux dimensions d'un élément

Ce type de modification est souvent le résultat de:

• Les feuilles de style chargées tardivement ou qui écrasent des styles précédemment déclarés.
• Images et iframes sans attributs width et height qui se chargent après l'affichage de leur "emplacement".
• Blocs de texte sans attributs width ou height qui échangent des polices après l'affichage du texte.

Insertion ou suppression d'éléments DOM

Cela est souvent dû aux éléments suivants:

• Insertion d'annonces et d'autres éléments intégrés tiers.
• Insertion de bannières, d'alertes et de fenêtres modales.
• Défilement infini et autres modèles d'expérience utilisateur qui chargent du contenu supplémentaire au-dessus du contenu existant

Animations qui déclenchent la mise en page

Certains effets d'animation peuvent déclencher la mise en page. Un exemple courant est lorsque les éléments DOM sont "animés" en incrémentant des propriétés telles que top ou left plutôt qu'en utilisant la propriété transform du CSS. Pour en savoir plus, consultez Créer des animations CSS hautes performances.

Reproduire les décalages de mise en page

Vous ne pouvez pas corriger les décalages de mise en page que vous ne pouvez pas reproduire. L'une des choses les plus simples, mais aussi les plus efficaces, que vous pouvez faire pour mieux évaluer la stabilité de la mise en page de votre site est de prendre cinq à dix minutes pour interagir avec votre site dans le but de déclencher des changements de mise en page. Laissez la console ouverte pendant cette opération et utilisez l'API Instability Layout pour signaler les décalages de mise en page.

Pour les décalages de mise en page difficiles à localiser, envisagez de répéter cet exercice avec différents appareils et vitesses de connexion. En particulier, l'utilisation d'une vitesse de connexion plus lente peut faciliter l'identification des décalages de mise en page. En outre, vous pouvez utiliser une instruction debugger pour faciliter la progression des décalages de mise en page.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Enfin, pour les problèmes de mise en page qui ne sont pas reproductibles en développement, envisagez d'utiliser l'API Layout Instability en conjonction avec l'outil de journalisation du front-end de votre choix pour collecter plus d'informations sur ces problèmes. Consultez l'exemple de code pour savoir comment suivre le plus grand élément décalé sur une page.