TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come risolvere lo spostamento cumulativo del layout in WordPress?

130

Google spinge i webmaster ad attuare tutte le misure necessarie per migliorare la velocità di caricamento della pagina. La velocità di caricamento della pagina del tuo sito web viene misurata in base a pochi parametri, come puoi vedere nello strumento Google PageSpeed ​​Insights. Cumulative Layout Shift (CLS) è uno dei criteri di misurazione della velocità di Core Web Vital. Questo è un fattore importante non solo per migliorare la velocità ma anche per una migliore esperienza utente. In questo articolo, spiegheremo vari motivi per il problema CLS e come correggere l’errore cumulativo di spostamento del layout in WordPress.

Che cos’è lo spostamento cumulativo del layout?

Prima di leggere oltre, è necessario capire cos’è CLS. In parole povere, si tratta di uno spostamento nel layout dei contenuti che causa una scarsa esperienza utente. Ad esempio, stai per fare clic su un pulsante in una pagina e improvvisamente un’immagine banner si carica sopra e spinge il pulsante verso il basso. Alla fine, finirai per fare clic involontariamente sull’immagine, il che potrebbe portarti a un’altra pagina. Questa è un’esperienza utente molto negativa e Google ha una buona spiegazione in questo articolo che puoi leggere ulteriormente.

Correlati: come abilitare il caricamento lento delle immagini in Google Chrome?

Verifica dell’errore di spostamento del layout cumulativo

Apri lo strumento Google PageSpeed ​​Insights (PSI) e controlla la velocità della tua pagina web. Puoi controllare i dati del campo o il riepilogo dell’origine per confermare che il problema di spostamento del layout cumulativo è presente sul tuo sito. Puoi passare il mouse sopra la barra di avanzamento per trovare la percentuale cumulativa di caricamento in cui si verifica il problema nella pagina/sito.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Verifica problema CLS in PSI

Per trovare gli elementi che causano problemi, scorri verso il basso fino alla sezione di diagnostica e controlla in "Evita grandi cambiamenti di layout". Qui, Google mostrerà l’elenco degli elementi che causano il cambiamento di layout nella pagina testata.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Evita grandi spostamenti di layout

Controlla i dettagli in Google Search Console

Puoi visualizzare gli URL delle pagine con problemi CLS nel tuo account Google Search Console. Dopo aver effettuato l’accesso al tuo account, vai alla sezione "Core Web Vitals" nella sezione "Miglioramenti". Puoi trovare i report sia per dispositivi mobili che desktop per visualizzare le pagine con "Problema CLS: più di 0,25 (mobile) / (desktop)".

Come risolvere lo spostamento cumulativo del layout in WordPress?

Problema CLS in Google Search Console

Fai clic sul problema per visualizzare l’URL di esempio sul tuo sito interessato dal problema CLS e il tempo medio di CLS. Google considererà CLS un problema secondo la tabella seguente:

Bene Ha bisogno di miglioramento Povero
<0.1s da 0,1 a 0,25 s >0.25s

Pertanto, devi mirare a ridurre il tempo CLS a meno di 0,25 secondi per rendere questo strumento verde/giallo nello strumento PSI e rimuovere gli errori dal tuo account Search Console.

Correggi l’errore di spostamento del layout cumulativo in WordPress

Ecco alcuni dei fattori che possono causare un ritardo cumulativo di spostamento del layout nel sito WordPress. Cerchiamo di spiegare ogni problema e le possibili soluzioni in dettaglio.

1 Ottimizzazione della consegna CSS

Come puoi vedere nella schermata sopra di "Evita grandi spostamenti di layout", il primo elemento è "<div class="row footer-row">". Ciò è sorprendente in quanto non è possibile caricare la sezione del piè di pagina nell’area above the fold. Dopo aver verificato, abbiamo capito che ciò è dovuto all’opzione "Ottimizza consegna CSS" abilitata con il plug-in WP Rocket. Questa opzione genererà un CSS critico e lo inlineerà nella sezione dell’intestazione per rimuovere il CSS che blocca il rendering. Tuttavia, in molti casi porterà a problemi di spostamento del layout cumulativo. Se stai utilizzando WP Rocket o qualsiasi altro plug-in di memorizzazione nella cache per inserire CSS nell’intestazione, disabilita tale opzione e verifica se aiuta a migliorare il ritardo CLS.

