Come correggere gli spostamenti del layout (CLS) su Divi ed Elementor

Search Console segnala «Problema relativo a CLS: più di 0,1 (dispositivi mobili)» su un gruppo di pagine. PageSpeed mostra un CLS vicino a zero sullo stesso URL. Lei scorre la pagina di persona e non vede nulla di evidente.

Lo scarto è normale: il laboratorio misura solo il caricamento, mentre i visitatori reali scorrono, toccano e aspettano i banner. La nostra guida sui dati di laboratorio e reali spiega perché. Qui l'obiettivo è cogliere lo spostamento e rimuoverne la causa.

Cogliere lo spostamento sul fatto

• DevTools, scheda Rendering, attivi Layout Shift Regions: ogni spostamento lampeggia in blu nel momento in cui avviene. Usi l'emulazione mobile e una rete rallentata, poi scorra tutta la pagina.
• Pannello Performance: registri un caricamento e uno scorrimento. La traccia «Layout shifts» elenca ogni spostamento e gli elementi che si sono mossi.

new PerformanceObserver(l => l.getEntries().forEach(e => {
  if (e.hadRecentInput) return;
  console.log(e.value.toFixed(3), e.sources?.map(s => s.node));
})).observe({ type: 'layout-shift', buffered: true });

Annoti l'elemento e il momento: al caricamento, quando compare un font, quando si apre un banner, durante lo scorrimento. Il momento indica la causa.

Le sei cause abituali su un sito fatto con un builder

1. Immagini senza dimensioni. Un modulo immagine che stampa un <img> senza width e height occupa un'altezza pari a zero finché il file non arriva, poi spinge giù tutto ciò che sta sotto. Soluzione: width e height su ogni immagine, così il browser può calcolarne le proporzioni; oppure un aspect-ratio sul contenitore.

2. Stili che arrivano dopo il primo rendering. I builder suddividono il loro CSS: un file globale, poi file per pagina o per layout. Se uno di questi si carica tardi, o viene differito da un'ottimizzazione, un elemento viene visualizzato una prima volta senza i suoi stili, poi scatta al suo posto. Un caso reale: su un sito Divi 5, un breadcrumb non aveva stili propri e prendeva la dimensione del font da un foglio di stile per layout che arrivava dopo il primo rendering. Andava a capo su quattro righe, poi si riduceva a una. CLS reale 0,215, invisibile in laboratorio. Dare al breadcrumb una dimensione del font e un'interlinea proprie negli stili critici inline lo ha portato sotto 0,02. Soluzione: le regole che definiscono le dimensioni di tutto ciò che si vede senza scorrere devono stare nel critical CSS.

3. Web font che si scambiano. Con font-display: swap, il testo compare prima in un font di ripiego, poi nel web font. Se i due hanno larghezze diverse, le righe vanno a capo diversamente e i blocchi cambiano altezza. Soluzione: precarichi l'uno o i due file di font usati nella parte visibile senza scorrere; scelga un font di ripiego con metriche vicine; oppure regoli il font di ripiego con size-adjust e ascent-override nel suo @font-face.

4. Header e banner aggiunti da script. Un header fisso il cui script aggiunge un padding alla pagina dopo averlo misurato; una barra superiore o un banner dei cookie inseriti sopra il contenuto invece di galleggiarvi sopra. Soluzione: dia alla pagina lo scostamento dell'header in CSS fin dall'inizio, e trasformi i banner in overlay (position: fixed) invece che in blocchi che spingono il contenuto.

5. Slider e caroselli prima dell'avvio. Prima che il suo script giri, uno slider mostra tutte le slide impilate, o nessuna, poi si riduce a una sola slide. Soluzione: un CSS per lo stato che precede lo script, con l'altezza finale riservata e tutte le slide nascoste tranne la prima.

6. Contenuti incorporati e iframe. Un video, una mappa o un post social che si carica senza una dimensione riservata. Soluzione: un contenitore con un aspect-ratio fisso, oppure un'anteprima leggera che ha già la dimensione finale.

Trappole specifiche dei builder

• Animazioni d'ingresso: le animazioni basate su transform e opacity non contano come spostamento del layout; quelle che cambiano height, margin o top sì. Preferisca le prime, ed eviti di animare ciò che si vede senza scorrere.
• Header mobile diverso: un header mobile più alto o più basso dello spazio riservato dalla pagina sposta tutto, ma solo sui telefoni.
• CSS del builder non aggiornato: dopo una modifica importante, rigeneri il CSS statico del builder. Un file troncato o superato può lasciare regole mancanti finché non viene ricostruito.
• Ottimizzazioni CSS: se al CSS ridotto o differito manca la regola che dimensiona un elemento, lo spostamento ritorna. Veda la nostra guida sugli stili mancanti.

Convalidare

• Ripeta lo scenario: mobile, rete rallentata, caricamento, scorrimento fino in fondo, apertura del menu. Nessun lampo blu nella parte visibile senza scorrere.
• Poi «Convalida correzione» in Search Console, e lasci passare i 28 giorni della finestra dei dati reali.

Con Mantys Core

In sintesi

• Il laboratorio vede raramente lo spostamento: lo colga nei DevTools mentre scorre e interagisce.
• Sei cause: immagini senza dimensioni, stili tardivi, scambi di font, header e banner aggiunti da script, slider prima dell'avvio, contenuti incorporati.
• Ogni soluzione riserva lo spazio prima che arrivi il contenuto.
• Sui builder, tenga d'occhio le animazioni, gli header mobile e il CSS del builder non aggiornato.
• Convalidi in Search Console e aspetti 28 giorni.