Come migliorare il Cumulative Layout Shift (CLS) per WordPress

La maggior parte dei siti Web è progettata per essere accessibile da vari dispositivi con dimensioni e risoluzioni dello schermo diverse. Pertanto, mantenere la stessa esperienza su più piattaforme può essere difficile. WordPress semplifica il web design multipiattaforma. Tuttavia, in qualsiasi forma di sviluppo software, la creazione di una soluzione universale può essere complicata.

Nel caso dello sviluppo web, gli utenti che navigano da una pagina all'altra su un sito web possono talvolta sperimentare ciò che è noto come Cumulative Layout Shift (CLS). È quando gli elementi visivi di una pagina subiscono un cambiamento improvviso o si caricano in modo errato. Improvvisamente il testo diventa più grande o più piccolo, le immagini cambiano la loro posizione o l'intero layout della pagina cambia.

Perché si verifica questo e come possiamo risolverlo? In questa guida esploreremo cos'è il CLS e come puoi prevenirlo sul tuo sito web.

Che cos'è lo spostamento cumulativo del layout?

La forma percepibile più comune di CLS è il ritardo nel caricamento delle immagini. Su siti Web complessi e ricchi di elementi visivi, noterai spesso che il testo viene caricato prima degli elementi multimediali. Inoltre, il layout della pagina web cambia quando tutti gli elementi visivi vengono finalmente caricati. Questi incidenti si verificano indipendentemente dal fatto che tu stia scorrendo o meno.

Quando una pagina Web ha un punteggio CLS elevato, è difficile determinare quando è stata completamente caricata. Più il sito web è complicato e pesante per i media, maggiore è la probabilità che il layout dell'esperienza cambi.

Ad esempio, le pagine Web dei motori di ricerca semplici con pochissimi elementi visivi hanno CLS minimo o nullo. Tuttavia, ciò non significa che tutti i siti Web complessi o ricchi di funzionalità abbiano punteggi CLS elevati. Ad esempio, il negozio online di Amazon è pieno di widget, immagini e collegamenti, ma si carica rapidamente senza spostamenti percepibili.

Quali sono le cause dello spostamento cumulativo del layout?

Il CLS tende a verificarsi perché i browser Web caricano gli elementi in sequenza in momenti diversi. Inoltre, potresti avere elementi multimediali sul tuo sito web con proprietà sconosciute (come le dimensioni).

Nei casi in cui non specifichi la larghezza o l'altezza di un elemento multimediale (come un'immagine), il tuo browser web non saprà quanto spazio allocare fino a quando la pagina web non verrà caricata completamente. Da qui il drastico cambio di layout. In sintesi, il motivo principale per la maggior parte dei CLS è il caricamento inefficiente.

È importante notare che anche se non si nota lo spostamento del layout in tempo reale, non significa necessariamente che non si verifichi alcuno spostamento. I browser Web spesso memorizzano nella cache i dati dei siti Web, quindi è più facile caricare le pagine Web quando le visiti di nuovo. La misurazione del punteggio CLS è il modo migliore per determinare se il tuo sito Web subisce un sostanziale spostamento del layout.

Come misurare il punteggio CLS del tuo sito web

Il punteggio CLS denota il numero di cambiamenti di layout che una pagina web subisce nel corso della sua vita. Possiamo ricavare il punteggio CLS da quella che è nota come finestra di sessione. Una finestra di sessione descrive il numero di spostamenti di layout che si verificano entro un intervallo di cinque secondi. Per calcolare il punteggio CLS, dobbiamo moltiplicare la frazione di distanza per la frazione di impatto:

 Punteggio CLS = Frazione di distanza x Frazione di impatto

La frazione di impatto descrive quanto un elemento instabile influisca sull'area percepibile tra due frame. La frazione di distanza descrive la quantità di spostamento di un elemento tra i fotogrammi. Un punteggio CLS di 0,10 e inferiore (0,0 – 0,10) è ottimo. Un punteggio CLS superiore a 0,10 ma inferiore a 0,25 (0,10 -0,25) è moderato e richiede miglioramenti, mentre un punteggio CLS superiore a 0,25 (0,25 <) è scarso.

