Test Cumulative Layout Shift (CLS)
Il test Cumulative Layout Shift di SEOptimer mostra il valore CLS della tua pagina rispetto alle soglie di Google, utilizzando i dati sul campo di Google raccolti da visitatori reali.
Esegui un audit SEO su qualsiasi sito in pochi secondi
+ Strumenti SEO / GEO completi per ogni esigenza
Esegui oltre 100 controlli sul tuo sito web per SEO On-Page, usabilità, prestazioni, social e link. Ora con GEO incluso in ogni report. SEOptimer offre anche ricerca di parole chiave, monitoraggio del posizionamento, analisi dei backlink e un crawler completo del sito.
Informazioni sul Cumulative Layout Shift
Che cos’è il Cumulative Layout Shift?
Il Cumulative Layout Shift misura quanto la pagina si sposta durante il caricamento. Ogni volta che un elemento visibile cambia posizione senza che sia il visitatore a causarlo, lo spostamento viene conteggiato e i punteggi si accumulano.
È la metrica con il sintomo più familiare: cercare di fare clic su un link e premere qualcos’altro perché un annuncio o un’immagine si è caricato sopra di esso, spostando la pagina verso il basso.
A differenza delle altre due, non viene misurata in termini di tempo. È un rapporto che descrive quanta parte dello schermo si è spostata e di quanto, motivo per cui i valori sono piccoli e un punteggio di 0,1 rappresenta già uno spostamento visibile.
Cosa si considera un buon CLS?
Google considera buono un valore pari o inferiore a 0,1, da 0,1 a 0,25 come un valore che richiede miglioramenti e qualsiasi valore superiore a 0,25 come scarso, considerando il 75° percentile dei caricamenti reali delle pagine.
Gli spostamenti causati direttamente dal visitatore non vengono conteggiati. Aprire un accordion o chiudere un banner sposta legittimamente la pagina; viene ignorato solo lo spostamento che si verifica entro mezzo secondo da un’interazione, ovvero più o meno l’intervallo durante il quale una persona attribuisce lo spostamento alla propria azione.
Di solito è il più facile da ottenere dei tre. Mentre LCP e INP richiedono interventi sulle prestazioni, la maggior parte degli spostamenti del layout si risolve riservando spazio, ovvero modificando il markup anziché l’architettura.
Cause comuni degli spostamenti del layout
- Immagini e video senza attributi di larghezza e altezza, per cui non viene riservato alcuno spazio finché non vengono caricati.
- Annunci e contenuti incorporati inseriti in un contenitore privo di dimensioni definite.
- Web font che vengono caricati con dimensioni diverse rispetto al carattere di fallback, causando il riflusso del testo.
- Banner, avvisi e barre dei cookie inseriti sopra i contenuti esistenti.
- Contenuti inseriti tramite script dopo che la pagina è già stata visualizzata.
Il principio alla base di tutti questi casi è lo stesso: qualcosa arriva in ritardo e occupa uno spazio che non era stato riservato. Tutto ciò che si trova sotto viene spinto verso il basso e qualunque elemento il visitatore stava per toccare si sposta.
Come migliorarlo
- Imposta larghezza e altezza su ogni immagine e video, in modo che il browser riservi lo spazio necessario.
- Assegna agli spazi pubblicitari e agli incorporamenti una dimensione minima fissa, anche quando sono vuoti.
- Precarica i font principali e fai corrispondere le metriche del fallback, così il cambio non provoca un ricalcolo del layout.
- Inserisci banner e avvisi sotto i contenuti esistenti oppure sovrapponili, invece di spostare i contenuti.
- Riserva spazio per tutto ciò che uno script aggiungerà in un secondo momento.
- Controlla il comportamento sui dispositivi mobili, dove una colonna stretta trasforma un piccolo spostamento in uno significativo.
Cosa controlla questo strumento
Il test CLS legge i dati sul campo di Google relativi alla pagina, ovvero le misurazioni raccolte da visitatori reali in Chrome, e mostra in quale posizione rientra rispetto alle soglie indicate sopra.
Se non viene mostrato alcun risultato, la pagina non riceve traffico sufficiente perché Google possa fornire dati al riguardo. Nel frattempo, lo spostamento del layout è l’unica metrica che puoi verificare manualmente in modo affidabile: carica la pagina su un telefono, con una connessione lenta, e osserva cosa si sposta.
Per le altre due metriche, o per tutte e tre insieme, usa i Test dei Core Web Vitals.
Cosa fare dopo
La maggior parte degli spostamenti del layout è riconducibile alle immagini e alle risorse che arrivano in ritardo. Controlla le ottimizzazione delle immagini presenti nella pagina, quanto pesa con il controllo dimensione del file della pagina web e come si comporta su un telefono con il test responsive su dispositivi mobili.
Strumento SEO completo con oltre 55 strumenti
Controlla titoli, meta description, intestazioni, dati strutturati, Core Web Vitals, SSL e robots.txt. Genera meta tag, sitemap e regole .htaccess, minimizza CSS, JS e HTML e crea contenuti con i nostri strumenti di scrittura basati sull’IA, istantaneamente e gratuitamente.
Approfondimenti
Vedi di più
Core Web Vitals: What are They? How are They Crucial to SEO?
You should optimize your web pages for a seamless user experience. But how can you measure the quality of user experience on a site? That’...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...