Shopify Evita grandi spostamenti del layout: trova e correggi gli elementi in movimento

Perché su Shopify si verificano grandi cambiamenti nel layout

Google's CLS guidance defines layout shift as visible content moving from one rendered frame to the next. Lighthouse's "Avoid large layout shifts" diagnostic lists affected elements, but those elements are not always the root cause. If a discount bar appears above the product title, Lighthouse may report the product title as shifted even though the bar caused the movement.

I negozi Shopify sono vulnerabili perché molte parti della pagina sono dinamiche: barre degli annunci, incorporamenti di app, banner di consenso, stelle delle recensioni, media dei prodotti, selettori di varianti, intestazioni fisse, cassetti del carrello, filtri di raccolta, blocchi di consigli e caratteri. Ognuno può caricarsi dopo la prima verniciatura e spingere il contenuto.

Se il tuo negozio non riesce a raggiungere l'attuale Core Web Vital, inizia da quello più profondo Guida alla correzione di Shopify CLS. Questo articolo si concentra sulla diagnostica di PageSpeed ​​e sui modelli pratici di temi che solitamente la causano.

Manuale passo passo: correzione per evitare grandi cambiamenti di layout su Shopify

1. Identificare l'elemento spostato e la causa sopra di esso

In PageSpeed Insights, espandi la diagnostica e prendi nota degli elementi spostati. Quindi apri Chrome DevTools, registra una traccia delle prestazioni sulla limitazione dei dispositivi mobili e guarda la traccia del cambio di layout. Guarda sopra l'elemento spostato per verificare la presenza di contenuti in ritardo, contenuti multimediali ridimensionati, widget inseriti o modifiche ai caratteri.

Testa i modelli che contano dal punto di vista commerciale: home page, pagine dei prodotti più venduti, collezioni principali e pagine di destinazione. Abbinalo a Dashboard delle prestazioni Web di Shopify in modo da non ottimizzare un'esecuzione di laboratorio mentre i dati sul campo continuano a fallire.

2. Prenota spazio per immagini e video

Le dimensioni mancanti dell'immagine sono la soluzione più comune. Utilizza larghezza e altezza esplicite per le immagini grezze o riserva uno spazio di proporzioni attorno ai media dinamici. Ciò protegge le griglie dei prodotti, i lookbook, i riquadri della home page e le miniature degli articoli.

.media-slot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6f6f6;
}

.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Se PageSpeed segnala specificamente le dimensioni dell'immagine, utilizza il file Guida alla larghezza e all'altezza dell'immagine Shopify.

3. Assegna ai widget dell'app un segnaposto prima che vengano caricati

Stelle di revisione, blocchi fedeltà, consigli e lanciatori di chat spesso si caricano dopo che il tema è stato dipinto. Se il widget appare nella prima finestra, riserva lo spazio nel tema in modo che il contenuto sottostante non salti.

<div class="reviews-summary-slot" data-reviews-summary>
  <!-- Review app injects stars here -->
</div>

.reviews-summary-slot {
  min-height: 32px;
  display: flex;
  align-items: center;
}

Per gli store ricchi di app, leggi App di Shopify che rallentano i negozi e correzione degli script delle app che rallentano Shopify.

4. Stabilizzare le barre degli annunci, delle promozioni e del consenso

A top bar that appears after JavaScript runs can push the entire page down. Render the slot server-side or reserve its height from the first paint. Do not inject it above the header after the page is already visible.

.announcement-slot {
  min-height: 40px;
}

@media (max-width: 749px) {
  .announcement-slot {
    min-height: 56px;
  }
}

5. Correggi gli scambi di caratteri che ridimensionano le intestazioni

Fonts can create layout shift when the fallback text takes different space from the final brand font. Use visualizzazione carattere: scambia, riduci le varianti dei caratteri e ottimizza le metriche di fallback quando necessario. Il guida allo scambio della visualizzazione dei caratteri e riduce la guida al caricamento dei caratteri tratta questo argomento in modo più approfondito.

6. Animazione con proprietà di trasformazione, non di layout

Evita l'animazione in alto, sinistra, altezza, margine, o imbottitura per effetti di ingresso. Tali proprietà ricalcolano il layout. Utilizzare trasformazione e opacità quando è necessario il movimento.

.promo-card {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.promo-card.is-visible {
  transform: translateY(0);
  opacity: 1;
}

Correzione manuale vs. Correzione Thunder

Come confermare che i grandi spostamenti di layout sono stati risolti

Ripeti il test con PageSpeed Insights e il Test di velocità Shopify gratuito. La diagnostica dell'ampio spostamento del layout dovrebbe ridursi e il CLS dovrebbe tendere verso 0,1 o inferiore. Osserva anche il caricamento della pagina mobile con limitazione. I tuoi occhi coglieranno i cambiamenti che un singolo punteggio di laboratorio può nascondere.

Se lo spostamento del layout è solo un problema, continua con guida completa all'ottimizzazione della velocità di Shopify, Ottimizzazione LCPe Correzioni Shopify INP. Per il lavoro pratico, confronta ottimizzazione della velocità professionale con automazione senza codice.

FAQ