Questi concetti possono essere un po' difficili da capire. Fortunatamente, non devi calcolare manualmente il CLS del tuo sito web. Esistono numerosi strumenti online (e offline) in grado di calcolare il punteggio CLS per te.

Attualmente, il modo più diffuso per misurare il CLS della tua pagina web è tramite PageSpeed ​​Insights di Google. Ti consente di accertare le statistiche sull'esperienza utente del tuo sito Web sia per le iterazioni mobili che desktop.

Altri strumenti CLS includono:

• GT Metrix
• Debugger CLS di Google Web Vitals
• Estensione Web Vitali di Google Chrome
• Faro di Google
• Test della pagina web

Poiché PageSpeed ​​Insights di Google è il più familiare, lo useremo per il nostro esempio.

Per misurare il tuo punteggio CLS, vai alla home page di PageSpeed ​​Insight, inserisci l'URL della tua pagina web nel campo di testo in alto, quindi fai clic sul pulsante Analizza . A seconda della popolarità del tuo sito web e della velocità di Internet, PageSpeed ​​Insights dovrebbe fornirti un rapporto entro pochi secondi.

Per trovare il tuo punteggio CLS, scorri verso il basso fino alla sezione Valutazione dei vitali web principali.

Se utilizziamo come esempio la home page di Amazon, molto probabilmente troveremo un punteggio CLS inferiore a 0,10. Durante i nostri test, abbiamo riscontrato che il sito Web mobile aveva un punteggio CLS di 0,01, mentre la versione desktop aveva un punteggio di 0,05.

Ma come fanno quando il loro sito è così ricco di risorse? Diamo un'occhiata a come puoi avere anche un punteggio CLS simile ad Amazon.

Come ottimizzare CLS

Il modo migliore per vedere quali elementi stanno causando il tuo punteggio CLS elevato è utilizzare il debugger CLS di Google Web Vitals. Ti mostra una GIF di tutte le funzionalità di spostamento sul tuo sito web. Gli annunci e i file multimediali sono i colpevoli più comuni di punteggi CLS elevati. Altre cause possono includere caratteri, CSS asincroni, animazioni e Iframe. Per migliorare il tuo punteggio CLS, dovrai ottimizzare questi elementi.

Garantire che il tuo sito Web abbia un CLS rispettabile è importante quanto garantire che abbia una forte SEO locale e contenuti pertinenti. Il motore di ricerca di Google tende a privilegiare i siti Web che offrono un'esperienza utente eccezionale e sono ben ottimizzati.

A tal fine, ecco alcuni passaggi per migliorare il punteggio CLS del tuo sito:

Aggiungi le proprietà della dimensione a tutti i file multimediali

Se carichi file multimediali con proprietà sconosciute, aumenterà il rischio di spostamento del layout perché il tuo browser web dovrà calcolare le dimensioni dell'immagine e determinare l'orientamento del layout dopo il caricamento. Queste situazioni hanno maggiori possibilità di verificarsi per immagini e file di grandi dimensioni ad alta risoluzione.

Caricando file multimediali con proprietà di dimensione mancanti, hai messo troppo lavoro nelle mani del browser web. Devi aggiungere le proprietà di altezza e larghezza per ogni file multimediale visivo che carichi. Puoi farlo visualizzando il tuo codice sorgente e aggiungendo manualmente le proprietà di larghezza e altezza.

Assicurati che i caratteri siano caricati localmente

Il testo deve rimanere visibile durante il caricamento dei caratteri. Il primo passo per raggiungere questo obiettivo è garantire che i font vengano caricati localmente invece di essere estratti da siti Web di font di terze parti.

