Come ottimizzare i core web vitals su Shopify

Ci sono molte informazioni online su come misurare i Core Web Vitals e se il tuo sito ha un punteggio buono o scarso. Ma ci sono pochissimi consigli attuabili su ciò che devi fare per apportare miglioramenti, in particolare su Shopify.

In questo articolo, vedremo esattamente come puoi migliorare il tuo punteggio Core Web Vitals nel tuo negozio Shopify. Abbiamo cercato di rendere attuabili molti di questi consigli senza uno sviluppatore, ma alcuni richiedono un'implementazione tecnica esperta.

Analizzeremo a turno ciascuna metrica fondamentale del Web, spiegheremo quali fattori influenzano le loro prestazioni, quindi ti mostreremo come migliorare ciascuna metrica CWV su qualsiasi negozio Shopify.

Fare clic sulle intestazioni di seguito per passare direttamente a quella sezione:

• Come vengono calcolati i Core Web Vitals su Shopify
• Come migliorare LCP su Shopify
• Come migliorare CLS su Shopify
• Come migliorare il FID su Shopify
• App Shopify Core Web Vitals

Cosa sono i core web vitals

Ricapitoliamo molto brevemente cosa sono i Core Web Vitals.

I Core Web Vitals sono un insieme di metriche utilizzate da Google per misurare le prestazioni e l'esperienza delle pagine Web per gli utenti. Per ciascuna metrica, gli URL sono contrassegnati come "Verde - Buono", "Giallo - Necessita di miglioramenti" o "Rosso - Scarso".

I punteggi Core Web Vitals hanno un impatto diretto sul posizionamento nei motori di ricerca.

LCP - La più grande vernice contenta

Quanto tempo impiega l'elemento più grande della tua pagina per il rendering sullo schermo?

CLS - Spostamento cumulativo del layout

Di quanto si sposta il layout della pagina durante il caricamento della pagina?

FID - Primo ritardo di ingresso

Quanto tempo impiega la pagina a rispondere alle interazioni?

Come vengono calcolati i Core Web Vitals su Shopify

È importante capire come Google calcola i punteggi Core Web Vitals perché questo influisce su come apportare miglioramenti significativi. I dati per Core Web Vitals provengono dai dati CrUX che misurano le prestazioni per i visitatori reali del sito Web utilizzando il browser Web Chrome. Questo si chiama 'dati sul campo'.

Per ogni metrica CWV, c'è un punteggio medio minimo che devi raggiungere per non essere contrassegnato come "Scarso". Questo si basa sui punteggi medi registrati rispetto a gruppi di pagine. È importante capire che il tuo sito Web Shopify non viene valutato rispetto a una metrica fondamentale dei parametri vitali del Web; gli URL sul tuo sito web sono.

Quando il tuo negozio Shopify fallisce su una metrica Core Web Vitals, Search Console ti mostrerà un campione di URL interessati dal problema. Questo ti aiuta a restringere dove si trova il problema e ad applicare il miglioramento del target. Prima di iniziare qualsiasi lavoro di ottimizzazione di Core Web Vitals sul tuo negozio Shopify, identifica innanzitutto quali aree di miglioramento avranno il maggiore impatto. Non sprecare il tuo tempo in un lavoro che non produrrà un risultato positivo.

Suggerimenti per l'ottimizzazione delle metriche vitali di Shopify Core Web

Core web vitals consiste nel fornire i contenuti e le risorse più importanti il ​​più rapidamente possibile.

L'ottimizzazione della velocità della pagina non è una cosa una tantum. La tua organizzazione deve adottare una cultura in cui l'impatto sulla velocità della pagina sia preso in considerazione in tutti i processi decisionali. Per ogni miglioramento che consideri di apportare al tuo negozio, considera quale sarà il compromesso sulla velocità della pagina.

Come migliorare LCP su Shopify

LCP si riferisce all'elemento più grande della tua pagina e al tempo impiegato dal browser per caricare e visualizzare quell'elemento sullo schermo. Questa sarà normalmente un'immagine, ma potrebbe anche essere un elemento di testo.

