Nel maggio 2020, Google ha introdotto una serie di tre importanti metriche note come Principali parametri vitali del webQueste metriche sono un modo per misurare l'esperienza utente complessiva di un sito web. L'obiettivo è semplice: rendere il web un posto migliore per tutti. I tre Core Web Vitals sono:
- Vernice di contenuto più grande (LCP): Misura il tempo impiegato affinché il contenuto principale della pagina venga visualizzato sullo schermo.
- Ritardo primo ingresso (FID): Misura quanto tempo impiega un visitatore prima di iniziare a interagire con la pagina.
- Spostamento cumulativo del layout (CLS): Questo misura se la pagina è visivamente stabile o se i suoi elementi si spostano molto durante il caricamento.
Queste metriche sono più di semplici numeri per il posizionamento nei risultati di ricerca. Hanno un impatto diretto sull'esperienza dei tuoi visitatori. Migliorare queste metriche non solo migliora il posizionamento, ma rende anche il tuo sito web un luogo più piacevole in cui navigare.
Cos'è lo spostamento cumulativo del layout?
Spostamento cumulativo del layout (CLS) è l'obiettivo principale di questo articolo. Sebbene il nome possa sembrare tecnico, il concetto è semplice. Vi è mai capitato di cliccare su un pulsante o leggere una riga di testo, quando all'improvviso un'immagine o un annuncio pubblicitario sono apparsi e hanno spinto tutto verso il basso? Questa brutta esperienza è un cambiamento di layout. Il CLS misura quanto gli elementi di una pagina si muovono durante il caricamento. Un buon punteggio CLS è pari o inferiore a 0.1. Un punteggio superiore a 0.25 è considerato scarso. Un punteggio inferiore indica una pagina più stabile, che si traduce in un'esperienza migliore per gli utenti.
Come viene calcolato il CLS?
Il punteggio CLS è un numero che va da 0 a 1. Un punteggio pari a 0 indica un'ottimale accelerazione, senza variazioni di layout, mentre un punteggio più vicino a 1 indica un notevole movimento. La matematica dietro questo numero non è troppo elaborata: punteggio di spostamento del layout = frazione di impatto * frazione di distanza. frazione di impatto misura quanta parte della pagina è interessata dallo spostamento e frazione di distanza Misura la distanza percorsa dagli elementi. Ad esempio, se un elemento di grandi dimensioni si sposta di una distanza significativa, il punteggio CLS sarà basso. Qualsiasi cambiamento di layout che si verifichi entro mezzo secondo dall'interazione dell'utente con la pagina (ad esempio, cliccando o digitando) non viene conteggiato nel punteggio.
Come posso trovare il mio CLS?
Prima di poter correggere il tuo punteggio CLS, devi sapere di cosa si tratta. Esistono diversi modi per calcolarlo.
Google Pagespeed Insights
Puoi eseguire un controllo della velocità della pagina in Google Pagespeed Insightse vedrai il punteggio CLS elencato in Dati di laboratorio sezione. Il rapporto metterà inoltre in luce le principali cause del CLS nel Diagnostica Ultrasuoni sezione. A seconda del traffico ricevuto dal tuo sito web, il rapporto potrebbe anche includere Campo dati, che si basa sulle esperienze di utenti reali.
Google Search Console
La tua console di ricerca ha un Principali parametri vitali del web Report che mostra quali pagine hanno prestazioni buone o scarse. Questo report include il tuo punteggio CLS, insieme al Largest Contentful Paint e al First Input Delay.
Faro di Google
È inoltre possibile utilizzare il Lighthouse scheda negli strumenti per sviluppatori del browser. Puoi eseguire un report completo sulle prestazioni, incluso lo spostamento cumulativo del layout. Questo è molto simile al report Pagespeed Insights, ma ha un ulteriore vantaggio: puoi eseguirlo su pagine non ancora pubbliche, il che lo rende un ottimo strumento per gli sviluppatori.
Quali sono le cause dello spostamento cumulativo del layout?
Le cause più comuni di sfasamenti nel layout possono essere risolte con poche semplici modifiche. Ecco i colpevoli più comuni e come risolverli.
Immagini e video senza dimensioni
Questa è una delle cause più comuni di CLS. Quando un browser carica una pagina, il codice HTML viene caricato per primo, seguito dal CSS e infine dalle immagini e dai video. Se non si specificano la larghezza e l'altezza di un'immagine o di un video, il browser non sa quanto spazio riservargli. Di conseguenza, il layout cambierà una volta caricata l'immagine. Questo è particolarmente evidente sulle connessioni più lente.
Come risolvere questo?
La soluzione è semplice: specifica sempre altezza e larghezza delle immagini in HTML. Questo indica al browser esattamente quanto spazio riservare, in modo che il resto della pagina venga caricato nel posto corretto. Assicurati anche che le tue immagini abbiano un testo alternativo valido, poiché questo è un elemento fondamentale. SEO on-pageIl nostro libero Generatore di testo alternativo per immagini AI può aiutarti a scrivere una buona descrizione per le tue immagini, il che è anche un ottimo modo per migliorare la tua SEO.
Ads - Annunci
Gli annunci pubblicitari sono una delle principali cause di CLS. Spesso vengono caricati e mirati a un visitatore specifico e possono richiedere molto tempo per caricarsi. Questo può causare un improvviso cambiamento di layout, soprattutto se l'annuncio si trova in cima alla pagina.
Come risolvere questo?
Analogamente alle immagini, puoi specificare le dimensioni che desideri riservare a un annuncio. In questo modo, il layout non subirà modifiche una volta caricato l'annuncio. È consigliabile riservare all'annuncio lo spazio più ampio possibile, anche se viene pubblicato un annuncio più piccolo.
Incorporamenti e i-frame
Se incorpori elementi come video di YouTube, Google Maps o feed di Twitter nella tua pagina, devi prestare attenzione al CLS. Non sempre conosci le dimensioni esatte dell'elemento, quindi c'è il rischio di modificare i layout.
Come risolvere questo?
Dovresti cercare di fare una stima accurata delle dimensioni dell'elemento e riservare quello spazio nel layout. Se non puoi esserne sicuro, dovresti valutare di impostare un'altezza o una larghezza massima per quell'elemento.
caratteri web
Anche caricare font da servizi come Google Fonts potrebbe causare una variazione nel layout. Durante il caricamento di un font, la pagina potrebbe già visualizzare un font di riserva. Una volta caricato, il font verrà sostituito, causando una leggera variazione nel layout.
Come risolvere questo?
Esistono due modi per ridurre l'effetto negativo dei font web su CLS: impostando l'attributo CSS visualizzazione dei caratteri a swap e rendendo i font caricati più velocemente tramite il prefetching e il precaricamento dei font web. swap L'attributo indica al browser di utilizzare il font di riserva finché non sarà pronto il nuovo font.
Contenuti inseriti dinamicamente
Con la crescente popolarità dello sviluppo web moderno, sempre più pagine presentano contenuti caricati dinamicamente. Le pagine conterranno segnaposto che vengono popolati solo dopo che una chiamata al server JavaScript restituisce il contenuto corretto. Questa operazione può richiedere del tempo e potrebbe causare modifiche nel layout.
Come risolvere questo?
Dovresti sempre riservare spazio per i contenuti successivi. Dovresti anche assicurarti che i contenuti vengano caricati il più velocemente possibile. Questo è un compito tecnico per il quale uno sviluppatore può aiutarti.
Conclusione
I cambiamenti di layout sono fastidiosi per i visitatori e si traducono in un'esperienza utente scadente. Dal 2021, i cambiamenti di layout potrebbero anche influire negativamente sul posizionamento su Google. La buona notizia è che CLS ha diverse cause e per ognuna di esse esiste una soluzione relativamente semplice. Una piattaforma SEO automatizzata Grado di clic può aiutarti con la SEO on-page, con i problemi tecnici e con i contenuti, così potrai creare un sito web efficace e ben posizionato.
