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 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 Vitals documentazione, 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
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,
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
Visualizzatore CLS Questo strumento, essendo uno dei più semplici, è quello che mi ha permesso di cogliere meglio i turni.
Visualizzatore CLS
L'icona del demone aveva uno spostamento della posizione del blocco che la conteneva, impercettibile nella navigazione. 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.
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
Con un'estensione del browser In Chrome può installare il file CLS Checker - Viaggio più lungo
Webpagetest Un'altra pagina di misurazione dove può fare un test a webpagetest.org
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 più dettagliato Inseritore di annunci
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 PRO
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 personalizzato o
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:
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. 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. 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 WP Rocket
Oppure il plugin Cache 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