Per migliorare LCP su un negozio Shopify aiuta a comprendere i fattori che influenzano LCP. Ci sono quattro fasi che hanno luogo per caricare il tuo elemento LCP.

LCP è tutto su quanto tempo impiega il browser web per dipingere/renderizzare il tuo elemento più grande sulla pagina. Caricare e dipingere non sono la stessa cosa. Anche se il tuo elemento LCP è ottimizzato per una dimensione di file minuscola, LCP può comunque impiegare molto tempo a causa di:

• Ritardo nel caricamento delle risorse. Il browser impiega troppo tempo per iniziare a scaricare l'elemento
• Ritardo di rendering dell'elemento. Dopo che l'elemento LCP è stato scaricato dal browser, il rendering dell'elemento nella pagina richiede troppo tempo.

L'intuizione da asporto qui è che LCP è molto più della semplice dimensione del file del tuo elemento più grande. È il tempo necessario per completare il processo in 4 fasi di cui sopra. Per migliorare i tuoi punteggi LCP, concentrati sull'intero processo di caricamento e rendering del tuo elemento LCP.

Come trovare l'elemento LCP su qualsiasi pagina Shopify

Per migliorare LCP devi sapere quale elemento di una pagina è l'LCP. È facile su Shopify. Basta andare su PageSpeed ​​Insights e analizzare l'URL di cui hai bisogno per trovare l'LCP. Al termine del rapporto, scorri fino in fondo e guarda nella sezione "Diagnostica". Ci sarà una riga chiamata 'Il più grande elemento Paint con contenuto'. Espandi questo per vedere i dettagli su quale elemento è l'LCP in questa pagina.

Non eseguire il lazyload dell'elemento LCP

Il lazy loading è un metodo utilizzato per caricare un elemento solo quando diventa visibile nel viewport. Questo aiuta a velocizzare il caricamento dei contenuti above the fold. Non dovresti caricare in modo pigro il tuo elemento LCP perché ritarderà la velocità con cui il browser inizia a scaricare l'elemento.

Nei negozi Shopify, l'elemento LCP sulla pagina di un prodotto sarà normalmente l'immagine principale del prodotto. Oppure su un post di blog l'elemento LCP sarà probabilmente un'immagine di intestazione del blog. Alcuni temi di Shopify aggiungeranno automaticamente il caricamento lento a ogni immagine, anche a quelle che appaiono above the fold. Esamina ciascuno dei tuoi modelli Shopify e scopri cos'è l'elemento LCP. Se appare above the fold, assicurati che l'attributo seguente non sia incluso nel tag HTML:

caricamento = "pigro"

Precaricare l'elemento LCP

Puoi usare rel="preload" per dire ai browser web di scaricare una risorsa specifica il prima possibile. Applicando rel="preload" sul tuo elemento LCP, il browser darà la priorità al caricamento di quella risorsa nella pagina.

Puoi farlo tu stesso modificando il codice del tema. Per gli sviluppatori di temi Shopify, esiste un filtro che può essere aggiunto ai modelli liquidi di Shopify che produrrà un tag di precaricamento.

Usa le immagini di nuova generazione

I nuovi formati di immagine come WebP hanno dimensioni di file inferiori rispetto ai formati tradizionali come JPG e PNG. Se il tuo elemento LCP è un'immagine, l'utilizzo di un formato di immagine Nextgen accelererà i tempi di download. Ove possibile, utilizza le immagini WebP, ma ricorda di includere un fallback per i browser legacy che non supportano le immagini di nuova generazione.

I nuovi temi Shopify convertiranno automaticamente le tue immagini in WebP e le offriranno ai browser appropriati.

Assicurati che l'elemento LCP sia incluso nella risposta HTML iniziale

Riduci il "ritardo nel caricamento delle risorse" assicurandoti che il tuo elemento LCP venga consegnato all'interno della risposta HTML iniziale. Se l'elemento LCP viene caricato nella pagina da una risorsa esterna (come uno script JS), il browser impiegherà più tempo a scaricare l'elemento LCP.

