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 mécanisme du navigateur pour mesurer et créer des rapports sur les décalages 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 puissant outil de débogage en raison de sa flexibilité.

Remarque : L'API Layout Instability n'est compatible qu'avec les navigateurs Chromium. Il n'existe actuellement aucun moyen de mesurer ni de déboguer les décalages de mise en page dans les navigateurs autres que Chromium.

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 ci-dessous enregistre des informations sur la mise en page passe à 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});

Lors de l'exécution de 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 indique la mise en page des changements qui se sont produits avant et après son initialisation. Conserver dans à l'esprit lorsque vous inspectez les journaux de la console. Une petite quantité initiale de décalages de mise en page peut refléter un arriéré dans la création de rapports, plutôt que la survenance soudaine de nombreuses décalages de mise en page.
• Pour éviter de nuire aux performances, le PerformanceObserver attend que l'instance principale Le thread est 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 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 :

Propriété	Description
sources	La propriété sources liste les éléments DOM qui ont été déplacés lors du décalage de 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 à quel moment un décalage de mise en page s'est produit. startTime est indiqué en millisecondes et mesuré par rapport à l'heure de lancement du chargement de la page.
duration	La propriété duration sera 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 décalage de mise en page. Il est donc défini sur 0. Pour en savoir plus sur l'interface PerformanceEntry, reportez-vous à 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 : déplacement vers le bas de l'élément DOM <div id='banner'> de y: 76 vers 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 le 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 la valeur x ou y les valeurs des coordonnées 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.

Attention : Actuellement, l'API Layout Instability n'ignore pas les éléments qui se sont décalés, mais qui n'étaient pas visibles en raison du positionnement d'un autre élément devant eux. Utilisez display: none, visibility: hidden ou opacity: 0 pour éviter les décalages de mise en page dans les cas où vous devez exécuter la mise en page sur certains éléments avant de les rendre visibles à l'utilisateur.

L'une des choses les plus importantes à comprendre lors de l'interprétation de ces sorties les éléments répertoriés en tant que sources sont les éléments qui ont été décalés au cours de la décalage 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 racine de ce décalage de mise en page est le changement de 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 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. La modification de la position de l'élément B a entraîné ce décalage de mise en page.

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. Pointer sur un décalage de mise en page particulier dans les points forts du panneau Expérience l'élément DOM concerné.

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 décalage 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.

Remarque : La durée d'un décalage de mise en page n'a aucune incidence sur son score.

Pour en savoir plus sur l'utilisation du panneau Performances, consultez Performances Analyse Référence.

Mettre en surbrillance les zones de décalage de mise en page

Mettre en évidence les régions de décalage de mise en page peut être une technique utile pour obtenir une disposer d'un aperçu rapide de l'emplacement et du moment des décalages de mise en page ; se produisant 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, quel que soit le moment ou le mode de leur apparition. Ces étapes peuvent être ainsi que de l'exécution de Lighthouse. Toutefois, gardez à l'esprit que Lighthouse peut identifier uniquement 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 dont la largeur et la hauteur ne sont pas 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 déclenchant la mise en page

En particulier, l'élément DOM qui précède immédiatement l'élément décalé est de l'élément le plus susceptible d'être impliqué dans décalage de mise en page. Ainsi, lorsque pour savoir pourquoi un décalage de mise en page s'est produit, pensez à:

• 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é explicitement modifiée ?

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é.

En outre, 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.

<ph type="x-smartling-placeholder">

</ph> Dans cet exemple, le changement de police a entraîné un décalage de cinq pixels des éléments de la page vers le haut.

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 permutent les polices après s'affiche.

Insertion ou suppression d'éléments DOM

Cela se produit souvent pour les raisons suivantes:

• 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 déclenchant 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. Gardez la console ouverte et utilisez le L'API Layout Instability permet de générer des rapports sur les décalages de mise en page.

Pour les décalages de mise en page difficiles à localiser, pensez à 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. De plus, vous pouvez utiliser une instruction debugger pour faciliter la présentation de la mise en page changements de direction.

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 pendant le développement, en utilisant l'API Layout Instability avec l'outil de journalisation d'interface de votre choix pour recueillir davantage d'informations sur ces problèmes. Départ Exemple de code pour suivre le plus grand élément décalé sur une page