Esegui il debug delle variazioni del layout

Scopri come identificare e correggere i cambiamenti di layout.

Katie Hempenius

La prima parte di questo articolo illustra gli strumenti per eseguire il debug delle variazioni di layout. mentre la seconda parte illustra il processo mentale da utilizzare identificando la causa di una variazione del layout.

Utensili

API Layout Instability

L'API Layout Instability è il meccanismo del browser per misurare e segnalare i cambiamenti di layout. Tutti gli strumenti per il debugging delle variazioni del layout, inclusi gli strumenti DevTools, si basano sull'API Layout Instability. Tuttavia, l'utilizzo diretto dell'API Layout Instability è un potente strumento di debug grazie alla sua flessibilità.

Nota: l'API Layout Instability è supportata solo dai browser Chromium. Al momento non è possibile misurare o eseguire il debug delle variazioni di layout nei browser non Chromium.

Utilizzo

Lo stesso snippet di codice misura Cumulative Layout Shift (CLS) viene pubblicato per eseguire il debug delle variazioni del layout. Lo snippet riportato di seguito registra informazioni sui cambiamenti di layout nella console. L'ispezione di questo log ti fornirà informazioni su quando, dove e come si è verificato un cambiamento di layout.

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});

Quando esegui questo script, tieni presente che:

• L'opzione buffered: true indica che PerformanceObserver occorre controllare la voce relativa alle prestazioni del browser buffer per le voci relative alle prestazioni create prima della durante l'inizializzazione. Di conseguenza, PerformanceObserver segnalerà i cambiamenti di layout che si sono verificati sia prima che dopo l'inizializzazione. Conserva in quando esamini i log della console. Un eccesso di variazioni iniziali del layout può rifletterà un arretrato di reporting, piuttosto che l'improvvisa comparsa di numerose variazioni del layout.
• Per evitare di influire sul rendimento, PerformanceObserver attende che il thread principale sia inattivo per segnalare i cambiamenti di layout. Di conseguenza, in base a come è impegnato nel thread principale, potrebbe esserci un leggero ritardo tra il momento in cui un layout e quando viene registrato nella console.
• Questo script ignora le variazioni del layout che si sono verificate entro 500 ms dall'input dell'utente e di conseguenza non vengono prese in considerazione per la metrica CLS.

Le informazioni sui cambiamenti di layout vengono registrate utilizzando una combinazione di due API: le interfacce LayoutShift e LayoutShiftAttribution. Ognuna di queste interfacce è spiegata in modo più dettagliato nel le sezioni seguenti.

LayoutShift

Ogni variazione del layout viene registrata utilizzando l'interfaccia LayoutShift. I contenuti di una voce sono simili al seguente:

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

La voce sopra indica una variazione del layout durante la quale sono stati modificati tre elementi DOM posizione. Il punteggio della variazione del layout di questa particolare variazione è stato 0.175.

Di seguito sono riportate le proprietà di un'istanza LayoutShift più pertinenti per il debugging delle variazioni del layout:

Proprietà	Descrizione
sources	La proprietà sources elenca gli elementi DOM spostati durante il cambiamento di layout. Questo array può contenere fino a cinque origini. Nel caso in cui più di cinque elementi siano interessati dalla variazione del layout, vengono riportate le cinque principali origini (misurate in base all'impatto sulla stabilità del layout) di questa variazione. Queste informazioni vengono riportate utilizzando l'interfaccia LayoutShiftAttribution (spiegata più dettagliatamente di seguito).
value	La proprietà value riporta il punteggio della variazione del layout per una determinata variazione del layout.
hadRecentInput	La proprietà hadRecentInput indica se si è verificata una variazione del layout entro 500 millisecondi dall'input dell'utente.
startTime	La proprietà startTime indica quando si è verificato uno spostamento del layout. Il valore startTime viene indicato in millisecondi e viene misurato in relazione al tempo di avvio del caricamento della pagina.
duration	La proprietà duration verrà sempre impostata su 0. Questa proprietà viene ereditata dall'interfaccia PerformanceEntry (l'interfaccia LayoutShift estende l'interfaccia PerformanceEntry). Tuttavia, il concetto di durata non si applica agli eventi di variazione del layout, pertanto è impostato su 0. Per informazioni sull'interfaccia PerformanceEntry, consulta la specifica.

LayoutShiftAttribution

L'interfaccia LayoutShiftAttribution descrive un singolo turno di un singolo DOM . Se più elementi si spostano durante una variazione del layout, sources contiene più voci.

Ad esempio, il codice JSON seguente corrisponde a una variazione del layout con una sola origine: spostamento verso il basso dell'elemento DOM <div id='banner'> da y: 76 a 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 proprietà node identifica l'elemento HTML spostato. Se passi il mouse sopra questa proprietà in DevTools, viene evidenziato l'elemento di pagina corrispondente.

Le proprietà previousRect e currentRect indicano le dimensioni e la posizione del nodo.

• Le coordinate x e y indicano rispettivamente la coordinata x e la coordinata y dell'angolo in alto a sinistra dell'elemento.
• Le proprietà width e height riportano rispettivamente la larghezza e l'altezza dell'elemento.
• Le proprietà top, right, bottom e left registrano la risposta x o y i valori delle coordinate corrispondenti al bordo specificato dell'elemento. In altre parole, il valore di top è uguale a y; il valore di bottom è uguale a y+height.

Se tutte le proprietà di previousRect sono impostate su 0, significa che l'elemento ha ora visibile. Se tutte le proprietà di currentRect sono impostate su 0, significa che l'elemento non è visibile.

Attenzione : al momento l'API Layout Instability non ignora gli elementi che si sono spostati ma non erano visibili a causa del posizionamento di un altro elemento davanti. Utilizza display: none, visibility: hidden o opacity: 0 per evitare variazioni del layout nei casi in cui devi eseguire il layout su alcuni elementi prima di renderli visibili all'utente.

Uno degli aspetti più importanti da capire quando si interpretano questi output è che gli elementi elencati come sorgenti sono quelli che si sono spostati durante il variazione del layout. Tuttavia, è possibile che questi elementi siano solo indirettamente correlati alla "causa principale" di instabilità del layout. Ecco alcuni esempi.

Esempio n. 1

Questo cambiamento di layout verrà registrato con un'origine: l'elemento B. Tuttavia, la causa principale di questa variazione del layout è la variazione delle dimensioni dell'elemento A.

Esempio 2

Il cambiamento di layout in questo esempio verrebbe registrato con due origini: elemento A e elemento B. La causa principale di questa variazione del layout è il cambiamento di posizione elemento A.

Esempio 3

Il cambiamento di layout in questo esempio verrà registrato con una sola origine: l'elemento B. La modifica della posizione dell'elemento B ha comportato questa variazione del layout.

Esempio 4

Anche se le dimensioni dell'elemento B cambiano, in questo esempio non c'è alcuna variazione del layout.

Guarda una demo di come le modifiche al DOM vengono segnalate dall'API Layout Instability.

DevTools

Riquadro Rendimento

Il riquadro Esperienza del riquadro Prestazioni di DevTools mostra tutte variazioni del layout che si verificano durante un determinato monitoraggio delle prestazioni, anche se si verificano entro 500 ms da un'interazione dell'utente e, pertanto, non vengono conteggiate ai fini della metrica CLS. Se passi il mouse sopra una determinata variazione del layout nel riquadro Esperienza, viene evidenziato l'elemento DOM interessato.

Per visualizzare ulteriori informazioni sul cambiamento di layout, fai clic sul cambiamento di layout e poi apri il riquadro Riepilogo. Le modifiche apportate alle dimensioni dell'elemento vengono elencate utilizzando il formato [width, height]; le modifiche alla posizione dell'elemento vengono elencate utilizzando il formato [x,y]. La proprietà Inserimento recente indica se un la variazione del layout si è verificata entro 500 ms da un'interazione dell'utente.

Per informazioni sulla durata di uno spostamento del layout, apri la scheda Log eventi. La durata di uno spostamento del layout può essere approssimata anche controllando la lunghezza del rettangolo rosso dello spostamento del layout nel riquadro Esperienza.

Nota: la durata di una variazione del layout non influisce sul relativo punteggio.

Per ulteriori informazioni sull'uso del riquadro Prestazioni, consulta la sezione Prestazioni. Analisi Riferimento.

Evidenzia le regioni con variazioni di layout

Evidenziare le regioni con variazioni di layout può essere una tecnica utile per avere un'idea rapida e immediata della posizione e della tempistica delle variazioni di layout che si verificano in una pagina.

Per attivare le regioni di spostamento del layout in DevTools, vai a Impostazioni > Altri strumenti > Rendering > Regioni di spostamento del layout, quindi aggiorna la pagina che vuoi eseguire il debug. Le aree di variazione del layout saranno brevemente evidenziate in viola.

Processo di pensiero per identificare la causa delle variazioni del layout

Puoi utilizzare la procedura riportata di seguito per identificare la causa dei cambiamenti di layout, indipendentemente da quando o come si verificano. Questi passaggi possono essere integrati con l'esecuzione di Lighthouse, ma tieni presente che Lighthouse può identificare solo le variazioni del layout che si sono verificate durante il caricamento iniziale della pagina. Inoltre, Lighthouse può fornire suggerimenti solo per alcune cause di cambiamenti di layout, ad esempio elementi immagine che non hanno larghezza e altezza esplicite.

Identificare la causa di una variazione del layout

Le variazioni del layout possono essere causate dai seguenti eventi:

• Modifiche alla posizione di un elemento DOM
• Modifiche alle dimensioni di un elemento DOM
• Inserimento o rimozione di un elemento DOM
• Animazioni che attivano il layout

In particolare, l'elemento DOM immediatamente prima dell'elemento spostato è l'elemento che ha maggiori probabilità di essere coinvolto nel "causare" variazione del layout. Pertanto, quando per capire perché si è verificata una variazione del layout, considera:

• La posizione o le dimensioni dell'elemento precedente sono cambiate?
• Un elemento DOM è stato inserito o rimosso prima dell'elemento spostato?
• La posizione dell'elemento spostato è stata modificata esplicitamente?

Se l'elemento precedente non ha causato la variazione del layout, continua la ricerca prendendo in considerazione altri elementi precedenti e vicini.

Inoltre, la direzione e la distanza di uno spostamento del layout possono fornire indizi sulla causa principale. Ad esempio, un grande spostamento verso il basso indica spesso l'inserimento di un elemento DOM, mentre uno spostamento del layout di 1 o 2 pixel indica spesso l'applicazione di stili CSS in conflitto o il caricamento e l'applicazione di un carattere web.

In questo esempio, la sostituzione dei caratteri ha causato lo spostamento verso l'alto di cinque pixel degli elementi della pagina.

Questi sono alcuni dei comportamenti specifici che più spesso causano la variazione del layout eventi:

Modifiche alla posizione di un elemento (non dovute allo spostamento di un altro elemento)

Questo tipo di variazione è spesso il risultato di:

• I fogli di stile che vengono caricati tardi o sovrascrivono gli stili dichiarati in precedenza.
• Effetti di animazione e transizione.

Modifiche alle dimensioni di un elemento

Questo tipo di variazione è spesso il risultato di:

• Schede di stile caricate in ritardo o che sovrascrivono gli stili dichiarati in precedenza.
• Immagini e iframe senza attributi width e height che vengono caricati dopo il suo "spazio" è stato eseguito il rendering.
• Blocchi di testo senza attributi width o height che scambiano i caratteri dopo il rendering del testo.

Inserimento o rimozione di elementi DOM

Ciò è spesso dovuto a:

• Inserimento di annunci e altri incorporamenti di terze parti.
• Inserimento di banner, avvisi e modali.
• Scorrimento continuo e altri pattern UX che caricano contenuti aggiuntivi sopra contenuti esistenti.

Animazioni che attivano il layout

Alcuni effetti dell'animazione possono attivarsi layout. Un esempio comune è quando gli elementi DOM vengono "animati" incrementando proprietà come top o left anziché utilizzare la proprietà transform del CSS. Per saperne di più, consulta l'articolo Come creare animazioni CSS ad alte prestazioni.

Riprodurre le variazioni del layout

Non puoi correggere le variazioni del layout che non riesci a riprodurre. Uno dei più semplici azioni più efficaci che puoi adottare per comprendere meglio il layout del tuo sito. stabile richiede 5-10 minuti per interagire con il tuo sito web con l'obiettivo che attivano variazioni del layout. Tieni aperta la console mentre esegui questa operazione e utilizza API Layout Instability per generare report sulle variazioni del layout.

Per variazioni di layout difficili da individuare, considera la possibilità di ripetere questo esercizio con diversi dispositivi e velocità di connessione. In particolare, l'utilizzo di una velocità di connessione più lenta può semplificare l'identificazione dei cambiamenti di layout. Inoltre, puoi utilizzare un'istruzione debugger per semplificare la visualizzazione dei passaggi del layout senza interruzioni.

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});

Infine, per i problemi di layout non riproducibili in fase di sviluppo, valuta la possibilità di utilizzare l'API Layout Instability in combinazione con lo strumento di logging front-end di tua scelta per raccogliere ulteriori informazioni su questi problemi. Consulta l'esempio di codice su come monitorare l'elemento più grande spostato in una pagina.