Risoluzione dei problemi di CLS e Adsense

Far felice Google è impossibile. Ci ho rinunciato molto tempo fa, anche se ci sono dei problemi da risolvere, come ad esempio il CLS (Spostamento cumulativo del layout).

Spostamento cumulativo del layout

Lo spostamento cumulativo del layout è la variazione cumulativa del layout. Questa metrica è importante perché analizza stabilità visiva e la frequenza con cui i visitatori sperimentano cambiamenti di layout inaspettati

In poche parole, misura qualsiasi spostamento degli elementi nella parte superiore della pagina durante il caricamento.

Il raggiungimento di un CLS basso aiuta a garantire che la pagina sia piacevole per gli occhi ed evita movimenti fastidiosi che possono far perdere al lettore la vista e/o la posizione di elementi di navigazione importanti.

Si considera una buona esperienza utente se il CLS non supera 0,1, fino a 0,25 deve migliorare e da lì in poi si considera un punteggio negativo. Questo, come immagino sappia, può essere misurato in diversi modi. Il più comunemente usato è PageSpeed Insights.

Come si legge nella documentazione del Core Web Vitalsdocumentazione, un cattivo CLS può essere causato da vari elementi, come un’immagine o un video di dimensioni sconosciute, un carattere che viene visualizzato più grande o più piccolo della sua alternativa, o un annuncio di terze parti o un widget o un effetto di animazione che cambia dimensioni in modo dinamico

Paradossalmente, alcuni degli elementi che tendono a sfiorare il CLS sono gli annunci di Google Adsense. Soprattutto se si utilizza la funzione annunci automatici (opzione non raccomandata). Ci sono casi in cui rovinano completamente la velocità di caricamento.

Come rilevare lo scorrimento

Ecco il nocciolo della questione: cosa dobbiamo cercare esattamente e come lo troviamo? Beh, tutto ciò che cambia dimensione e/o scorre durante il caricamento.

Ora che stiamo cercando di risolvere il problema di Adsense, possiamo dare un’occhiata al resto degli elementi che possono ingrassare il CLS. Ci sono diversi modi per farlo, eccone alcuni.

Guardando

Il metodo più rustico è la semplice osservazione, a occhio. Se il movimento è evidente, lo vedrà subito, ma ci sono movimenti meno evidenti che richiedono un’ispezione più approfondita.

In Search Console

In GSC, alla voce “Top Web Metrics”, può ottenere un elenco di URL con problemi di CLS e LCP, che può utilizzare per esaminarli più da vicino, uno per uno.

Debugger per lo spostamento del layout cumulativo

Debugger del Layout Shift cumulativo, è un sito web in cui si inserisce l’url che si desidera analizzare e si crea una GIF animata che mostra tutti i cambiamenti di design della versione mobile e desktop

Questo strumento, realizzato da un ingegnere di Chrome, è uno degli strumenti più utili per trovare i problemi del CLS.

Se la maggior parte del testo della pagina è evidenziata, è probabile che i font siano la causa degli spostamenti del layout.

Generatore di GIF Layout Shift

Generatore di GIF Layout Shift è un altro sito web che fa lo stesso, e genera una gif con gli spostamenti per la versione mobile e desktop. Può provarlo per confrontare i risultati. Ci sono sempre lievi differenze nelle misurazioni di ogni strumento e si può trovare in uno strumento ciò che l’altro non è in grado di mostrare o non rileva in un determinato momento.

Visualizzatore CLS

Questo strumento, essendo uno dei più semplici, è quello che mi ha permesso di cogliere meglio i turni.

Visualizzatore CLS è un’estensione molto utile che, come suggerisce il nome, la aiuterà a visualizzare la metrica Spostamento cumulativo del layout della pagina, mostrandole esattamente quali elementi stanno cambiando e come stanno cambiando. Si noti che questo è anche uno strumento di laboratorio che fornisce i dati in base al dispositivo, al browser, alla risoluzione dello schermo o al tipo di connessione.

