Guida Shopify Core Web Vitals: Correggi LCP, CLS e INP (2026)

1. Cosa sono i Core Web Vitals?

Core Web Vitals (CWV) sono un insieme di tre metriche specifiche che Google utilizza per misurare l'esperienza utente reale di una pagina web. Introdotto da Google nel 2020 e realizzato a segnale di classifica nel 2021, si concentrano su tre pilastri: prestazioni di caricamento, interattività e stabilità visiva.

These metrics are measured using real user data (called "field data") collected from Chrome users who visit your site. This is different from lab tests — Google cares about what actual visitors experience, not just what a testing tool reports.

2. Perché i Core Web Vitals sono importanti per i negozi Shopify

Impatto SEO

Google utilizza Core Web Vitals come segnale di ranking sin dal Aggiornamento dell'esperienza sulla pagina nel 2021. Sebbene la pertinenza dei contenuti e i backlink continuino a dominare le classifiche, CWV funge da spareggio. Se due pagine di prodotto sono ugualmente pertinenti per una query, quella più veloce con punteggi CWV migliori ha maggiori probabilità di posizionarsi più in alto.

Per le nicchie competitive di Shopify – moda, bellezza, integratori – questo tie-break può fare la differenza tra la prima e la seconda pagina. Comprensione come funziona il tuo punteggio di velocità Shopify ti aiuta a stabilire la priorità su quali metriche affrontare per prime.

Impatto sulla conversione

I miglioramenti del CWV sono direttamente correlati a migliori tassi di conversione. Gli studi mostrano costantemente:

• Una diminuzione di 100 ms dell'LCP può aumentare le conversioni fino all'1,3% (Caso di studio Vodafone)
• Ridurre CLS di 0,2 punti può ridurre la frequenza di rimbalzo del 15%
• Le pagine con buoni punteggi INP vedono tassi di aggiunta al carrello significativamente più alti

Per un negozio Shopify che guadagna $ 50.000 al mese, anche un miglioramento della conversione dell'1% si traduce in oltre $ 6.000 di entrate annuali aggiuntive. Per comprendere il quadro completo, leggi il nostro approfondimento su in che modo la velocità di Shopify influisce sulle conversioni.

Impatto aziendale nel mondo reale dei Core Web Vitals

Questi non sono numeri ipotetici. Le principali aziende hanno pubblicato i risultati aziendali dei miglioramenti apportati ai Core Web Vitals:

3. Come controllare i Core Web Vitals del tuo negozio Shopify

4. Problemi comuni di Core Web Vitals su Shopify

🎨 LCP elevato (caricamento lento)

Il problema CWV più comune su Shopify. Cause tipiche:

• Immagini di eroi grandi: Immagini PNG/JPEG non compresse di oltre 500 KB fornite senza formati moderni (WebP/AVIF)
• Script di blocco del rendering: Script di app di terze parti che vengono eseguiti prima del rendering del contenuto principale. Il negozio Shopify medio carica 15-25 script di app, molti dei quali bloccano
• Risposta lenta del server (TTFB): L'hosting condiviso di Shopify può avere tempi di risposta variabili, soprattutto durante i picchi di traffico
• Nessun precarico: Risorse critiche come immagini hero e caratteri non precaricati, che fanno sì che il browser li scopra in ritardo
• CSS eccessivo: File CSS di grandi dimensioni e non ottimizzati che ritardano il primo rendering

👆 INP scarso (interattività lenta)

I problemi INP sono quasi sempre causati da JavaScript che blocca il thread principale:

• Esecuzione JavaScript pesante: Script dell'app che eseguono operazioni costose a ogni caricamento della pagina
• App di terze parti che bloccano il thread principale: Widget di chat, app di revisione e strumenti di analisi spesso registrano ascoltatori di eventi che rallentano l'elaborazione dell'interazione
• Compiti lunghi: Any JavaScript task over 50ms blocks the browser from responding to user input
• Troppi ascoltatori di eventi: Più app che collegano ascoltatori agli stessi elementi (ad esempio, pulsanti aggiungi al carrello)

