Correzione dell'errore del problema CLS in Core Web Vitals in GSC
Soddisfare:
Con l'introduzione di Core Web Vitals in GSC,Google ha chiarito che considererà i Web Vitals per le pagine come un fattore di ranking. Questo funzionerà insieme ad altri fattori di ranking di Google come Page Speed, HTTPS, Ottimizzazione per i dispositivi mobili e Navigazione sicura. Non sono stati ancora rilasciati molti dettagli, ma Google Search Console ha iniziato a mostrare rapporti per i principali Web Vitals.
Consiste di tre metriche delle prestazioni web;
- LCP: La vernice più grande con contenuti
- FID: Primo ritardo di ingresso
- CLS: Spostamento cumulativo del layout
Al momento non sono disponibili molte informazioni su come risolvere questi problemi, ma ci sono alcune pratiche che possono aiutarti a risolvere il Cumulative Layout Shift (CLS) 'Più di' per le tue pagine web.
↑ Che cos'è lo spostamento cumulativo del layout?
È una metrica della pagina che segnala la stabilità della pagina.In termini semplici, quando carichi una pagina web, inizi a leggere o esegui qualsiasi azione e se improvvisamente il contenuto o gli elementi della pagina web salta o cambia, potrebbe causare problemi tenendo in considerazione l'esperienza di visualizzazione degli utenti.
CLS misura la somma totale di tutti gli individui punteggi di spostamento del layout per ogni spostamento imprevisto del layout che si verifica durante l'intera durata della pagina.
L'esempio sopra mostra che un carico improvviso di elementi sopra la casella di conferma dell'ordine ha causato un clic accidentale. Il CLS è la media di tutti questi cambiamenti di contenuto della pagina.
Per fornire una buona esperienza utente, i siti dovrebbero sforzarsi di avere un punteggio CLS inferiore a 0.1
↑ Che cosa causa un CLS elevato?
Potrebbe esserci una serie di problemi che possono causare un CLS più elevato, ma sottolineerò alcuni dei motivi principali;
- Ridisposizione dei contenuti con caricamento lento
- Immagini senza dimensioni
- Iniezione di annunci
- Incorporamenti e iframe senza dimensioni
- Un contenuto in attesa di caricamento a causa della risposta lenta
↑ Ridisposizione dei contenuti con caricamento lento
Lazy Load è un meraviglioso plugin che carica il fileimmagini solo quando si scorre una pagina e il contenuto arriva nel viewport. Ma molte volte questo fa sì che il contenuto si sposti su e giù causando il reflow, dove il contenuto sotto o intorno all'immagine viene spinto per fare spazio all'immagine appena caricata.
↑ Iniezione di annunci
Gli annunci sono uno dei maggiori contributori al layoutsi sposta sul Web spingendo i contenuti visibili che stai visualizzando in basso nella pagina. Lo fa caricando le unità pubblicitarie dopo che la pagina è stata caricata causando un notevole jank.
↑ Elemento in attesa di caricamento a causa di una risposta lenta
A volte a causa della risposta HTTP lenta, il caricamento di pochi elementi potrebbe richiedere del tempo causando lo spostamento del contenuto verso l'alto o verso il basso.
↑ Come risolvere l'errore CLS elevato in Web Vitals?
Se il caricamento delle immagini richiede tempo e il contenuto occupa spazio per le immagini. Quindi, quando il contenuto viene caricato, sposta il contenuto verso il basso causando instabilità del layout.
Per le immagini che causano lo spostamento del contenuto (Jank),riservare lo spazio richiesto con le caselle delle proporzioni CSS. Questo approccio garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento del supporto. Puoi leggi questo post per Jank Free Image Load.
Anche le immagini caricate in modo pigro possono causare il problema, possono creare uno spazio enorme prima di occupare lo spazio dell'immagine. Se stai affrontando il problema di ridisposizione dei contenuti a causa del caricamento lento dell'immagine di quanto puoi leggi questo articolo per le soluzioni.
Se si inseriscono annunci nel contenuto, assicurarsi che i turni sianoeliminato riservando la dimensione dello slot. Utilizza il segnaposto se non viene restituito alcun annuncio anziché comprimere lo spazio riservato. Se stai utilizzando WordPress, un buon plug-in per gli annunci come Ad-Inserter si prenderà cura di mantenere lo spazio corretto per gli annunci, quindi non devi preoccuparti.
Evita il contenuto dinamico, il contenuto dinamico è quello giustoche viene inserito dopo il caricamento della pagina. Soprattutto il contenuto above the fold, ad esempio newsletter, iscrizioni, post correlati nel contenuto DOM. Ricorri al caricamento di questo tipo di contenuto above the fold, se possibile prova a utilizzare Pop-up Box.
Potrebbe anche essere una risposta HTTP lenta dal servercausare instabilità dei contenuti. Se stai usando un CDN e ci vogliono molti millisecondi per caricare gli elementi rientrati e questo fa saltare il contenuto, allora devi creare uno spazio nel DOM o sincronizzare il carico con altri elementi.
Ci sono anche altre cause per un CLS elevato, puoi trovare una guida dettagliata per ottimizzare CLS su Sito ufficiale Web.Dev
Conclusione: Il post non contiene alcuna soluzione tecnica o relativa al codice, ma offre una panoramica di cosa esattamente causa il problema e come puoi affrontare la risoluzione del problema.
Trucchi
Trucchi