Correggi Shopify CLS: 6 correzioni comprovate per il cambio di layout (2026)

Cos'è CLS e perché è importante per Shopify?

Cumulative Layout Shift (CLS) è uno dei tre di Google Core Web Vitals : le metriche che influenzano direttamente il posizionamento nelle ricerche e misurano l'esperienza utente reale. Mentre LCP measures how fast content loads e INP measures interactivity, misure CLS visual stability : se gli elementi sulla tua pagina rimangono fermi o saltano in giro inaspettatamente.

Immagina questo: un cliente sta per toccare "Aggiungi al carrello" sulla pagina del tuo prodotto quando improvvisamente un widget di recensione viene caricato sopra, premendo il pulsante verso il basso. Toccano accidentalmente un collegamento diverso e lasciano il tuo negozio. Questo è un problema di CLS e ti costa entrate reali.

CLS is calculated by multiplying the impact fraction (quanta area di visualizzazione è stata spostata) da distance fraction (how far elements moved). Il punteggio è senza unità, non misurato in secondi o millisecondi come LCP e INP.

Perché CLS è importante per il tuo negozio Shopify:

• Classifiche SEO: Google utilizza CLS come segnale di ranking: un CLS scarso significa posizioni di ricerca inferiori
• Conversioni: I cambiamenti di layout causano clic errati che frustrano i clienti e aumentano la frequenza di rimbalzo
• Fiducia degli utenti: Le pagine che saltano sembrano rotte e non lucidate
• Impatto mobile: Il CLS è in genere peggiore sui dispositivi mobili dove gli schermi sono più piccoli e i cambiamenti sono più evidenti

La buona notizia? A differenza di LCP, che dipende in parte dall'infrastruttura server di Shopify, CLS è quasi interamente sotto il tuo controllo. La maggior parte delle correzioni CLS implicano modifiche CSS e attributi HTML corretti: non sono necessari aggiornamenti del server. Secondo un'analisi dell'archivio HTTP del 2026, il 38% dei negozi Shopify ha ancora un CLS "scadente" sui dispositivi mobili, quindi correggere il tuo ti mette davanti alla concorrenza. Vuoi controllare il tuo attuale punteggio CLS? Esegui uno speed test gratuito sul tuo negozio e confrontalo con Benchmark di velocità di Shopify.

La soluzione semplice: ottimizzazione CLS automatica

Prima di immergerci nelle modifiche manuali del tema: esiste un approccio più rapido. Thunder Page Speed Optimizer risolve automaticamente molte delle cause più comuni di CLS elevato nei negozi Shopify.

Come misurare il punteggio CLS del tuo negozio Shopify

Prima di correggere il CLS, devi conoscere il tuo punteggio attuale e identificare esattamente quali elementi stanno cambiando. Ecco gli strumenti migliori per i negozi Shopify:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('CLS shift:', entry.value.toFixed(4));
      for (const source of entry.sources) {
        console.log('  Element:', source.node);
      }
    }
  }
}).observe({ type: "layout-shift", buffered: true });

Correzione n. 1: aggiungi dimensioni a tutte le immagini

Le immagini senza attributi espliciti di larghezza e altezza sono le #1 cause of CLS, che rappresenta circa il 60% di tutti i problemi di spostamento del layout. Quando il browser esegue per la prima volta il rendering della tua pagina, non sa quanto sarà alta l'immagine, quindi viene visualizzata con altezza zero. Quando l'immagine viene caricata, tutto ciò che sta sotto salta giù.

Il problema

Molti temi Shopify producono immagini senza dimensioni, in particolare nelle griglie dei prodotti, nelle pagine delle collezioni e nelle immagini in primo piano dei post di blog. Il browser alloca zero spazio, quindi sposta il contenuto quando arrivano le immagini.

La correzione: attributi larghezza e altezza

Aggiungi larghezza e altezza Attributi attribuisce a ogni Etichetta Tag . Questo indica al browser le proporzioni in modo che possa riservare lo spazio corretto prima che l'immagine venga caricata:

Quindi nel tuo CSS, assicurati che le immagini si ridimensionino in modo reattivo senza interrompere le proporzioni:

img {
  max-width: 100%;
  height: auto;
}

Shopify Liquid: utilizza image_tag

Se stai modificando file Liquid del tema, l'approccio più semplice è utilizzare Shopify tag_immagine Il filtro , che aggiunge automaticamente gli attributi larghezza e altezza:

{{ product.featured_image | image_url: width: 800 | image_tag }}

Questo restituisce un Tag tag with proper width, height, and srcset attributes — eliminating CLS from product images automatically.

Alternativa: proporzioni CSS

Per i contenitori di immagini in cui desideri proporzioni fisse indipendentemente dalle dimensioni effettive dell'immagine (come le griglie dei prodotti), utilizza il CSS Proporzioni Proprietà :

.product-card__image {
  aspect-ratio: 1 / 1;  /* Square */
  width: 100%;
  object-fit: cover;
}

