Cette page a été traduite par l'API Cloud Translation.

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 traite des outils de débogage des décalages de mise en page, tandis que la deuxième partie traite du processus de réflexion à utiliser lorsque identifiant 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 pour déboguer les décalages de mise en page, y compris les outils de développement, reposent en fin de compte sur API Layout Instability. Toutefois, l'utilisation directe de l'API Layout Instability puissant outil de débogage en raison de sa flexibilité.

Utilisation

Le même extrait de code les mesures Cumulative Layout Shift (CLS) peuvent aussi pour 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 quand, où et comment un décalage 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 l'historique des performances du navigateur tampon pour les entrées liées aux performances créées avant l'appel l'initialisation. 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, selon la façon dont est occupé par le thread principal, il peut y avoir un léger décalage entre le moment où une mise en page se produit et lorsqu’il est enregistré 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 transmises à l'aide d'une combinaison de deux API : LayoutShift et LayoutShiftAttribution de commande. Chacune de ces interfaces est expliquée plus en détail dans la dans les sections suivantes.

LayoutShift

Chaque décalage de mise en page est signalé via l'interface LayoutShift. Le contenu de 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 été modifiés. la position de votre annonce. Le score de ce décalage de mise en page était de 0.175.

Il s'agit des propriétés d'une instance LayoutShift les plus pertinentes pour débogage des 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 transmises à l'aide de l'interface LayoutShiftAttribution (décrite plus en détail ci-dessous).
`value`	La propriété `value` indique le score de décalage de mise en page d'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 décalage unique d'un seul DOM . Si plusieurs éléments sont décalés lors d'un décalage de mise en page, 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 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écalé. Pointez dessus dans les outils de développement 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. Dans d'autres mots, 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 a dans le champ de vision. Si toutes les propriétés de currentRect sont définies sur 0, cela signifie indiquant que l'élément n'est plus visible.

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. Cependant, il est possible que ces éléments ne soient qu'indirectement liés à la « cause racine » d'instabilité de 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 illustrant un décalage de mise en page causé par un changement des dimensions de l'élément

Exemple 2

Dans cet exemple, le décalage de mise en page serait signalé par 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 illustrant un décalage de mise en page causé par un changement de position de l'élément

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 illustrant un décalage de mise en page causé par un changement de position de l'élément

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.

Exemple montrant qu'un élément change de taille, mais ne provoque pas de décalage de mise en page

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 Experience (Expérience) du panneau Performance (Performances) des outils de développement affiche toutes Décalages de mise en page qui se produisent pendant une trace de performances donnée, même s'ils se produisent dans les 500 ms suivant une interaction utilisateur. Par conséquent, elles ne sont pas comptabilisées 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é.

Capture d'écran d'un décalage de mise en page affiché dans le panneau DevTools Network

Pour en savoir plus sur le décalage de mise en page, cliquez dessus, puis ouvrez le panneau 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 répertoriées au format [x,y]. La propriété Had recent input (Entrée récente) indique si une un décalage de mise en page s'est produit dans les 500 ms suivant une interaction utilisateur.

Capture d'écran de la page "Summary" (Résumé) des outils de développement pour un décalage de mise en page

Pour en savoir plus sur la durée d'un décalage de mise en page, ouvrez l'onglet Journal des événements. La durée d'un décalage de mise en page peut également être estimée en consultant les Volet Experience (Expérience) pour la longueur du rectangle rouge de décalage de mise en page.

Capture d'écran du journal des événements des outils de développement pour un décalage de mise en page

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 avec décalage de mise en page dans les outils de développement, accédez à Settings > Plus d'outils > Rendu > Layout Shift Regions, 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

Suivez les étapes ci-dessous pour identifier la cause des décalages de mise en page peu importe quand ou comment le décalage de mise en page se produit. 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. Dans De plus, Lighthouse ne peut fournir des suggestions que pour certaines causes de mise en page décalage (par exemple, des é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 mise en page, poursuivez votre recherche en en tenant compte d'autres éléments précédents et proches.

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 grand glissement à la baisse indique souvent l'insertion d'un élément DOM, alors qu'un décalage de mise en page de 1 ou 2 pixels indique souvent l'application de styles CSS conflictuels, ou le chargement et l'application d'un police Web.

Schéma illustrant un décalage de mise en page causé par un changement de police — </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 un décalage de mise en page événements:

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 dû aux éléments suivants:

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 écrasant les styles déclarés précédemment
Images et cadres iFrame sans attributs width et height qui se chargent après leur "emplacement" s'affiche.
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 intégrations tierces
Insertion de bannières, d'alertes et de modales
Défilement infini et autres modèles d'expérience utilisateur qui chargent le contenu supplémentaire ci-dessus des contenus existants.

Animations déclenchant la mise en page

Certains effets d'animation déclenchent mise en page. Une approche par exemple, lorsque les éléments DOM sont "animés" en incrémentant les propriétés comme top ou left, plutôt que d'utiliser des CSS transform . Découvrez comment créer des animations CSS hautes performances. pour en savoir plus.

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 plus simples, ce que vous pouvez faire le plus efficacement pour avoir une meilleure idée de la mise en page de votre site la stabilité est de 5 à 10 minutes pour interagir avec votre site avec l'objectif déclenchant des décalages 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'un la vitesse de connexion 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