Quando attiva l’estensione, le verranno mostrate le misurazioni CLS in un elenco e quando cliccherà su ciascuna di esse, l’animazione dell’elemento che la causa apparirà in rosso.

Grazie a questa estensione ho ottenuto zero CLS su molte pagine. Anche se ci possono essere così tante cose che lo causano che l’ho lasciato installato per rivedere gli url senza fretta.

Modificare la velocità di caricamento del sito con Chrome Dev Tools

Chrome Dev Tools offre interessanti possibilità, una delle più utili per mettere le mani su questa cosa del CLS è l’opzione di ridurre la larghezza di banda a cui viene caricata la pagina, in modo da poter vedere chiaramente quando si verifica la modifica del design e quali elementi vi contribuiscono.

Per farlo, apra gli Strumenti di Chrome Dev nel browser e clicchi con il tasto destro del mouse sul suo sito web e in Rete cerchi l’icona Wifi mostrata nell’immagine e accanto ad essa troverà un menu a tendina dove potrà aggiungere una velocità personalizzata.

Crei un nuovo profilo e aggiunga 100 Kb o meno per testarlo al “rallentatore”.

Ora, navigando alla velocità di quando Internet era lento, sarà molto più facile identificare ciò che potrebbe crearle problemi durante il caricamento.

Rendering

In Layout Shift Regions in Chrome Dev Tools può anche vedere le modifiche al layout evidenziate in blu durante la navigazione della sua pagina in tempo reale

Ecco i passaggi per abilitare le Regioni di spostamento del layout
:Nella console, cerchi “Rendering”.

Selezioni la casella di controllo Regioni di rendering e tutte le altre caselle di controllo che desidera provare.
Ora, quando sfoglia la pagina, le modifiche al layout saranno evidenziate in blu.

Con un’estensione del browser

In Chrome può installare il file CLS Checker – Viaggio più lungo e testare tutti gli URL che hanno un punteggio insufficiente. Inoltre, l’estensione fornisce indizi sotto forma di etichette rosse e mostra l’elenco degli elementi e le CLS che consumano. Cliccando su “Toogle” evidenzia l’elemento in questione. Nel mio caso, poiché il problema degli annunci Adsense era già stato risolto, ne appare solo uno.

Webpagetest

Un’altra pagina di misurazione dove può fare un test a webpagetest.org e può vedere i video e le gif animate che genera.

Mettere in pausa il video facilita la ricerca di piccoli spostamenti.

Se si osserva attentamente, le voci del menu, il titolo e i testi sono spostati un po’ a destra da quella che sembra essere una modifica della dimensione del carattere e/o della posizione, ma lo spazio pubblicitario sopra il titolo è già riservato, quindi non sposta il contenuto verso il basso. Il problema è stato risolto ridimensionando un po’ l’H1 e riordinando l’involucro del testo che lo accompagna.

Ma questo è un altro discorso, ora occupiamoci del comportamento degli annunci.

Soluzioni per la prenotazione di spazi per blocchi pubblicitari

Cercando la soluzione migliore e più rapida, ho scoperto che la soluzione migliore era aggiungere un valore minimo di altezza a un involucro (div) intorno a ciascuno dei blocchi pubblicitari, per riservare quello spazio ed evitare lo scorrimento dopo il caricamento

Tuttavia, sembra che non sia sufficiente utilizzare una classe per puntare a questa proprietà CSS, ma anche utilizzare un ID per il wrapper. Sembra che, per qualche motivo sconosciuto, Google AdSense JavaScript rimuova le direttive di altezza minima da qualsiasi oggetto genitore. Tuttavia, non vengono rimossi se utilizza un ID per il targeting CSS.

Questo è spiegato qui riassunto e in qualche modo più dettagliato nella documentazione di Google. Poiché ho trovato questa soluzione una seccatura, in quanto dovevo controllare tutti i blocchi, ho continuato a cercare un’alternativa fino a quando non ho trovato quella che funzionava, che era Inseritore di annunci. Questi erano i passaggi.

Cambiare gli annunci adattivi in dimensioni fisse