Ciò è particolarmente utile per le griglie di raccolta in cui si desidera un'altezza uniforme delle carte: il browser riserva spazio per le proporzioni esatte e adattamento all'oggetto: copertura ritaglia l'immagine per adattarla.

Correzione n. 2: riservare spazio per i contenuti inseriti nell'app

Le app di Shopify che inseriscono contenuti nella tua vetrina (recensioni, badge di fiducia, barre degli annunci, icone di pagamento, contatori di inventario) sono la seconda causa principale di CLS. Queste app vengono caricate tramite JavaScript, il che significa che viene visualizzato il loro contenuto dopo la pagina è già stata renderizzata. Quando il contenuto appare, tutto intorno ad esso cambia.

Blocchi app: utilizza l'altezza minima

Per le app che utilizzano Estensioni app temi (blocchi app), puoi impostare un'altezza minima sul contenitore utilizzando CSS personalizzato nell'editor del tema. Seleziona la sezione principale del blocco dell'app, quindi aggiungi:

/* Reserve space for app block content */
.shopify-app-block {
  min-height: 24px; /* Adjust to match your app's rendered height */
}

Misura l'altezza effettiva resa del contenuto dell'app (usa DevTools → ispeziona l'elemento → controlla l'altezza), quindi imposta altezza minima a quel valore. Anche se l'altezza esatta varia, l'impostazione di un minimo vicino riduce significativamente la distanza di spostamento.

Script non-App-Block: soluzioni alternative CSS

Alcune app inseriscono ancora contenuti tramite la vecchia API ScriptTag (non blocchi di app). Questi sono più difficili da risolvere. Dovrai identificare il selettore dell'elemento iniettato e riservare spazio con CSS. Ad esempio, se un widget di recensione viene inserito sopra la descrizione del prodotto:

/* Reserve space for a review widget that loads late */
:not(.review-widget-wrapper) + .product__description {
  margin-top: 80px; /* Height of the review widget */
}

Questo approccio è fragile: se l'app cambia la sua struttura HTML o sposti il widget, il CSS si interrompe. Un'alternativa più gestibile: spostare il contenuto dell'app sotto la piega dove i turni hanno un impatto minore su CLS o passa a un'app che supporta i blocchi delle app.

Barre e banner di annunci

Le barre degli annunci visualizzate nella parte superiore della pagina sono una classica fonte CLS. Quando si caricano in ritardo, ogni elemento della pagina si sposta verso il basso. Due approcci:

• Rendering lato server: Utilizza la barra degli annunci integrata del tuo tema (renderizzata in Liquid, non in JavaScript) invece di un'app di terze parti
• Prenota il posto: Aggiungi un segnaposto ad altezza fissa nell'intestazione del tuo tema che corrisponda all'altezza del banner

/* Reserve 40px for announcement bar */
.header-wrapper {
  padding-top: 40px;
}

Correzione n. 3: ottimizza il caricamento dei caratteri Web per prevenire CLS

I caratteri Web causano CLS attraverso un fenomeno chiamato FOUT (Flash di testo senza stile). Quando il carattere personalizzato non è stato ancora caricato, il browser visualizza il testo in un carattere di sistema di fallback. Quando arriva il carattere personalizzato, il testo viene nuovamente visualizzato e poiché i due caratteri hanno metriche diverse (larghezza del carattere, altezza della riga, spaziatura delle lettere), il testo si sposta, spostando il contenuto circostante.

Passaggio 1: utilizzare font-display: swap (o opzionale)

Nel tuo @font-face dichiarazioni, impostate visualizzazione carattere: scambia per mostrare immediatamente il testo di riserva, quindi passare al carattere personalizzato quando è pronto:

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

Per CLS minimo, visualizzazione dei caratteri: opzionale è ancora migliore: utilizza il carattere personalizzato solo se viene caricato entro ~ 100 ms, altrimenti mantiene il fallback. Nessuno scambio di caratteri significa niente CLS, ma il tuo carattere personalizzato potrebbe non essere visualizzato su connessioni lente.

Passaggio 2: precaricare i caratteri critici

Aggiungi suggerimenti di precaricamento per i file di font più importanti nel tuo tema <head>:

<link rel="preload" href="/fonts/brand-font.woff2" as="font" type="font/woff2" crossorigin>

