Esegui il debug delle variazioni del layout

Scopri come identificare e correggere le variazioni del layout.

Katie Hempenius

La prima parte di questo articolo illustra gli strumenti per il debug dei cambiamenti di layout, mentre la seconda parte illustra la procedura da seguire per identificare la causa di un cambiamento di 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 debug delle variazioni del layout, incluso DevTools, si basano sull'API Layout Instability. Tuttavia, l'utilizzo diretto dell'API Layout Instability è un potente strumento di debug grazie alla sua flessibilità.

Utilizzo

Anche lo stesso snippet di codice che misura la Cumulative Layout Shift (CLS) può essere utilizzato 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 deve controllare nel buffer delle voci delle prestazioni del browser le voci relative alle prestazioni create prima dell'inizializzazione dell'osservatore. Di conseguenza, PerformanceObserver registrerà i cambiamenti di layout che si sono verificati sia prima che dopo l'inizializzazione. Tienilo presente quando esamini i log della console. Un eccesso di variazioni del layout iniziale può riflettere un arretrato di reporting piuttosto che il verificarsi improvviso 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, a seconda del carico del thread principale, potrebbe verificarsi un lieve ritardo tra il momento in cui si verifica un cambiamento di layout e la sua registrazione nella console.
• Questo script ignora le variazioni del layout che si sono verificate entro 500 ms dall'input dell'utente e pertanto non viene conteggiato ai fini della metrica CLS.

Le informazioni sulle variazioni del layout vengono segnalate utilizzando una combinazione di due API: le interfacce LayoutShift e LayoutShiftAttribution. Ognuna di queste interfacce è spiegata in modo più dettagliato nelle 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 precedente indica una variazione del layout durante la quale tre elementi DOM hanno cambiato posizione. Il punteggio della variazione del layout di questa particolare variazione del layout è stato 0.175.

Queste sono le proprietà di un'istanza LayoutShift più pertinenti per il debug delle variazioni del layout:

LayoutShiftAttribution

L'interfaccia LayoutShiftAttribution descrive un singolo spostamento di un singolo elemento DOM. Se più elementi si spostano durante uno spostamento del layout, la proprietà sources contiene più voci.

Ad esempio, il codice JSON seguente corrisponde a una variazione del layout con una sola origine: lo 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 della pagina corrispondente.

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

• Le coordinate x e y riportano 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 i valori delle coordinate x o y 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 è stato visualizzato. Se tutte le proprietà di currentRect sono impostate su 0, significa che l'elemento non è visibile.

Uno degli aspetti più importanti da comprendere durante l'interpretazione di questi output è che gli elementi elencati come origini sono quelli che sono stati spostati durante il cambio di layout. Tuttavia, è possibile che questi elementi siano correlati solo indirettamente alla "causa principale" dell'instabilità del layout. Ecco alcuni esempi.

Esempio 1

Questa variazione del layout verrebbe registrata con una sola 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 è la modifica della posizione dell'elemento A.

Esempio n. 3

La variazione del layout in questo esempio verrebbe registrata con una sola sorgente: l'elemento B. La modifica della posizione dell'elemento B ha comportato questo cambiamento di layout.

Esempio 4

Sebbene l'elemento B cambi dimensioni, in questo esempio non si verifica 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 Rendimento di DevTools mostra tutte le variazioni del layout che si verificano durante una determinata traccia 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 su una determinata variazione del layout nel riquadro Esperienza, viene evidenziato l'elemento DOM interessato.

Per visualizzare ulteriori informazioni sulla variazione del layout, fai clic sulla variazione del layout e poi apri il riquadro a scomparsa Riepilogo. Le modifiche alle dimensioni dell'elemento sono elencate utilizzando il formato [width, height]; le modifiche alla posizione dell'elemento sono elencate utilizzando il formato [x,y]. La proprietà Had recente input indica se si è verificata una variazione del layout 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 una variazione del layout può essere approssimata anche controllando nel riquadro Esperienza la lunghezza del rettangolo rosso con la variazione del layout.

Per scoprire di più sull'utilizzo del riquadro Rendimento, consulta Riferimento per l'analisi del rendimento.

Evidenzia le regioni con variazioni del 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 Variazione del layout in DevTools, vai a Impostazioni > Altri strumenti > Rendering > Regioni con variazioni del layout, quindi aggiorna la pagina di cui vuoi eseguire il debug. Le aree con variazioni di layout verranno evidenziate brevemente in viola.

Processo di pensiero per identificare la causa delle variazioni del layout

Puoi utilizzare i passaggi riportati di seguito per identificare la causa delle variazioni del layout indipendentemente da quando o come si verifica. 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 variazioni del layout, ad esempio elementi di immagine con larghezza e altezza non 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 che precede l'elemento spostato è l'elemento con maggiori probabilità di essere coinvolto nella "causa" della variazione del layout. Pertanto, quando esamini il motivo per cui si è verificata una variazione del layout, considera i seguenti aspetti:

• 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, uno spostamento verso il basso elevato indica spesso l'inserimento di un elemento DOM, mentre una variazione del layout di 1 o 2 px indica spesso l'applicazione di stili CSS in conflitto o il caricamento e l'applicazione di un carattere web.

Di seguito sono riportati alcuni dei comportamenti specifici che più spesso causano gli eventi di variazione del layout:

Modifiche alla posizione di un elemento (non dovute al movimento di un altro elemento)

Questo tipo di modifica spesso è il risultato di:

• CSS caricati in ritardo o che sovrascrivono gli stili dichiarati in precedenza.
• Effetti di animazione e transizione.

Modifiche alle dimensioni di un elemento

Questo tipo di modifica spesso è il risultato di:

• I fogli di stile che vengono caricati tardi o sovrascrivono gli stili dichiarati in precedenza.
• Immagini e iframe senza attributi width e height che vengono caricati dopo la visualizzazione della relativa "area".
• Blocchi di testo senza attributi width o height che si scambiano i caratteri dopo il rendering del testo.

L'inserimento o la rimozione di elementi DOM

Spesso la causa è:

• 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 quelli esistenti.

Animazioni che attivano il layout

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

Riprodurre le variazioni del layout

Non puoi correggere i cambiamenti di layout che non riesci a riprodurre. Una delle operazioni più semplici, ma più efficaci, che puoi svolgere per comprendere meglio la stabilità del layout del tuo sito è quella di impiegare 5-10 minuti per interagire con il tuo sito con l'obiettivo che attiva le variazioni del layout. Tieni aperta la console durante questa operazione e utilizza l'API Layout Instability per generare report sulle variazioni del layout.

Per variazioni di layout difficili da individuare, prova a ripetere questo esercizio con dispositivi e velocità di connessione diversi. 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 il passaggio tra i cambiamenti di layout.

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 che non sono riproducibili in fase di sviluppo, valuta la possibilità di utilizzare l'API Layout Instability insieme allo strumento di logging front-end che preferisci per raccogliere ulteriori informazioni su questi problemi. Consulta l'esempio di codice su come monitorare l'elemento più grande spostato in una pagina.