Su questa pagina: [nascondere]
Che cos'è lo spostamento cumulativo del layout?
Cumulative Layout Shift o CLS è un movimento di una pagina web sullo schermo del browser dell'utente. Un buon esempio per spiegare questa metrica delle prestazioni è se visiti un sito web e stai per fare clic su un oggetto come un collegamento o un pulsante e poi improvvisamente la tua pagina si sposta su o giù, e all'improvviso viene visualizzato un annuncio, facendoti invece fare clic sull'annuncio. Questo movimento che fa apparire l'annuncio nel viewport dell'utente è chiamato CLS.
In questo post, ci proponiamo di spiegarti come puoi lavorare con questa metrica, noto anche come CLS, verso il miglioramento del tuo sito web.
Generalmente, Google mira a dare la priorità ai siti Web ben ottimizzati con un buon layout fortemente orientato al miglioramento dell'esperienza dell'utente. Il punto principale di questo sono le ultime tendenze nel concentrarsi su come l'utente interagisce con i siti web. Questa priorità dell'esperienza utente ci porta a Cumulative Layout Shift, che è una metrica delle prestazioni di Google che fa parte delle metriche di Core Web Vitals. Questo viene fatto al fine di migliorare l'analisi di come un utente interagisce con un determinato sito web.
E con molti siti Web che ora si concentrano sul miglioramento e sulla stabilizzazione delle loro pagine e sul riempimento dei loro contenuti con diversi tipi di pop-up e altri annunci che a volte sono un incubo per l'esperienza dell'utente, Google ha posto l'utente come una priorità.
Come funzionano i turni di layout cumulativi?
Poiché è una metrica delle prestazioni di Google, è responsabile della misurazione della stabilità dei tuoi contenuti, visivamente saggio. Un'attività entusiasmante di cui è responsabile è tenere traccia di come una pagina web del tuo sito cambia dal punto in cui è stata creata. Un aspetto molto cruciale del sapere come “bene” il suo valore è.
Che cos'è il punteggio CLS e come funziona?
Il punteggio CLS fa parte delle funzioni di questa metrica di Google e varia da 0 a un numero più alto man mano che più elementi mobili della tua pagina web vengono aggiunti durante il ciclo di vita del tuo sito web. Qualcuno potrebbe dire che minore è il valore sulle tue pagine web, migliore sarebbe la stabilità del layout della pagina. Google classifica questi punteggi come Scarsi, Bisogno di Miglioramento e Bene e sembrano così:
- Piu 'basso di 0.1 – Buon punteggio CLS.
- Fra 0.1 e 0.25 – Dovresti migliorarlo.
- Tutto sopra 0.25 – Punteggio negativo.
Un dettaglio che devi tenere a mente è che questo non è direttamente responsabile della posizione del tuo sito web in Google, ma la sua idea principale è quella di far parte di Google Core Web Vitals – un set per misurare le prestazioni, il che significa che potrebbe diventare improvvisamente essenziale man mano che Google lancia nuovi aggiornamenti in futuro. Quindi tieni presente che potrebbe essere importante nei mesi a venire.
E poiché un risultato elevato di questi valori è fondamentalmente una brutta esperienza per gli utenti del tuo sito, i nostri consigli sono di provare a migliorarlo (abbassalo).
Come calcolare il tuo punteggio CLS?
Ci possono essere effetti negativi sui tuoi siti web di piccolo e grande impatto. Un annuncio vagante potrebbe indurre il cliente ad acquistare il prodotto sbagliato, il che significa fondamentalmente che dovresti stare attento a come posizioni le tue animazioni e cercare di mantenerle al minimo. Ma sapere esattamente come migliorare questi oggetti, devi sapere come calcolare il tuo punteggio CLS.
Per misurare qual è il tuo valore per questa metrica di Google, è necessario prendere in considerazione i seguenti elementi:
- Distanza in movimento.
- Regione di impatto.
- Altezza della finestra.
Ci sono due fattori principali per misurare questa metrica:
- Frazione di impatto.
- Frazione di distanza.
Per misurare il Impatto, dovresti calcolare la tua regione di impatto, che è l'area che è stata interessata da una certa animazione o oggetto. Di solito sono diverse forme di cornice familiari, come un quadrato o un rettangolo, ma potrebbe anche essere più complicato, a seconda di come l'hai fatto.
Per il calcolo del tuo impatto, applicare la seguente formula:
area della regione di impatto (montatura) / area di visualizzazione = frazione di impatto
Per misurare il Distanza, dovrai prima sapere di cosa si tratta. Google ha aggiunto la distanza solo in un secondo momento ed è correlata alla distanza di spostamento del tuo elemento prima e dopo il turno. Quindi per sapere di cosa si tratta devi usare questa formula:
distanza massima di movimento / altezza finestra = frazione di distanza
Quindi per calcolare il risultato complessivo per un dato elemento, devi usare Impact Fraction e Distance Fraction, e questo ti darà i valori per un'animazione sul tuo sito:
frazione di impatto * frazione di distanza = punteggio CLS per 1 elemento
I risultati totali possono essere calcolati semplicemente sommando tutti i punteggi dei diversi elementi.
Cosa può aumentare il punteggio cumulativo di spostamento del layout?
Google ha sottolineato che le ragioni principali per i risultati elevati possono finire per essere:
- Contenuto dinamico.
- Immagini senza dimensioni specificate.
- Caratteri che stanno causando il cosiddetto Flash of Invisible Text
- I caratteri che causano Flash di Unstyled Text.t
Attività impostate per attendere una risposta dalla rete prima di aggiornare DOM (Modalità oggetto documento).
Come rendere migliore lo spostamento cumulativo del layout?
Puoi eseguire le seguenti attività per migliorarlo e renderlo migliore agli occhi di Google:
1 – Stai lontano dai caratteri ospitati online o se sono ospitati online, dovresti usare valori per la visualizzazione dei caratteri come fallback, bloccare, scambiare, opzionale o automatico. Puoi anche precaricare alcuni file dei caratteri usando il link rel = precarico per i caratteri specifici. L'ultimo è fondamentalmente il precaricamento dei caratteri come priorità che consigliamo vivamente.
2 – Usa le proporzioni per ridimensionare le immagini, per esempio 4:3 o 16:9 invece della dimensione dell'immagine in pizels, come 800×600 e così via. Ciò contribuirà a ridurre al minimo il rischio di aumentarne il totale perché offre al browser la capacità di calcolare lo spazio necessario per mostrare una foto.
3 – Evita di implementare contenuti dinamici e soprattutto su un altro oggetto sulla tua pagina che è già attiva.
Se sei interessato a saperne di più su questo spostamento cumulativo del layout e su come ottimizzarlo, ti suggeriamo di consultare la knowledgebase estesa di Google su Ottimizzazione di CLS.
Per adesso, CLS è solo direttamente correlato al modo in cui un utente percepisce il tuo sito, il che lo rende essenziale. Riteniamo che, data la maggiore attenzione di Google alle informazioni sull'interazione dell'utente e all'esperienza complessiva sul tuo sito web, potrebbe diventare un fattore significativo nel prossimo futuro, quindi se vuoi rimanere in cima alle cose, ti suggeriamo di tenerlo d'occhio.
Se hai ulteriori domande su CLS e su come funziona, non esitare a lasciarci un commento. Il nostro team Howtohosting.guide mira sempre a rispondere rapidamente e ad aiutarti.