Precarica solo 1–2 caratteri (l'intestazione principale e il carattere del corpo). Precaricare troppi caratteri spreca larghezza di banda e può rallentare altre risorse critiche.

Passaggio 3: corrisponde alle metriche dei caratteri di fallback

Il CSS regolazione della dimensione, esclusione salitae esclusione discesa Le proprietà ti consentono di modificare il tuo carattere di fallback per adattarlo alle metriche del tuo carattere personalizzato, riducendo al minimo lo spostamento quando avviene lo scambio:

@font-face {
  font-family: 'BrandFallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Strumenti come Generatore di caratteri di riserva può calcolare questi valori di sostituzione per i tuoi caratteri specifici. Questa è una delle soluzioni CLS di maggior impatto per i temi Shopify ricchi di caratteri. Per un approfondimento sulle prestazioni dei caratteri, consulta il nostro guida completa all'ottimizzazione della velocità di Shopify.

Correzione n. 4: prevenire spostamenti CSS che arrivano in ritardo

Quando i CSS vengono caricati dopo che la pagina ha già iniziato il rendering, il browser ricalcola i layout, provocando il salto del contenuto quando vengono applicati nuovi stili. Ciò accade comunemente con:

• File CSS caricati tramite @import all'interno di altri file CSS (caricamento concatenato)
• Fogli di stile di app di terze parti che vengono caricati in modo asincrono
• Stili inseriti in JavaScript (comuni con i componenti React/Vue nei temi)

La soluzione: CSS critico in linea

Incorpora il CSS necessario per i contenuti sopra la piega direttamente nel tuo file <head>. This ensures the browser has all the styles it needs for the initial render — no shifts from late-arriving stylesheets.

L'estrazione e l'integrazione manuale di CSS critici è complessa e soggetta a errori. È qui che Thunder brilla: identifica e incorpora automaticamente i CSS critici per ogni tipo di pagina, quindi rinvia il resto. Il risultato: zero spostamenti di layout legati ai CSS senza alcun lavoro manuale.

Evita CSS @import

Se il tuo tema o le tue app utilizzano @import all'interno dei file CSS, sostituiscili con Tag Tag nell'HTML. @import crea una cascata: il browser scarica i CSS, rileva l'importazione, quindi scarica altro CSS. Ogni passaggio rischia di ricalcolare e spostare il layout. Scopri di più su correzione delle risorse che bloccano la visualizzazione su Shopify.

Correzione n. 5: utilizzare trasformazioni CSS anziché animazioni con attivazione del layout

Animazioni che modificano un elemento in alto, sinistra, larghezza, altezza Attributi, margine, o imbottitura attiva i ricalcoli del layout che contano come CLS. Invece, usa trasformazione e opacità : sono gestiti dal compositore GPU e non causano spostamenti del layout.

.slide-in {
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

.slide-in {
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

Controlla il CSS del tuo tema per eventuali animazioni utilizzando le proprietà di attivazione del layout. Colpevoli comuni: barre degli annunci slide-in, menu di navigazione in espansione ed effetti di zoom delle immagini dei prodotti. Controlla anche qualsiasi script di terze parti che aggiungono effetti di animazione.

Correzione n. 6: stabilizzazione di presentazioni e caroselli

Le presentazioni di eroi e i caroselli di prodotti sono una fonte frequente di CLS. Il JavaScript del carosello si inizializza dopo il caricamento della pagina, calcola le dimensioni della diapositiva e riorganizza gli elementi, causando spesso spostamenti visibili.

Prenota l'altezza della presentazione

Imposta proporzioni fisse o altezza minima sul contenitore della presentazione in modo che il browser riservi lo spazio corretto prima dell'inizializzazione di JavaScript:

.slideshow-container {
  aspect-ratio: 16 / 9;  /* Or your preferred ratio */
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5; /* Prevent flash of empty space */
}

Renderizza la prima diapositiva lato server

La maggior parte dei temi Shopify moderni (come Dawn) rendono la prima diapositiva in Liquid in modo che venga visualizzata immediatamente, quindi JavaScript prende il posto delle transizioni. Se il tuo tema esegue il rendering delle diapositive solo tramite JavaScript, considera la ristrutturazione per mostrare la prima diapositiva in HTML/Liquid: questo elimina completamente lo spostamento iniziale.

Valuta la possibilità di rimuovere completamente la presentazione. Numerosi studi dimostrano che le presentazioni di eroi spesso hanno prestazioni inferiori a una singola immagine statica di eroi sia in termini di conversioni che di prestazioni. Se la tua presentazione causa problemi ostinati al CLS, un eroe statico ben progettato può effettivamente migliorare entrambi i tuoi Frequenza di rimbalzo e i tuoi Core Web Vitals. Per ulteriori informazioni sull'ottimizzazione delle immagini degli eroi, consulta la nostra Guida all'ottimizzazione delle immagini di Shopify. Aumenta anche il CLS alto frequenze di rimbalzo, che ti costa le entrate.

Correzioni manuali CLS rispetto a Thunder: confronto affiancato

Ecco come si confronta l'approccio manuale con il lasciare che Thunder gestisca automaticamente l'ottimizzazione CLS:

Le correzioni manuali ti danno il pieno controllo ma richiedono una manutenzione continua. Thunder gestisce automaticamente le ottimizzazioni di maggior impatto e si adatta ai cambiamenti del tuo negozio. Molti commercianti combinano entrambe le cose: installa Thunder per il lavoro pesante, quindi applica correzioni manuali per problemi specifici del tema. Vedi i piani tariffari Thunder.

Domande frequenti