📐 Problemi CLS (cambiamenti di layout)

Instabilità visiva che frustra gli utenti:

• Immagini senza dimensioni: Quando Mancano gli attributi larghezza e altezza Attributi , il browser non può riservare spazio prima del caricamento dell'immagine
• Inserimento di contenuti dinamici: Banner, popup e barre di notifica che spingono verso il basso i contenuti dopo il rendering iniziale
• Caricamento dei caratteri (FOUT/FOIT): Caratteri personalizzati che causano il ridisposizione del testo al termine del caricamento
• Contenuti caricati pigramente sopra la piega: Contenuto che dovrebbe caricarsi immediatamente ma viene posticipato
• Elementi inseriti nell'app: Widget di revisione, badge di fiducia e caroselli di upsell che si caricano in modo asincrono e spostano i contenuti

5. Come risolvere LCP su Shopify

LCP è la metrica di maggior impatto da migliorare su Shopify. Per una procedura dettagliata dedicata, vedere il nostro Guida all'ottimizzazione di Shopify LCP. Ecco un approccio passo passo:

Passaggio 1: identifica il tuo elemento LCP

Apri PageSpeed Insights e osserva la diagnostica "Elemento Paint con contenuto più grande". Nella maggior parte dei negozi Shopify, l'elemento LCP è l'immagine hero sulla home page o l'immagine principale del prodotto sulle pagine dei prodotti.

Passaggio 2: ottimizzare l'immagine LCP

• Utilizza il CDN dell'immagine di Shopify: Shopify fornisce automaticamente le immagini tramite il proprio CDN. Aggiungi _800x.webp o utilizzare il Filtro url_immagine Filtro in Liquido per richiedere formati specifici e formati moderni
• Immagini della giusta dimensione: Non pubblicare un'immagine larga 3000 px per un contenitore da 800 px. Usa quelli liquidi | url_immagine: larghezza: 800 Filtro
• Precarica l'immagine LCP: Aggiungi un suggerimento di precaricamento nel tuo tema tema.liquid:
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 800 }}" fetchpriority="high">
• Aggiungi fetchpriority="alta": Sull'immagine del tuo eroe Tag Tag , aggiungi questo attributo per dire al browser di dargli la priorità
• Non caricare lentamente l'immagine LCP: Rimuovi caricamento="pigro" dall'immagine del tuo eroe/prodotto. Scopri di più su corretta implementazione del caricamento lento

Passaggio 3: ridurre le risorse che bloccano il rendering

• Rinvia JavaScript non critico: Aggiungi differire o asincrono Attributi per creare script di tag non necessari per il rendering iniziale
• Controlla gli script dell'app: Utilizza la scheda Rete di Chrome DevTools filtrata su JS: identifica quali script dell'app vengono caricati in modo sincrono e ritarda il rendering. Prendi in considerazione la rimozione delle app inutilizzate o la ricerca di alternative più leggere
• CSS critico in linea: Estrai il CSS necessario per i contenuti sopra la piega e incorporalo nel file <head>

Passaggio 4: migliorare il tempo di risposta del server

• Riduci la complessità del liquido: I cicli profondamente nidificati e la complessa logica Liquid aumentano il tempo di rendering lato server
• Riduci al minimo i reindirizzamenti: Ciascuno Reindirizzamento 301 aggiunge 100-300 ms. Evita reindirizzamenti URL non necessari
• Utilizza il CDN di Shopify in modo efficace: Ensure static assets are served from Shopify's CDN, not third-party servers
• Scegli un tema base veloce: Il tuo tema è la base: consulta il nostro elenco dei Temi Shopify più veloci Guida per il 2026