2 AdSense e altri script pubblicitari in ATF

Molti publisher utilizzano Google AdSense o altre reti pubblicitarie per monetizzare i propri contenuti online. Devi inserire un pezzo di codice dell’annuncio JavaScript sulla tua pagina web per mostrare gli annunci. In genere, è necessario inserire il codice dell’annuncio nell’area above the fold (ATF) per aumentare la visibilità e le entrate dell’annuncio. Tuttavia, ciò influenzerà direttamente la velocità di caricamento della pagina e creerà un errore cumulativo di spostamento del layout nello strumento Google PageSpeed ​​Insight (PSI).

Dopo aver caricato completamente il contenuto above the fold, il tuo annuncio inizierà a caricare e spingere il contenuto verso il basso.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Modifica del layout a causa della pubblicità

Ci sono poche opzioni per risolvere questo problema. Uno è rinviare lo script dell’annuncio in WordPress utilizzando plugin come WP Rocket. Tuttavia, ciò influirà sull’impressione dell’annuncio e sulla percentuale di clic, riducendo così le entrate complessive.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Ritarda l’esecuzione di JavaScript della pubblicità

La seconda opzione consiste nell’utilizzare annunci a larghezza fissa nell’area above the fold come consigliato da Google. Sfortunatamente, Google chiarisce anche che l’utilizzo di una larghezza fissa non è possibile con annunci reattivi o fluidi.

Non è possibile riservare spazio per queste aree prima di richiedere il contenuto dell’annuncio e gli annunci di dimensioni fluide causano sempre modifiche al layout. Per mitigare gli effetti dei cambiamenti di layout quando si lavora con aree annuncio fluide, si consiglia quanto segue: Utilizzare solo le dimensioni fluide per le aree below the fold.

Google

Pertanto, in sintesi, non è possibile risolvere il problema a meno che non si rimuova il codice dell’annuncio esterno dall’area ATF. Questo è vero per qualsiasi altro codice di terze parti che hai inserito nella sezione dell’intestazione del tuo sito.

3 Utilizzare le dimensioni dell’immagine corrette

Questo è simile all’utilizzo di fix con annunci pubblicitari. Quando non hai le dimensioni dell’immagine, i browser attenderanno il caricamento delle immagini e spingeranno il contenuto sottostante causando problemi di spostamento del layout. Fortunatamente, questo non è un problema poiché WordPress aggiungerà automaticamente le dimensioni alle immagini durante il caricamento tramite l’editor di post. Tuttavia, è necessario aggiungere manualmente i parametri di altezza e larghezza al tag img se si inseriscono manualmente immagini utilizzando il blocco "HTML personalizzato", la funzione "Modifica come HTML" o l’immagine del logo. Inoltre, definire larghezza e altezza fisse quando si incorporano video e iframe da siti Web di terze parti.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Larghezza e altezza mancanti per l’immagine

4 caratteri che ritardano il caricamento dei contenuti

Ogni sito web utilizza i caratteri. Ciò creerà un problema di spostamento del layout cumulativo soprattutto quando si utilizzano servizi di terze parti come i caratteri di Google. Poiché i caratteri di Google devono essere caricati da server esterni, creerà un problema di spostamento del layout cumulativo simile come il codice degli annunci. Puoi anche vedere questo problema in PSI come "Assicurati che il testo rimanga visibile durante il caricamento del carattere web" indicando che c’è un ritardo nel caricamento del contenuto visibile.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Problema di carattere

  • Il modo efficace per risolvere questo problema consiste nell’utilizzare un plug-in di memorizzazione nella cache per la preconnessione e il prelettura DNS di domini come fonts.googleapis.com e fonts.gistatic.com. Questo ti aiuterà a velocizzare il caricamento dei caratteri preconnettendo il server dei caratteri di Google. SG Optimizer, WP Rocket (automatico) e molti altri plugin offrono questa funzione che puoi utilizzare per questo scopo. Inoltre, puoi limitare il numero di famiglie di caratteri e gli spessori riducono la dimensione del file di download.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Ottimizzazione dei caratteri web di SG Optimizer