Se ciò influirà sul tuo negozio Shopify dipenderà dal tema del negozio che utilizzi. Un modo rapido per testare questo è capire qual è il tuo elemento LCP, quindi visualizzare la pagina con JS disattivato. Se l'elemento LCP non viene emesso nell'HTML della pagina, significa che non viene fornito all'interno della risposta HTML iniziale.

Elimina le risorse che bloccano il rendering

Il consiglio "Elimina le risorse che bloccano il rendering" esiste da secoli. Ma cosa significa in realtà? Alcune risorse come script e fogli di stile bloccano il rendering di una pagina web. Quando un browser rileva una risorsa, interromperà il download della pagina e invece scaricherà ed eseguirà quella risorsa. Ciò ritarda il rendering della pagina per gli utenti.

Un rapporto faro ti mostrerà le risorse di blocco del rendering per qualsiasi pagina. Quindi devi capire quali dei tuoi script e fogli di stile bloccano il rendering e quindi ottimizzare il modo in cui vengono forniti.

Elimina il blocco del rendering JS

Per prima cosa devi comprendere due attributi chiamati defer e async. Questi attributi HTML possono essere allegati a script esterni e indicare al browser quando scaricare/eseguire la risorsa.

Pertanto, applicando async o defer ai tuoi script JS, puoi ridurre al minimo il loro impatto sul rendering della pagina. Shopify non asincronizzerà o rinvierà automaticamente i tuoi script, quindi dovrai accedere ai modelli liquidi del tema e aggiungere tu stesso l'attributo. Ma fai molta attenzione quando esegui questo processo poiché devi considerare quale impatto potrebbe avere il rinvio di uno script sulla funzionalità del tuo negozio.

Scoprirai anche che le app e i plug-in che installi nel tuo negozio Shopify generano script JS che bloccano il rendering. Puoi identificarli tramite un rapporto Lighthouse. Considera attentamente ogni app che installi nel tuo negozio e pensa al potenziale impatto sulla velocità della pagina. Alcuni commercianti non si renderanno nemmeno conto che le app inutilizzate sono ancora installate su uno store e influiscono sulla velocità della pagina. Quando disinstalli un'app, assicurati che non lasci alcun codice legacy nel tuo tema.

Elimina i fogli di stile CSS che bloccano il rendering

Per eliminare i CSS che bloccano il rendering, è necessario incorporare gli stili critici necessari per eseguire il rendering del contenuto above the fold. Non è efficiente scaricare immediatamente l'intero foglio di stile per ogni visitatore poiché la maggior parte del CSS non verrà utilizzata.

La soluzione consiste nell'incorporare il CSS critico necessario per visualizzare la sezione above the fold della tua pagina includendola all'interno di un tag di stile nella tua testa . Quindi aggiungi il codice qui sotto al file del tuo theme.liquid.js per caricare il tuo foglio di stile principale in modo asincrono.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Prima di rilasciarlo nel tuo negozio live, sperimenta un tema di prova per verificare che la tua pagina appaia ancora visivamente corretta.

Come migliorare CLS su Shopify

CLS si occupa di quanto il layout della pagina si sposta durante il caricamento di una pagina. La causa sono normalmente le immagini che spostano il contenuto mentre vengono caricate e renderizzate.

Aggiungi attributi di larghezza e altezza alle tue immagini

La soluzione CLS più semplice consiste nell'assicurarsi che i tag img restituiscano attributi di larghezza e altezza espliciti. Questi attributi vengono applicati all'HTML dell'immagine e indicano al browser la larghezza e l'altezza dell'immagine. Con queste informazioni, il browser può calcolare le proporzioni e le dimensioni dell'immagine e riservare lo spazio necessario per quell'immagine. Ciò impedisce al layout di spostarsi quando l'immagine viene aggiunta alla pagina.

Per farlo su un'immagine nel tuo negozio Shopify, accedi e vai alla sezione dei temi. E vai in "Modifica codice" per il tuo tema. Quindi trova lo snippet di codice all'interno del tuo modello liquido che emette l'immagine e aggiungi il seguente snippet al tag img.

 height="{{img.height}}" width="{{img.width}}

