Déboguer les décalages de mise en page

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

Katie Hempenius

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 permettant de mesurer les décalages de mise en page et de générer des rapports les concernant. 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 rechercher les entrées de performances créées avant l'initialisation de l'observateur dans le tampon d'entrée des performances du navigateur. 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. Une surabondance initiale de décalages de mise en page peut refléter un retard dans la création de rapports, plutôt que l'occurrence soudaine de nombreux décalages de mise en page.
• Pour éviter de nuire aux 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 ne sont donc pas comptabilisés 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 signalé via 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 ce décalage de mise en page était de 0.175.

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

LayoutShiftAttribution

L'interface LayoutShiftAttribution décrit un décalage unique 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 source: le déplacement 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 les coordonnées X et Y, respectivement 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 des coordonnées X ou Y correspondant au bord donné de l'élément. En d'autres termes, la valeur de top est égale à y. La valeur 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 n'est plus visible.

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. Cependant, la cause racine 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 racine de ce décalage de mise en page est le changement de 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, il n'y a pas de décalage de mise en page dans cet exemple.

Regardez une démonstration montrant comment 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. Lorsque vous passez la souris sur un décalage de mise en page particulier dans le panneau Experience (Expérience), l'élément DOM concerné est mis en évidence.

Pour afficher plus d'informations 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 décalage 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 Performance, consultez la documentation de référence sur l'analyse des performances.

Mettre en surbrillance les zones de décalage de 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 du 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, quels que soient le moment ou le mode de leur apparition. Ces étapes peuvent être complétées par l'exécution de 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. En outre, Lighthouse ne peut fournir des suggestions que pour certaines causes de décalages de mise en page (par exemple, pour les éléments d'image qui n'ont pas de largeur ni de hauteur explicites).

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

Les événements suivants peuvent entraîner des décalages de mise en page:

• 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 l'élément le plus susceptible d'être impliqué dans un décalage de mise en page "causant" un décalage. Ainsi, lorsque vous cherchez à comprendre 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 mise en page, poursuivez votre recherche en prenant en compte les autres éléments précédents et proches.

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 grand décalage 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 mouvement d'un autre élément)

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

• Les feuilles de style chargées tardivement ou écrasant les styles déclarés précédemment
• Animations et effets de transition.

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

Ce type de modification est souvent dû aux éléments suivants:

• Les feuilles de style chargées tardivement ou qui écrasent des styles précédemment déclarés.
• Images et cadres iFrame 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 intégrations tierces
• 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 déclenchant la mise en page

Certains effets d'animation peuvent déclencher la mise en page. C'est par exemple le cas lorsque les éléments DOM sont "animés" en incrémentant des propriétés telles que top ou left au lieu d'utiliser la propriété CSS transform. Pour en savoir plus, consultez Créer des animations CSS hautes performances.

Reproduire des 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 les plus efficaces à faire pour avoir une meilleure idée de la stabilité de la mise en page de votre site est de prendre 5 à 10 minutes pour interagir avec votre site en déclenchant des décalages de mise en page. Gardez la console ouverte pendant cette opération et utilisez l'API d'instabilité de mise en page pour générer des rapports sur 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 l'exécution des changements 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.