5 icone dei caratteri nel menu e ATF

Molti temi di WordPress utilizzano le icone dei caratteri nell’area di navigazione per mostrare gli elementi del sottomenu. Generalmente, queste icone sono incluse da siti Web di terze parti come font awesome o icomoon. Ciò creerà problemi simili come i caratteri e aumenterà il tempo di spostamento del layout cumulativo. Temi come GeneratePress ti consentono di scegliere le icone SVG invece dei caratteri per il menu di navigazione. Allo stesso modo, sul tema Astra puoi disabilitare il caricamento della libreria dei font utilizzando una funzione personalizzata. In questo modo puoi migliorare il problema dello spostamento cumulativo del layout in WordPress. Tuttavia, non avrai altra scelta che disabilitare le voci del sottomenu nella maggior parte degli altri temi, il che non è una buona soluzione.

6 Logo di caricamento pigro dell’immagine

I webmaster fraintendono l’avviso PSI su "Rimanda immagini fuori schermo". Questo avviso si verifica quando non carichi lentamente le immagini disponibili nel contenuto below the fold (BTF). Tuttavia, se utilizzi un plugin in WordPress, tutte le immagini con HTML

Per ridurre il tempo CLS nello strumento PSI, è necessario escludere l’immagine del logo dal caricamento lento. La soluzione dipende dal plugin che usi per il caricamento lento delle tue immagini. Ad esempio in WP Rocket, vai alla sezione "Media > LazyLoad" e fornisci il nome del logo o l’URL da escludere dal caricamento lento.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Escludi il logo dal caricamento pigro

7 Lazy Loading Image Sliders in ATF

Simile al logo dell’immagine, vedrai un tempo di spostamento del layout cumulativo elevato quando hai dispositivi di scorrimento dell’immagine nell’area above the fold. Puoi escludere le immagini del dispositivo di scorrimento dal caricamento lento e testare che aiuta a ridurre il tempo CLS.

Correlati: 25 consigli SEO per classificare il tuo sito WordPress.

8 Render che blocca JavaScript come jQuery

L’argomento finale è il popolare JavaScript che blocca il rendering a causa di temi basati su jQuery. Infatti, WordPress include anche jQuery come parte della cartella wp-includes. Puoi rinviare jQuery e altri script di blocco del rendering sulla tua pagina utilizzando un plug-in di memorizzazione nella cache come W3 Total Cache. Tuttavia, assicurati di testare accuratamente il tuo sito per evitare layout rotti.

Convalida della correzione in Google Search Console

Dopo aver risolto il problema, assicurati di inviare le tue convalide nell’account Google Search Console. Puoi tornare alla sezione "Core Web Vitals" e inviare convalide per l’intero sito.

Come risolvere lo spostamento cumulativo del layout in WordPress?

Convalida del problema CLS in Google Search Console

Google impiegherà fino a 28 giorni per verificare il problema CLS sul tuo sito e mostrare i risultati corrispondenti nell’account Search Console.

Conclusione

Come puoi vedere, il motivo principale dell’errore cumulativo di spostamento del layout in WordPress è dovuto al posizionamento di script di blocco del rendering nell’area del contenuto above the fold. Potrebbero essere codici pubblicitari, jQuery, caratteri, icone o qualsiasi altra cosa. La soluzione per superare questo problema è utilizzare semplici temi minimalisti come GeneratePress o Astra. D’altra parte, puoi utilizzare i plug-in di memorizzazione nella cache per preconnetterti e combinare i file di caratteri per ridurre il tempo di spostamento del layout cumulativo.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More