Découvrez comment identifier et corriger les décalages de mise en page.
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 quePerformanceObserver
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
ety
indiquent les coordonnées X et Y. respectivement de l'angle supérieur gauche de l'élément - Les propriétés
width
etheight
indiquent respectivement la largeur et la hauteur. de l'élément. - Les propriétés
top
,right
,bottom
etleft
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 detop
est égale ày
. la valeur debottom
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.
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 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 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 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é.
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.
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.
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.
<ph type="x-smartling-placeholder">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
etheight
qui se chargent après leur "emplacement" s'affiche. - Blocs de texte sans attributs
width
ouheight
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