Se scopri che i tuoi font vengono estratti da un sito Web di terze parti, puoi utilizzare un plug-in come OMGF per ospitarli localmente e caricarli più velocemente. Questo non solo migliorerà il tuo punteggio CLS, ma è anche un passo verso un design ecologico.

Evita FOIT e FOUT

Flash of Invisible Text (FOIT) si verifica quando non si specifica un carattere di fallback. Mentre il tuo browser web tenta di caricare il tuo carattere o di trovare un'alternativa, agli utenti verrà presentato uno spazio vuoto dove dovrebbe trovarsi il testo.

Durante il flash of unstyled text (FOUT), ti verrà presentato il carattere di fallback predefinito del browser Web finché non sarà possibile caricare il carattere specificato. Per risolvere questo problema, puoi aggiungere la proprietà font-display: swap .

Se hai mai scaricato font da Google, noterai che aggiunge questo tag alla fine di ogni URL. Il modo più semplice per aggiungere tu stesso questa proprietà è utilizzare il plug-in Swap Google Fonts Display su WP.

Tuttavia, tieni presente che questo plug-in funziona solo per i caratteri Google e aggiunge automaticamente la proprietà di scambio di visualizzazione a tali URL. Se stai ospitando i caratteri in locale, puoi utilizzare il plug-in String Locator per trovare tutti i file dei caratteri e modificarli. Dovrai aprire il foglio di stile del carattere in WP e modificarlo.

In alternativa, puoi utilizzare plug-in di memorizzazione nella cache, ad esempio uno che ottimizzerà automaticamente i caratteri per te aggiungendo la proprietà di scambio dei caratteri.

Precarica i caratteri

Per assicurarti di ospitare i caratteri in locale, puoi quindi precaricare i tuoi caratteri con un plug-in come:

• WP Rocket
• Suggerimenti per le risorse prima del party
• Permanenti

Se non puoi permetterti di usare questi plugin, puoi precaricare i tuoi font modificando il tuo file header.php. Assicurati solo di testare a fondo il tuo sito dopo aver precaricato i caratteri. Il precaricamento di troppi caratteri potrebbe danneggiare il tuo sito web. Quindi, come per tutte le principali possibilità di back-end, ti suggeriamo di eseguire il backup del tuo sito WordPress in anticipo.

Disattiva l'ottimizzazione della pubblicazione CSS

Se stai utilizzando WP Rocket per ottimizzare la consegna CSS o caricare CSS in modo asincrono con LiteSpeed ​​Cache, potrebbe causare un flash of unstyled content (FOUC). Se desideri migliorare il tuo punteggio CLS, ti consigliamo di disabilitare queste opzioni nei rispettivi plugin.

In alternativa, puoi impostare ciò che è noto come CSS critico di fallback. Ciò comporta la generazione di uno script di fallback critico utilizzando uno strumento come Critical Path CSS Generator.

La rimozione degli script di blocco del rendering può anche ridurre il punteggio CLS. Ti consigliamo di testare prima il tuo CLS con l'ottimizzazione della pubblicazione CSS abilitata, quindi testarlo quando lo hai disabilitato per confrontare.

Disabilita le animazioni

Se stai utilizzando le animazioni, ti consigliamo di disabilitarle per la versione mobile del tuo sito web perché le animazioni possono ridurre i tempi di caricamento del tuo sito web. Se insisti per avere animazioni per il tuo sito web, ti suggeriamo di utilizzare le opzioni di trasformazione e traduzione CSS.

In alternativa, puoi utilizzare il plug-in Happy Addons Elementor. Ciò consente di animare gli elementi senza causare spostamenti di layout.

Il modo migliore per eliminare la maggior parte dei cambiamenti di layout è modificare il modo in cui viene caricata la tua pagina web. A sua volta, puoi aumentare la velocità e l'efficienza del tuo sito WordPress. Come sempre, si tratta di migliorare l'esperienza dell'utente. Più reattivo è il tuo sito web, maggiore è la probabilità che gli utenti lo inseriscano nei preferiti e lo rivisitino.