Uno strumento molto efficace per visualizzare con precisione da dove proviene il Cumulative Layout Shift (CLS) e migliorare il punteggio della tua pagina, ottimizzando così l'esperienza del visitatore.
Genera una GIF animata che mostra i movimenti degli elementi durante il caricamento della pagina.
In alcuni casi, molto più efficace di un diagramma di carico a cascata.
| Analisi cumulativa dello spostamento del layout | Faro | WebPageTest | Strumenti per sviluppatori di Chrome |
|---|---|---|---|
| Output: Genera una GIF che mostra quali elementi si muovono nella finestra di visualizzazione e restituisce il punteggio CLS. Nelle pagine con molti movimenti verticali può essere difficile distinguere quali elementi si sono spostati. | Output: Il report elenca CLS tra First Contentful Paint, Speed Index, Total Blocking Time e Largest Contentful Paint. L'output predefinito è un report HTML, ma è disponibile anche in formato JSON tramite un'apposita opzione. | Output: La striscia di filmati mostra i fotogrammi chiave del caricamento e i grafici a cascata presentano una linea rossa sincronizzata con la striscia di filmati. La documentazione definisce CLS come la misura di quanto si sposta il layout all'interno della finestra di visualizzazione durante il caricamento della pagina. | Output: La traccia degli spostamenti del layout nel pannello Prestazioni mostra gli spostamenti come rombi viola, raggruppati in cluster. Passando il mouse sopra l'elemento, questo viene evidenziato nella finestra di visualizzazione e la scheda Riepilogo fornisce tempi, punteggi, elementi interessati e potenziali cause. |
| Condizioni di prova: La visualizzazione su desktop è fissa a 1920 x 1080. La versione mobile utilizza il profilo Lighthouse Nexus 5X e la CPU e la rete vengono limitate per simulare una buona connessione 3G. | Condizioni di prova: Funziona su una versione locale di Chrome, tramite gli Strumenti per sviluppatori, la riga di comando, un modulo Node o PageSpeed Insights. Per l'esecuzione da riga di comando è necessario Node 22 o versioni successive. | Condizioni di prova: I test vengono eseguiti su browser reali da diverse località in tutto il mondo, in condizioni di rete personalizzabili. Chrome fornisce il maggior numero di informazioni. | |
| Definizione di CLS: La versione 1.2.0 utilizza la metrica della finestra di sessione massima. La limitazione della velocità viene applicata durante il test. | Definizione di CLS: Strumenti di laboratorio come Lighthouse rilevano le variazioni solo durante il caricamento della pagina, quindi i valori potrebbero essere inferiori a quelli riscontrati dagli utenti reali. | Definizione di CLS: Si applica la stessa limitazione di laboratorio. Il punteggio è il prodotto della frazione di impatto e della frazione di distanza, e l'obiettivo è 0,1 o inferiore. | Definizione di CLS: Ogni turno ha un proprio punteggio nella scheda Riepilogo. CLS raggruppa i turni in finestre di sessione fino a 5 secondi, con intervalli inferiori a 1 secondo. |
| Apertura e automazione: È possibile installare una versione da riga di comando tramite npm (layout-shift-gif). Accetta opzioni per URL, dispositivo e output, un file cookie opzionale e supporta certificati HTTPS autofirmati. La pagina richiede donazioni facoltative tramite Ko-fi. | Apertura e automazione: Lighthouse è rilasciato sotto licenza Apache-2.0. Può essere eseguito in un ambiente di integrazione continua (CI) tramite Lighthouse CI e come modulo Node. | Apertura e automazione: Il repository ha un ramo master sotto Polyform Shield 1.0.0 e un ramo apache sotto Apache 2.0. Documenta l'esecuzione di una propria istanza e di un'API REST. La maggior parte degli esperimenti richiede WebPageTest Pro. |
Argomenti trattati: Cumulative Layout Shift (CLS), page score, visitor experience, animated GIF, element movement, loading optimization, user interface, web performance, visual analysis, loading diagram, web metrics, ISO 9241, ISO/IEC 25010, ISO 25012, ISO 25000 e ISO 9241-11.
Suggerisci il tuo strumento online preferito:
Conosci un sito web migliore, complementare o sostitutivo di quello elencato sopra?
> Suggeriscilo qui <
Le immagini a grandezza naturale e i download sono disponibili, gratuitamente al 100%, solo per gli utenti registrati.
> Login <