La prima cosa da fare è stata smettere di utilizzare i blocchi pubblicitari adattivi. Ho cambiato tutti i blocchi in dimensioni fisse

Per questa decisione deve studiare e valutare il suo caso specifico.

Sebbene Google sostenga che quelli adattivi generano maggiori entrate (ovviamente per la possibilità di mostrare dimensioni diverse), questo è piuttosto elastico e può variare in base a diversi scenari. Se opta per le taglie più popolari, si troverà sempre a mostrare annunci pubblicitari.

Disabilita l’ottimizzazione delle dimensioni

Sebbene i blocchi debbano avere una dimensione fissa, è meglio disabilitare l’opzione che consente a Google di decidere autonomamente la dimensione degli annunci per cellulari. Questa opzione si trova nell’amministrazione di Adsense alla voce Annunci/Impostazioni globali.

In questo modo evitiamo sorprese nel caso in cui ci sia sfuggito un annuncio che abbiamo inserito a mano. In ogni caso, il fatto che siano di dimensioni fisse non significa che non siano più reattivi.

Riservare uno spazio per gli annunci con Ad Inserter

Ad Inserter è, a mio avviso, il miglior plugin per la gestione degli annunci, che può essere utilizzato anche per aggiungere altri contenuti

Per riservare lo spazio per ogni annuncio, basta andare su “Visualizzazione” e definire la larghezza e l’altezza di ogni blocco.

Se utilizza su versione PROpuò anche controllare il Lazy Load, che tende anche ad alleviare un po’ di più il CLS.

Alcune considerazioni

Laprenotazione dello spazio per Adsense ha i suoi inconvenienti, quando gli annunci non possono essere visualizzati perché non sono serviti in quella dimensione o non ci sono inserzionisti per il suo sito ad un certo punto, può ottenere uno spazio vuoto della dimensione dello spazio riservato.

In Ad Inserter, solo per gli inserimenti lato server , può impostare l’altezza direttamente con il codice CSS personalizzatoo .

Si noti che l’altezza dell’annuncio è definita dal codice dell’annuncio. Il codice per gli annunci adattivi può impostare l’altezza dell’annuncio in base allo spazio disponibile

Alcune reti pubblicitarie (come AdSense) possono anche servire annunci più piccoli dello spazio disponibile. L’altezza del blocco, come definita in Ad Inserter, è l’altezza del blocco inserito, cioè l’altezza del div che lo avvolge. Questo è lo spazio riservato all’annuncio. Quando lo prenota, può accadere quanto segue:

1. Se l’altezza dell’annuncio è uguale all’altezza dello spazio riservato (altezza del blocco), non ci sarà alcuna modifica del layout e non influirà sul CLS.
2. Se l’altezza della pubblicità è superiore all’altezza dello spazio riservato (altezza del blocco), il disegno può essere spostato verso il basso per accogliere la pubblicità e influenzare il CLS.
3. Se l’altezza dell’annuncio è inferiore all’altezza dello spazio riservato (altezza del blocco), si otterrà uno spazio vuoto sotto l’annuncio, ma il layout non cambierà e non influirà sul CLS.

Alcuni codici degli annunci, come il codice degli annunci adattivi di AdSense, possono sovrascrivere l’altezza dei contenitori principali. In questo caso, l’altezza del blocco verrà sovrascritta e non verrà applicata

In breve, nel caso di un’urgente necessità di risolvere i problemi di CLS riducendo al minimo le modifiche al layout, l’opzione più rapida è quella di utilizzare dimensioni fisse degli annunci, ove possibile.

E già che c’è, può assicurarsi di non avere dimensioni mancanti nelle immagini; anche questo può essere risolto in diversi modi. Alcuni modi semplici e veloci sono quelli di utilizzare Perfmatters o WP Rocket (entrambi a pagamento).

Oppure il plugin Cache Litespeed se ospita il suo blog su un server Litespeed.

Se tutto va bene, vedrà il calo del CLS nei rapporti sul campo in poche ore e in pochi giorni nei rapporti di laboratorio PageSpeed Insights.