Non sei sicuro se affrontare LCP da solo o assumere un aiuto? Leggi il nostro confronto di Ottimizzazione della velocità fai-da-te vs esperto per decidere cosa è giusto per il tuo negozio.

6. Come correggere INP su Shopify

INP misura la peggiore reattività dell'interazione durante la visita di un utente. Ecco come migliorarlo:

Passaggio 1: identificare le attività lunghe

Apri Chrome DevTools → scheda Prestazioni → registra il caricamento di una pagina e interagisci con la pagina. Cerca attività lunghe (contrassegnate con angoli rossi) che superano i 50 ms. Queste attività bloccano il thread principale e ritardano le risposte all'interazione.

Passaggio 2: rinviare gli script di app di terze parti

• Controlla le app installate: Ogni app Shopify può iniettare JS che viene eseguito a ogni caricamento della pagina. Controlla le tue app in Impostazioni → App e canali di vendita e rimuovi quelli che non stai utilizzando attivamente
• Ritarda script non essenziali: Widget di chat, popup di recensioni e programmi fedeltà non devono essere caricati immediatamente. Rimandarli fino a dopo l'interazione dell'utente o ad alcuni secondi di tempo di inattività
• Utilizzare requestIdleCallback: Se disponi di JavaScript personalizzato, inserisci il lavoro non critico requestIdleCallback() per cedere al thread principale

Passaggio 3: suddividere le attività lunghe

• Cedi al thread principale: Utilizzare scheduler.rendimento() (dove supportato) o setTimeout(fn, 0) per suddividere le attività lunghe in parti più piccole
• Gestori di eventi di debounce: Se disponi di gestori di eventi di scorrimento o ridimensionamento, eliminali per ridurre il lavoro del thread principale

Passaggio 4: ridurre il carico utile JavaScript

• Rimuovi JavaScript non utilizzato: Utilizza la scheda Copertura di Chrome DevTools (Ctrl+Shift+P → "Copertura") per trovare JS che si carica ma non viene mai eseguito
• Suddivisione del codice ove possibile: Carica JavaScript per funzionalità specifiche (come una modale di guida alle taglie) solo quando l'utente le attiva
• Preferisci CSS a JS: Animazioni, effetti al passaggio del mouse e semplici interazioni possono spesso essere gestiti con CSS invece che con JavaScript
• Controlla le tue app: Controlla il nostro Rapporti sull'impatto della velocità dell'app per vedere quanto JavaScript aggiunge ciascuna app Shopify comune

Per un elenco di controllo completo per il miglioramento della velocità che copre l'INP e tutti gli altri parametri, consulta la nostra Elenco di controllo per l'ottimizzazione del negozio Shopify.

7. Come risolvere CLS su Shopify

CLS è spesso la metrica più semplice da correggere, ma molti negozi Shopify la ignorano. Ecco come:

Passaggio 1: imposta le dimensioni esplicite su tutti i media

• Aggiungi larghezza e altezza alle immagini: Ogni Dovrebbe avere il tag Tag Attributi larghezza e altezza Attributi . Nel liquido:
  <img src="{{ image | image_url: width: 400 }}" width="400" height="400" alt="{{ image.alt }}" style="aspect-ratio: 1/1;">
• Utilizzare Proprietà CSS: Per immagini reattive, impostare Proporzioni : 16/9 (o qualunque rapporto si applichi) nei CSS per riservare spazio
• Imposta le dimensioni su iframe e video: Anche gli incorporamenti e i lettori video di YouTube richiedono un dimensionamento esplicito

Passaggio 2: riserva spazio per contenuto dinamico

• Barre degli annunci: Se utilizzi un banner in alto, impostane uno fisso altezza minima in modo che il contenuto sottostante non si sposti quando viene caricato
• Widget di revisione: Prenota a altezza minima per la sezione di revisione in base all'altezza tipica del contenuto
• Elementi inseriti nell'app: Usa CSS contiene: layout to prevent injected elements from shifting surrounding content