Guarda i modelli liquidi che utilizzi per la home page, le collezioni, i prodotti e i blog di Shopify e assicurati che i tag img facciano riferimento agli attributi di larghezza e altezza.

Ottimizza i tuoi caratteri

Quei fantasiosi caratteri web che carichi da luoghi come Google Fonts possono causare problemi CLS a causa di un problema chiamato FOUS (flash of unstyled text). È qui che il browser Web carica inizialmente un carattere di fallback, quindi quando viene caricato il carattere Web principale, il testo viene nuovamente visualizzato causando uno spostamento del layout.

Riduci la dipendenza da Web Font di terze parti Prima di tutto, cerca di ridurre la tua dipendenza da Web Font di terze parti. Quando importi font web, importa solo le famiglie di font di cui hai bisogno. Non importare i diversi spessori e stili dei caratteri se non vengono mai utilizzati in quanto ciò aumenterà le dimensioni del file dei caratteri.

Precarica i font I web font a volte vengono caricati dall'interno di un foglio di stile. Ciò ritarda la velocità con cui il browser può iniziare a scaricare il carattere. Invece, precaricare i file dei font nel formato del tuo negozio. Questo dirà al browser di caricare il file del font con priorità alta.

Usa font-display:opzionale Font-display è una proprietà CSS che dice al browser cosa fare quando un carattere non è stato scaricato entro 100 ms. Il browser caricherà inizialmente il font di fallback e se il font personalizzato non ha terminato il download entro 100 ms, il browser manterrà il font di fallback visualizzato nella pagina. Ciò riduce il rischio che il carattere personalizzato venga caricato troppo tardi e provochi uno spostamento del layout.

Come migliorare il FID su Shopify

Nella nostra esperienza, FID è la metrica Core Web Vital meno comune che vediamo influenzare i negozi Shopify. Pensa al FID come a un modo per misurare la reattività di una pagina durante il caricamento. Niente frustra gli utenti più del clic/tocco e non succede nulla.

Il FID è simile a un'altra metrica chiamata Total Blocking Time (TBT). TBT misura il tempo che intercorre tra l'inizio del rendering della pagina (First Contentful Paint o FCP) e il momento in cui la pagina diventa reattiva (Time to Interactive o TTI).

TBT è causato da "attività lunghe" che bloccano l'elaborazione del thread principale. Il thread principale è dove il browser elabora tutto il necessario per caricare una pagina. Se le attività lunghe bloccano l'elaborazione del thread principale, ritarda la velocità con cui una pagina diventa interattiva per gli utenti.

Qual è la differenza tra FID e TBT

La differenza principale tra FID e TBT è che FID si basa su dati sul campo (dati di utenti reali che hanno visitato il tuo negozio Shopify). Mentre il TBT è misurabile in laboratorio e viene calcolato eseguendo test in un ambiente artificioso con condizioni di rete definite.

Poiché non puoi misurare il FID durante il test delle tue pagine, dovresti invece misurare il TBT.

Per migliorare il FID devi velocizzare la velocità con cui il tuo negozio Shopify risponde alla prima interazione di un utente. Questo viene fatto caricando le tue pagine Shopify nel modo più efficiente possibile. Concentrati su queste tre aree:

Ridurre l'impatto del codice di terze parti

Come per tutte le metriche essenziali del Web, JavaScript di terze parti è spesso la causa dei problemi. Qualsiasi terza parte che blocca il thread principale per più di 250 ms verrà contrassegnata in un rapporto Lighthouse. Esegui le tue pagine attraverso Lighthouse per identificare quali script di terze parti causano problemi. Quindi decidi quali possono essere impostati su async o defer.

Riduci il tempo di esecuzione di JavaScript

Anche il tempo necessario per l'esecuzione di JavaScript è importante. Prima di tutto, esegui le tue pagine attraverso Lighthouse e identifica quali script richiedono più tempo per essere eseguiti. Lighthouse segnalerà tutti gli script che impiegano più di 2 secondi.

