Cos’\u00c8 il Cumulative Layout Shift (CLS)?<\/h2>\n
Il CLS, che in italiano potremmo tradurre come spostamento cumulativo del layout, \u00e8 la misura di quanto una pagina del vostro sito si sposta inaspettatamente durante la visita di un utente, come misurato dalla Layout Instability API<\/a>, un’API standardizzata per il test delle prestazioni<\/a>.<\/p>\n Cumulative Layout Shift (CLS) \u00e8 una delle tre metriche dell’iniziativa Core Web Vitals di Google<\/a>, insieme a Largest Contentful Paint (LCP) e First Input Delay (FID).<\/p>\n Per capire il significato di Cumulative Layout Shift, \u00e8 importante parlare del layout shift in generale.<\/p>\n Un cambio di layout si verifica quando i contenuti del vostro sito si “spostano” inaspettatamente.<\/p>\n O, in termini tecnici, \u00e8 quando qualsiasi elemento visibile nel viewport cambia la sua posizione iniziale tra due fotogrammi.<\/p>\n Un esempio comune \u00e8 quello in cui state leggendo un blocco di testo… ma all’improvviso appare un annuncio che si carica in ritardo e spinge il contenuto del testo verso il basso della pagina.<\/p>\n Ecco un altro esempio di immagine di Google che mostra questo fenomeno:<\/p>\n Quasi sicuramente vi siete imbattuti nei cambiamenti di layout durante la navigazione sul web, anche se non li conoscete con questo nome.<\/p>\n Una singola visita potrebbe avere pi\u00f9 eventi di cambio di layout separati. Per questo motivo, la metrica Cumulative Layout Shift mira a catturare l’intero quadro misurando la quantit\u00e0 totale di spostamenti di layout inattesi in una pagina*.<\/p>\n *La misura esatta si \u00e8 fatta un po’ pi\u00f9 tecnica dopo alcune modifiche apportate da Google, ma l’idea di base \u00e8 sempre quella. Se vi interessa conoscere i dettagli pi\u00f9 precisi, potete <\/em>leggere qui<\/em><\/a>.<\/em><\/p>\n\n Il motivo principale per cui il Cumulative Layout Shift \u00e8 negativo \u00e8 che crea una cattiva esperienza utente<\/a> sul vostro sito.<\/p>\n Nel migliore dei casi, risulta leggermente fastidioso per le persone che visitano il vostro sito. Nel peggiore dei casi, pu\u00f2 indurre le persone a compiere azioni che non desiderano.<\/p>\n Per esempio, immaginate che un utente voglia fare clic su “Annulla” ma clicchi accidentalmente su “Conferma” perch\u00e9 uno spostamento del layout ha spostato la posizione dei pulsanti proprio mentre la persona stava facendo clic.<\/p>\n Oltre a influenzare l’esperienza dei vostri visitatori umani, un cattivo punteggio di Cumulative Layout Shift pu\u00f2 anche influire sul posizionamento del vostro sito nei motori di ricerca<\/a>.<\/p>\n A partire dall’aggiornamento Page Experience di Google<\/a> (terminato nell’agosto 2021), Google usa i Core Web Vitals come uno dei suoi fattori di ranking SEO. Poich\u00e9 il Cumulative Layout Shift fa parte del Core Web Vitals, ci\u00f2 significa che pu\u00f2 influire sulle prestazioni di ricerca del vostro sito<\/a>.<\/p>\n In pratica, la correzione di eventuali problemi di Cumulative Layout Shift sul vostro sito contribuir\u00e0 a migliorarlo sia per le persone che lo visitano che per i motori di ricerca.<\/p>\n Allora, quali potrebbero essere le cause del Cumulative Layout Shift? Vediamo di approfondire l’argomento.<\/p>\n Ecco un rapido riepilogo delle cause pi\u00f9 comuni del Cumulative Layout Shift:<\/p>\n Approfondiremo questi problemi pi\u00f9 avanti in questo articolo, mostrandovi come risolvere ogni problema comune.<\/p>\n Esistono diversi strumenti che potete usare per testare il punteggio del Layout Shift Cumulativo del vostro sito.<\/p>\n Il Cumulative Layout Shift fa parte dell’audit di Lighthouse, quindi qualsiasi strumento di test della velocit\u00e0 che usa Lighthouse come parte del suo audit includer\u00e0 i dati CLS: questo include PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools e molti altri strumenti di test popolari<\/a>.<\/p>\n Ecco alcuni dei principali strumenti di test Cumulative Layout Shift che si distinguono per la loro utilit\u00e0.<\/p>\n PageSpeed Insights<\/a> \u00e8 uno degli strumenti pi\u00f9 utili per valutare lo stato del cambio di layout del vostro sito perch\u00e9 vi fornisce due fonti di dati:<\/p>\n Potete anche visualizzare i dati per desktop e mobile passando da una scheda all’altra.<\/p>\n Nota:<\/strong> I dati del laboratorio sono in grado di misurare solo gli spostamenti di layout che si verificano durante il caricamento della pagina, quindi i risultati per gli utenti reali potrebbero essere leggermente pi\u00f9 alti se gli spostamenti di layout avvengono dopo il caricamento della pagina.<\/p>\n I Developer Tools di Chrome offrono alcune risorse utili<\/a> sia per misurare il CLS che per eseguire il debug dei singoli spostamenti di layout che si verificano sul vostro sito.<\/p>\n Innanzitutto, potete eseguire una verifica Lighthouse per vedere il punteggio CLS del vostro sito. Ecco come fare:<\/p>\n Dopo una breve attesa, dovreste visualizzare la normale interfaccia di verifica di Lighthouse (che assomiglia molto a PageSpeed Insights).<\/p>\n Tuttavia, i Developer Tools di Chrome vi permettono anche di scavare pi\u00f9 a fondo nel CLS con l’analisi del Rendering<\/strong>. In questo modo potrete evidenziare le singole aree di spostamento del layout nel vostro sito, aiutandovi a eseguire il debug.<\/p>\n Ecco come fare:<\/p>\n A questo punto, ricaricate la pagina che volete testare e Chrome dovrebbe evidenziare le aree con spostamenti di layout con un riquadro blu. Queste evidenziazioni appariranno sulla pagina reale durante il caricamento del contenuto e scompariranno al termine dello spostamento.<\/p>\n Se le evidenziazioni sono troppo rapide per essere seguite, potete rallentare il sito e osservarne il caricamento fotogramma per fotogramma utilizzando la scheda Performance<\/strong>.<\/p>\n Sebbene Google Search Console<\/a> non vi permetta di eseguire test di laboratorio per determinare il Cumulative Layout Shift, vi offre un modo semplice per vedere i problemi con lo spostamento del layout cumulativo sul vostro sito, come misurato dal rapporto Chrome UX.<\/p>\n Il vantaggio di usare Google Search Console<\/a> rispetto ad altri strumenti \u00e8 che vi permette di vedere rapidamente i problemi su tutto il vostro sito, invece di testare pagina per pagina.<\/p>\n Ecco come visualizzare i potenziali problemi sul vostro sito:<\/p>\n Se applicabile, Google evidenzier\u00e0 gli URL<\/a> con punteggi problematici di Cumulative Layout Shift.<\/p>\n Nota:<\/strong> I dati vengono visualizzati solo se il vostro sito ha un traffico mensile sufficiente per essere incluso nel rapporto Chrome UX.<\/p>\n Come suggerisce il nome, Layout Shift GIF Generator<\/a> genera una GIF degli spostamenti del layout del vostro sito in modo da poter vedere esattamente quali sono i contenuti che causano problemi. Vi fornir\u00e0 anche il vostro punteggio, nonostante questo non sia l’obiettivo principale dello strumento.<\/p>\n Tutto ci\u00f2 che dovete fare \u00e8 aggiungere l’URL che volete testare e scegliere tra mobile e desktop. Quindi, verr\u00e0 generata una GIF del vostro sito con evidenziazioni verdi che mostrano gli elementi esatti che si stanno spostando.<\/p>\n Vedendo quali elementi si spostano e contribuiscono al punteggio del Cumulative Layout Shift, potete sapere esattamente dove concentrarvi per migliorare il punteggio del vostro sito.<\/p>\n Secondo l’iniziativa Core Web Vitals di Google, un buon punteggio di Cumulative Layout Shift \u00e8 di 0,1 o meno<\/strong>.<\/p>\n Se il vostro punteggio di Cumulative Layout Shift \u00e8 compreso tra 0,1 e 0,25, Google lo definisce “Da migliorare”.<\/p>\n Se il punteggio di Cumulative Layout Shift \u00e8 superiore a 0,25, Google lo definisce “Scarso”.<\/p>\n Ecco un grafico tratto dal sito web Core Web Vitals di Google che mostra visivamente questi punteggi:<\/p>\n Ora che avete capito cosa succede con il Cumulative Layout Shift, \u00e8 il momento di passare ad alcuni consigli pratici su come risolvere il Cumulative Layout Shift in WordPress.<\/p>\n Anche se questi consigli provengono da WordPress, sono tutti universali e possono essere applicati ad altri strumenti di costruzione di siti web.<\/p>\n Una delle cause pi\u00f9 comuni dello spostamento del layout \u00e8 il caricamento tardivo delle immagini che spostano il contenuto, soprattutto se usate tattiche come il lazy-loading<\/a>.<\/p>\n Per evitare questo problema, potete specificare le dimensioni di un’immagine nel codice quando la incorporate. In questo modo, il browser del visitatore riserver\u00e0 quello spazio anche se l’immagine non \u00e8 ancora stata caricata, il che significa che l’immagine non dovr\u00e0 spostare il contenuto.<\/p>\n Se incorporate le immagini tramite l’editor di WordPress (l’editor di blocchi Gutenberg<\/a> o il classico editor TinyMCE<\/a>), non c’\u00e8 bisogno di specificare manualmente le dimensioni dell’immagine perch\u00e9 WordPress lo far\u00e0 automaticamente per voi.<\/p>\n Lo stesso vale per i pi\u00f9 diffusi plugin di page builder<\/a> come Elementor, Divi<\/a>, Beaver Builder e cos\u00ec via.<\/p>\n Tuttavia, possono sorgere dei problemi se state incorporando manualmente delle immagini utilizzando il vostro codice, cosa che potrebbe accadere se state aggiungendo del contenuto a un plugin, modificando i file del template del vostro tema child<\/a> e cos\u00ec via.<\/p>\n Il codice HTML per l’incorporamento di un’immagine di base \u00e8 simile a questo:<\/p>\n Per specificare le sue dimensioni, potete aggiungere i parametri di altezza<\/strong> e larghezza<\/strong>. Ecco un esempio di come potrebbe apparire per un’immagine di 600x300px:<\/p>\n Molti plugin per le prestazioni di WordPress<\/a> includono anche funzioni per automatizzare questa operazione, come ad esempio le funzioni Aggiungi le dimensioni delle immagini mancanti<\/strong> di WP Rocket o Perfmatters.<\/p>\n Come per le immagini, anche per i video, gli iframe e gli altri incorporamenti dovrete specificare le dimensioni.<\/p>\n Gli strumenti di incorporamento della maggior parte dei siti web dovrebbero specificare automaticamente le dimensioni dell’incorporamento.<\/p>\n Ad esempio, se guardate il codice di incorporamento di YouTube<\/a>, vedrete che include le dimensioni:<\/p>\n Lo stesso vale per molti altri servizi.<\/p>\n Tuttavia, se il vostro codice embed non specifica l’altezza e la larghezza, potete aggiungere manualmente queste dimensioni al codice embed.<\/p>\n I problemi con il caricamento e l’ottimizzazione dei caratteri possono essere un’altra fonte comune di spostamenti del layout attraverso due potenziali problemi:<\/p>\n Per evitare questi problemi, dovete ottimizzare il caricamento dei font sul vostro sito (il che pu\u00f2 avere effetti positivi anche sulle prestazioni del sito).<\/p>\n Ospitando i font a livello locale e utilizzando il precaricamento, indicate ai browser dei visitatori di dare maggiore priorit\u00e0 al caricamento dei file di font personalizzati.<\/p>\n Caricando i file dei font prima di altre risorse, vi assicurate che i file dei font siano gi\u00e0 caricati quando il browser inizia il rendering dei vostri contenuti, evitando cos\u00ec problemi di FOUT e FOIT.<\/p>\n Per sapere come ospitare i font in locale in WordPress, potete leggere la nostra guida completa su come ospitare i font in locale in WordPress<\/a>.<\/p>\n Da qui, potete impostare il precaricamento dei font manualmente o utilizzando un plugin. La maggior parte dei plugin per le prestazioni include opzioni per il precaricamento dei font, come WP Rocket, Perfmatters, Autoptimize<\/a> e altri.<\/p>\n Se usate Google Fonts<\/a>, potete anche usare il plugin gratuito OMGF<\/a> per ospitare i font in locale e<\/em> precaricarli.<\/p>\n Potete anche precaricare manualmente i font aggiungendo il codice alla sezione <head><\/strong> del vostro sito.<\/p>\n Ecco un esempio di codice: non dimenticate di sostituirlo con il nome effettivo\/la posizione del file di font che volete precaricare:<\/p>\n Potete aggiungerlo direttamente utilizzando un tema child di WordPress<\/a> o iniettarlo con l\u2019hook wp_head<\/a> e un plugin come Code Snippets<\/a>.<\/p>\n La propriet\u00e0 CSS Font-Display<\/a> vi permette di controllare il comportamento di rendering dei font sul vostro sito e di evitare FOIT.<\/p>\n In sostanza, vi permette di usare un font di ripiego nelle situazioni in cui il vostro font personalizzato non \u00e8 ancora stato caricato.<\/p>\n Ci sono due opzioni principali che potete usare per risolvere il problema del CLS:<\/p>\n Con Swap<\/strong>, il browser passa sempre<\/strong> al font personalizzato una volta caricato.<\/p>\n Sebbene Swap<\/strong> risolva completamente il fenomeno del FOIT, pu\u00f2 generare il FOUT. Per minimizzare questo problema, dovete assicurarvi che il font di fallback usi una spaziatura identica a quella del font personalizzato (almeno per quanto possibile). In questo modo, anche se lo stile del font cambia, non si verificheranno spostamenti di layout perch\u00e9 la spaziatura sar\u00e0 la stessa.<\/p>\n Con Optional<\/strong>, il browser conceder\u00e0 al font personalizzato 100 ms per caricarsi. Tuttavia, se il font personalizzato non \u00e8 ancora disponibile, il browser user\u00e0 il font di fallback e non passer\u00e0 mai al font personalizzato per quella pagina (user\u00e0 il font personalizzato per le pagine successive, poich\u00e9 \u00e8 probabile che il file del font sia gi\u00e0 stato scaricato e memorizzato nella cache<\/em>).<\/p>\n Se da un lato l’opzione<\/strong> pu\u00f2 risolvere sia il FOIT che il FOUT, dall’altro lato il visitatore potrebbe rimanere bloccato con il font di ripiego per la prima visualizzazione della pagina.<\/p>\n Se vi sentite a vostro agio con i CSS, potete modificare manualmente la propriet\u00e0 Font-Display nel foglio di stile del vostro tema figlio.<\/p>\n Se non ve la sentite di farlo, potete trovare alcuni plugin che vi aiuteranno:<\/p>\n Se usate Elementor<\/a>, Elementor include anche un’opzione integrata per farlo. Andate su Elementor \u2192 Impostazioni \u2192 Avanzate<\/strong>. Potete quindi impostare il menu a tendina Google Fonts Load<\/strong> su Swap o Optional in base alle vostre preferenze:<\/p>\n Se tutti questi discorsi sul precaricamento e sulla visualizzazione dei font vi confondono, una soluzione semplice \u00e8 quella di usare uno stack di font di sistema invece di uno stack di font personalizzato.<\/p>\n Anche se questo limita le opzioni di progettazione, risolve completamente i problemi di Cumulative Layout Shift, FOIT e FOUT. Inoltre, aiuter\u00e0 il vostro sito a caricarsi molto pi\u00f9 velocemente.<\/p>\n Se vi interessa, date un’occhiata alla guida di Brian su come usare un sistema di font su WordPress<\/a>.<\/p>\n Se usate annunci pubblicitari, \u00e8 importante riservare uno spazio per questi annunci nel codice del vostro sito. Questo segue la stessa idea di riservare spazio alle immagini, ai video e agli embed.<\/p>\n Tuttavia, gli annunci display meritano una menzione speciale perch\u00e9 \u00e8 molto comune che gli annunci display si carichino in ritardo se si usa un qualsiasi tipo di tecnologia di offerta. Questo perch\u00e9 la tecnologia di offerta ha bisogno di tempo per lavorare e capire quale annuncio visualizzare.<\/p>\n Pu\u00f2 essere un problema anche con gli annunci automatici di AdSense<\/a> se avete degli slot di annunci dinamici, perch\u00e9, oltre al problema dell’offerta, AdSense caricher\u00e0 anche annunci di dimensioni diverse<\/a> (quindi potreste non conoscere in anticipo le dimensioni dell’annuncio).<\/p>\n Se usate una delle reti di annunci display pi\u00f9 diffuse<\/a>, come Mediavine o AdThrive, dovrebbero gi\u00e0 offrire degli strumenti per aiutarvi a evitare le variazioni di layout dei vostri annunci. Per esempio, se aprite l’area delle impostazioni degli annunci<\/strong> di Mediavine, potete attivare l\u2019opzione Optimize Ads for CLS<\/strong>:<\/p>\n Ottimizzare il Cumulative Layout Shift in AdSense \u00e8 un po’ pi\u00f9 difficile.<\/p>\n Una soluzione comune \u00e8 quella di aggiungere un elemento <div> attorno a ogni unit\u00e0 pubblicitaria che specifichi un’altezza minima utilizzando la propriet\u00e0 CSS min-height <\/strong><\/a>. Potete anche usare le media queries per modificare l’altezza minima in base al dispositivo dell’utente.<\/p>\n Google consiglia di impostare un’altezza minima pari alla dimensione pi\u00f9 grande possibile dell’annuncio. Anche se questo potrebbe comportare uno spreco di spazio se viene servito un annuncio pi\u00f9 piccolo, \u00e8 l’opzione migliore per eliminare qualsiasi possibilit\u00e0 di spostamento del layout.<\/p>\n Quando impostate questo elemento wrapper, assicuratevi di usare un ID CSS piuttosto che una classe<\/a>, poich\u00e9 AdSense spesso rimuove la classe CSS dagli oggetti genitore.<\/p>\n Ecco come potrebbe apparire il CSS:<\/p>\n Ed ecco come potrebbe apparire l’embed di AdSense:<\/p>\n Nel frontend, ora vedrete che il vostro sito riserva uno spazio per l’annuncio, anche se \u00e8 vuoto:<\/p>\n Molti siti WordPress iniettano dinamicamente contenuti per funzioni come le notifiche di consenso ai cookie, i contenuti correlati, i moduli di opt-in per le email<\/a> e cos\u00ec via.<\/p>\n Sebbene questo sia possibile, dovete fare attenzione ad evitare di farlo in modo tale da causare modifiche al layout.<\/p>\n Una buona pratica di web design<\/a> \u00e8 quella di non inserire mai contenuti al di sopra di quelli esistenti<\/em>, a meno che l’utente non abbia effettuato un’interazione specifica (per esempio facendo clic su un pulsante).<\/p>\n Per esempio, se state aggiungendo un avviso di consenso ai cookie<\/a>, non vorrete inserirlo nella parte superiore della pagina perch\u00e9 il contenuto verrebbe spinto verso il basso (a meno che non abbiate gi\u00e0 riservato uno spazio per il banner di consenso ai cookie<\/em>).<\/p>\n Dovreste invece visualizzare l’avviso in fondo alla pagina, evitando cos\u00ec di spostare verso il basso il contenuto visibile.<\/p>\n Per verificare se il contenuto dinamico \u00e8 la causa del problema, potete usare gli strumenti di visualizzazione di cui sopra (per esempio Layout Shift GIF Generator<\/a>).<\/p>\n Se vedete che i contenuti di uno specifico plugin causano spostamenti di layout, potete considerare di modificare le impostazioni di quel plugin o di passare a un plugin diverso.<\/p>\n Per esempio, alcuni plugin per il consenso dei cookie sono migliori di altri quando si tratta di spostamenti di layout, quindi vale la pena di sperimentare diversi plugin se avete dei problemi.<\/p>\n Se volete approfondire il comportamento dei plugin, potete usare uno strumento di monitoraggio delle prestazioni delle applicazioni (APM)<\/a>. Se avete un hosting con Kinsta, lo strumento APM di Kinsta<\/a> \u00e8 disponibile gratuitamente nel vostro cruscotto MyKinsta<\/a>, oppure potete trovare altri strumenti APM<\/a>.<\/p>\n Per aiutarvi a testare i plugin, potete anche usare i siti di staging di Kinsta<\/a> o lo strumento di sviluppo locale DevKinsta<\/a>.<\/p>\n Se usate le animazioni sul vostro sito, queste possono essere un’altra causa comune dei cambiamenti di layout.<\/p>\n Per evitare che le animazioni causino spostamenti di layout, dovreste usare la funzione CSS Transform<\/a> per le animazioni piuttosto che altre tattiche:<\/p>\n Si tratta di un consiglio tecnico, quindi \u00e8 improbabile che abbiate bisogno di farlo a meno che non stiate aggiungendo il vostro CSS. Per saperne di pi\u00f9, potete leggere la pagina di Google su CLS e animazioni\/transizioni<\/a>.<\/p>\n\n Se il vostro sito web ottiene un punteggio elevato di Cumulative Layout Shift, \u00e8 importante risolverlo sia per creare un’esperienza migliore per i vostri visitatori umani sia per massimizzare le prestazioni del vostro sito nei risultati di ricerca di Google.<\/p>\n Due dei problemi pi\u00f9 comuni sono le dimensioni mancanti per le immagini\/embed e i problemi di caricamento dei caratteri. Se li risolvete, dovreste essere in grado di ottenere un punteggio migliore.<\/p>\n Altri siti potrebbero aver bisogno di approfondire la questione del caricamento degli annunci, dei contenuti dinamici e delle animazioni. Se avete difficolt\u00e0 a implementare questo tipo di ottimizzazioni da soli, potete prendere in considerazione la possibilit\u00e0 di lavorare con un’agenzia WordPress<\/a> o una persona freelance.<\/p>\n Per saperne di pi\u00f9 su Core Web Vitals in generale, potete leggere la guida completa di Kinsta su Core Web Vitals<\/a>.<\/p>\n E se volete un host WordPress che vi aiuti a creare un sito performante<\/a> e che si comporti bene con Core Web Vitals, prendete in considerazione l’hosting WordPress gestito di Kinsta<\/a>: migreremo i vostri siti WordPress gratuitamente<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" State avendo problemi con il punteggio del Cumulative Layout Shift per il vostro sito web? O non sapete bene cosa significhi esattamente Cumulative Layout Shif? Il …<\/p>\n","protected":false},"author":199,"featured_media":63547,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25870,25960,25883],"class_list":["post-63546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-esperienza-utente","topic-strategia-seo","topic-strumenti-di-sviluppo-web"],"yoast_head":"\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
Perch\u00e9 il Cumulative Layout Shift \u00c8 Negativo?<\/h2>\n
Cosa Causa il Cumulative Layout Shift?<\/h2>\n
\n
Come Misurare il Cumulative Layout Shift: I Migliori Strumenti di Test<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Punteggi](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Chrome Developer Tools<\/h3>\n
\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Google Search Console<\/h3>\n
\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
Layout Shift GIF Generator<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
Qual \u00c8 un Buon Punteggio di Cumulative Layout Shift?<\/h2>\n
![\"Spiegazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
Come Risolvere il Cumulative Layout Shift in WordPress (o in Altre Piattaforme)<\/h2>\n
Specificare Sempre le Dimensioni delle Immagini<\/h3>\n
<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nSpecificare Sempre le Dimensioni per Video, Iframe e Altri Incorporamenti<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Correggere e Ottimizzare il Caricamento dei Font<\/h3>\n
\n
Ospitare i Font in Locale e Precaricarli<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nImpostare il Font-Display su Optional o Swap<\/h4>\n
\n
\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
Troppo Complesso? Considerate uno Stack di Font di Sistema!<\/h4>\n
Riservare Spazio per gli Annunci (Se Usate gli Annunci Display)<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
Inserire Dinamicamente e in Modo Furbo il Contenuto con i Plugin<\/h3>\n
Usare la Propriet\u00e0 CSS Transform per le Animazioni Quando Possibile<\/h3>\n
\n
Riepilogo<\/h2>\n