Passaggio 3: ottimizza il caricamento dei caratteri

• Utilizzare visualizzazione carattere: scambia: Mostra immediatamente un carattere di riserva e lo scambia quando viene caricato il carattere personalizzato, impedendo il testo invisibile (FOIT)
• Precarica i caratteri critici: Aggiungi <link rel="preload" as="font" href="..." crossorigin> per i file dei caratteri principali
• Utilizza gli stack di caratteri di sistema come fallback: Abbina le metriche dei caratteri di riserva al carattere personalizzato utilizzando regolazione della dimensione, esclusione salitae esclusione discesa Le proprietà per ridurre al minimo il riflusso

Passaggio 4: evitare il caricamento tardivo di contenuti Above-the-Fold

• Non caricare pigramente le immagini sopra la piega: Applicare solo caricamento="pigro" alle immagini sotto la piega. Vedi il nostro guida al caricamento lento per i dettagli di implementazione
• Evita documento.write(): Script che utilizzano documento.write() inietta il contenuto in ritardo e causa spostamenti
• Carica annunci/banner con spazio riservato: Se utilizzi banner promozionali, imposta sempre dimensioni fisse

8. Sfide CWV specifiche di Shopify

La piattaforma di Shopify crea alcune sfide uniche che non si applicano ai siti personalizzati:

Rendering liquido

Shopify utilizza il motore di template Liquid per il rendering lato server. I modelli Liquid complessi con cicli nidificati (ad esempio, l'iterazione delle varianti di prodotto all'interno dei cicli di raccolta) aumentano il Time to First Byte (TTFB), che ha un impatto diretto su LCP. Semplifica i tuoi modelli Liquid ed evita calcoli non necessari nei modelli.

Rigonfiamento dello script dell'app

Questa è la sfida CWV numero 1 su Shopify. A differenza delle piattaforme personalizzate in cui controlli ogni script, le app Shopify inseriscono il proprio JavaScript nella tua vetrina. Non puoi modificare o ottimizzare facilmente questi script. Ogni app si aggiunge al carico utile JavaScript totale, aumenta il tempo di blocco del thread principale e può causare modifiche al layout.

La soluzione: controlla spietatamente le tue app installate. Rimuovi tutto ciò che non stai utilizzando. Per le app essenziali, testa individualmente il loro impatto CWV disabilitandole temporaneamente. Alcune app offrono modalità "lite" o "lazy-load": usale. Per uno sguardo completo su come le app influiscono sulle prestazioni, consulta la nostra guida su Impatto degli script di terze parti su Shopify. Puoi anche controllare il nostro le migliori app di ottimizzazione della velocità nel 2026 per trovare strumenti che aiutino anziché danneggiare i tuoi punteggi CWV.

Controllo lato server limitato

Non puoi configurare la memorizzazione nella cache del server, il push HTTP/2 o i lavoratori periferici su Shopify. Le opzioni di ottimizzazione lato server sono limitate all'efficienza di Liquid e alla CDN integrata di Shopify. Questo è un compromesso del modello di piattaforma ospitata.

Velocità di pagamento

Shopify controlla l'esperienza di pagamento e hai una capacità limitata di ottimizzarla (soprattutto sui piani non Plus). La buona notizia: le pagine di pagamento in genere non vengono indicizzate da Google, quindi non influiscono sui punteggi CWV in Search Console. Concentra i tuoi sforzi di ottimizzazione sulle pagine indicizzate: home page, raccolte, prodotti e post del blog.

9. Strumenti per il monitoraggio dei Core Web Vitals

Riparare il CWV è solo metà dell'opera. Hai bisogno di un monitoraggio costante perché nuove installazioni di app, modifiche ai temi o aggiornamenti dei contenuti possono far peggiorare i tuoi punteggi in qualsiasi momento. Abbiamo confrontato il i migliori strumenti per test di velocità di Shopify per aiutarti a scegliere quello giusto.

10. Domande frequenti