Usa la suddivisione del codice Piuttosto che consegnare tutto il tuo codice JavaScript in un singolo file, dividi il tuo codice in parti più piccole e fornisci solo il codice necessario per quella pagina. Questo non è facile e richiede il supporto degli sviluppatori che gestiscono il tuo codice. Lo troverai molto più semplice se è integrato nello sviluppo del tuo tema Shopify all'inizio del progetto.

Minimizza e comprimi il tuo codice Quando minimizzi il tuo codice, rimuovi spazi bianchi e commenti non necessari. Ciò riduce le dimensioni del file ma accelera la velocità con cui un browser può eseguire il codice. Una delle grandi cose di Shopify è che la maggior parte dei temi js viene minimizzata automaticamente.

Come la minificazione, la compressione di js riduce le dimensioni del file e accelera la velocità con cui il browser Web può eseguire il codice.

Riduci al minimo il lavoro sui thread

Il thread principale fa tutto il lavoro di elaborazione e calcola come costruire una pagina. Quando il thread principale è occupato da attività intensive, il tuo TBT sarà peggiore. Ciò dipende principalmente dalla robustezza del tuo tema Shopify. I temi economici creati da sviluppatori scadenti non si caricano in modo efficiente come quelli sviluppati dagli esperti di Shopify.

Come puoi ridurre al minimo il lavoro sui thread nel tuo negozio Shopify? Come accennato in precedenza, è molto più semplice se questo è integrato nel tuo tema fin dall'inizio. Ti consigliamo di acquistare un tema Shopify premium con ottime recensioni. Oppure, se stai costruendo il tuo negozio Shopify, assicurati di collaborare con sviluppatori esperti di Shopify che possono garantire che il tuo tema sia ottimizzato per ridurre al minimo il lavoro sui thread.

Come misurare le prestazioni di Core Web Vitals

Ora sai come migliorare i Core Web Vitals nel tuo negozio Shopify, poi devi sapere come misurare i progressi dei tuoi Core Web Vitals.

Console di ricerca

Il modo più rapido per vedere come si comporta attualmente il tuo negozio Shopify per Core Web Vitals è tramite Search Console. Vai al report Core Web Vitals dal menu a sinistra per ottenere dati sulle prestazioni attuali del tuo sito. Includerà una ripartizione di dove hai problemi di Core Web Vitals e ti mostrerà un campione di URL interessati.

Pagespeed Insights/Faro

Pagespeed insights è uno strumento gratuito di Google che ti consente di misurare la velocità della pagina di qualsiasi pagina. Esegui i tuoi URL Shopify tramite lo strumento per ottenere un'analisi dettagliata delle tue prestazioni insieme alle azioni consigliate per ottenere un punteggio più alto.

Rapporto CRUX

CrUX è il set di dati di velocità/prestazioni di Google per milioni di pagine reali. Puoi accedere ai dati CrUX per il tuo negozio Shopify utilizzando la dashboard di Google CrUX Data Studio. La dashboard fornisce un'analisi dettagliata delle prestazioni del tuo sito rispetto alle metriche di Core Web Vitals negli ultimi 16 mesi.

Cosa significano tutti quei termini CWV?

Quando inizi a esaminare Core Web Vitals, ti imbatterai in molte terminologie complicate, ecco cosa significa:

Core Web Vitals App Shopify

Esistono molte app Shopify che affermano di essere in grado di migliorare i punteggi di Core Web Vitals. Alcune di queste app sono efficaci e offrono un miglioramento delle prestazioni. Anche se questo può migliorare i tuoi punteggi Core Web Vitals, non c'è alcuna garanzia che vedrai alcun effetto. Questo perché i punteggi Core Web Vitals sono unici per ogni negozio Shopify. Se i punteggi Core Web Vitals del tuo negozio sono scarsi a causa di un problema specifico del tema, un'app probabilmente non farà alcuna differenza.

Se vuoi seguire il percorso dell'app, ti consigliamo di provare un'app e osservare l'effetto che ha sulle prestazioni. Ecco alcune app suggerite da provare:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Se hai bisogno di consigli o supporto con la tua attività di e-commerce, contatta il nostro team e saremo felici di aiutarti.