Prestazioni web

Monitora e migliora i Core Web Vitals del tuo negozio Align con i report sulle prestazioni web di Shopify.

Tutte le guide introduttive Documentazione di riferimento

Link in evidenza

Video utili

Video sulle prestazioni web di Shopify

Prestazioni web del negozio online

La dashboard Web Performance di Shopify misura l’esperienza dei visitatori del tuo negozio online Align, inclusi la velocità di caricamento, la reattività alle interazioni e la stabilità visiva. Usala per comprendere il percorso del cliente dal primo caricamento della pagina fino agli spostamenti imprevisti causati da contenuti come i popup.

Queste misurazioni ti aiutano a dare priorità ai miglioramenti che favoriscono un’esperienza di acquisto più fluida, le conversioni e la visibilità. Company XYZ può aiutarti con le domande specifiche su Align; usa i report di Shopify per stabilire se una personalizzazione del tema, un’app o il contenuto del negozio richiedono un’analisi.

Come vengono misurate le prestazioni web

Le prestazioni web vengono misurate tramite metriche chiave note come Core Web Vitals.

Metrica	Cosa misura	Buon risultato
Largest Contentful Paint (LCP)	La velocità di caricamento, in base alla rapidità con cui l’elemento più grande o il contenuto principale diventa visibile	Il contenuto principale viene caricato entro 2,5 secondi dall’inizio del caricamento della pagina
Interaction to Next Paint (INP)	La reattività, in base al tempo impiegato dalla pagina per fornire un feedback visivo dopo un’interazione, come la selezione di un link o di un pulsante	Meno di 200 millisecondi
Cumulative Layout Shift (CLS)	La stabilità visiva, in base alla quantità di contenuti che si spostano inaspettatamente durante il caricamento	Meno di 0,1

Google valuta anche la compatibilità con i dispositivi mobili, la navigazione sicura, la sicurezza HTTPS e l’assenza di interstitial invasivi. Gli interstitial invasivi impediscono di visualizzare completamente il contenuto, ad esempio i popup promozionali o le richieste di verifica dell’età. Insieme, questi fattori contribuiscono a valutare le prestazioni e l’esperienza utente di una pagina.

Perché le prestazioni web sono importanti

Le prestazioni del negozio possono influire sull’esperienza del cliente, sul tasso di conversione e sulla visibilità.

Esperienza e conversioni

Un negozio con caricamento rapido e interazioni fluide offre un’esperienza migliore su dispositivi e connessioni di velocità diverse. Quando un sito è lento o difficile da navigare, è più probabile che i visitatori lo abbandonino prima di acquistare

Migliorare le prestazioni web può semplificare gli acquisti e favorire tassi di conversione più elevati.

Visibilità

I motori di ricerca come Google usano la velocità della pagina come fattore di ranking. Le pagine con prestazioni scarse nei Core Web Vitals potrebbero ottenere un ranking inferiore, anche quando il negozio è altrimenti ottimizzato per i motori di ricerca

Migliorare le prestazioni può aumentare le probabilità che il negozio ottenga un ranking più alto e una maggiore visibilità nelle ricerche.

Bilanciare funzionalità del negozio e prestazioni

Il tuo negozio Align può includere personalizzazioni del tema, app, immagini, video, caroselli, feed social e analisi. Queste funzionalità possono migliorare l’esperienza dei visitatori ed estendere le possibilità del negozio, ma ogni funzionalità aggiuntiva può influire sui Core Web Vitals.

Alcune funzionalità rallentano una pagina o creano comportamenti imprevisti. Prima di aggiungere o mantenere una funzionalità, valuta il vantaggio per il cliente rispetto al suo effetto sulle prestazioni.

Poniti queste domande:

Cosa aiuta i clienti a decidere di acquistare? Valuta se i clienti trarrebbero maggiore vantaggio da una homepage semplice che rimanda a pagine prodotto dettagliate o da una homepage più ricca di funzionalità che consente di visualizzare e acquistare rapidamente i prodotti.
Cosa deve trovarsi nella parte superiore della pagina? Il branding, le immagini in evidenza e un carrello per il checkout possono influire sulle prestazioni, ma possono anche favorire le conversioni.
Cosa può essere caricato dopo che i clienti scorrono la pagina? Le analisi e le recensioni dei prodotti non devono essere caricate immediatamente quando qualcuno arriva sul sito. Consulta lo sviluppatore del tema o dell’app se devi verificare se una funzionalità viene caricata subito.

Visualizzare i dati sulle prestazioni web

Per visualizzare i report sulle prestazioni web, è necessaria l’autorizzazione del personale Report. Per compilare la dashboard con i Real User Metrics (RUM), rimuovi la protezione tramite password del negozio online

Puoi aprire i report delle prestazioni nel tempo dal riepilogo delle metriche nella pagina Themes. Puoi anche trovare tutti i report sulle prestazioni web nell’elenco Reports del tuo pannello di controllo Shopify.

Visualizzare il riepilogo delle metriche delle prestazioni

Il riepilogo delle metriche delle prestazioni nella pagina Themes offre una panoramica rapida dei tre Core Web Vitals nel tempo. Scopri di più sul riepilogo delle metriche delle prestazioni

Dal pannello di controllo Shopify, vai a Online Store > Themes
Facoltativo: usa il selettore della data per visualizzare Today, Last 7 days o Last 30 days.
Facoltativo: seleziona una metrica nel riepilogo per aprire il relativo report.
- Seleziona LCP P75 (ms) per il report Largest Contentful Paint: nel tempo
- Seleziona INP P75 (ms) per il report Interaction to Next Paint: nel tempo
- Seleziona Cumulative Layout Shift per il report Cumulative Layout Shift: nel tempo
- Seleziona Sessions by Device Type per il report Sessions by device type

Visualizzare i report sulle prestazioni web

Sono disponibili diversi report sulle prestazioni web nell’elenco Reports. Usa il pannello di configurazione o l’editor delle query ShopifyQL per personalizzare un report in base ai dati necessari. Scopri di più su come usare i report Shopify

Dal pannello di controllo Shopify, vai a Analytics > Reports
Cerca il report desiderato.
- Cerca : per visualizzare tutti i report sulle prestazioni web.
- Cerca contentful per i report Largest Contentful Paint.
- Cerca next per i report Interaction to Next Paint.
- Cerca cumulative per i report Cumulative Layout Shift.
Seleziona il nome del report per aprirlo.

Comprendere il riepilogo delle metriche delle prestazioni

Il riepilogo delle metriche delle prestazioni web usa dati degli utenti reali degli ultimi 30 giorni per valutare il negozio rispetto ai tre Core Web Vitals. A ogni metrica viene assegnata una valutazione Buona, Da migliorare o Scarsa in base all’esperienza del 75% degli utenti con i risultati migliori.

Il riepilogo include:

Largest Contentful Paint (LCP), che riflette la velocità di caricamento e la rapidità con cui appare l’elemento visibile più grande.
Interaction to Next Paint (INP), che riflette la reattività e il tempo prima che il browser visualizzi il fotogramma successivo o una modifica visibile dopo un’interazione, come la selezione di un link o di un pulsante.
Cumulative Layout Shift (CLS), che riflette la quantità di contenuti che si spostano inaspettatamente durante il caricamento o la navigazione della pagina.
Sessioni dei visitatori online per tipo di dispositivo.

Core Web Vital	Valutazione	Metrica obiettivo	Significato
Largest Contentful Paint (LCP)	Buona	Minore o uguale a 2500 ms	La maggior parte degli utenti sperimenta un caricamento rapido della pagina
	Da migliorare	Maggiore di 2500 ms e minore di 4000 ms	Alcuni utenti sperimentano un caricamento rapido, ma c’è margine di miglioramento
	Scarsa	Maggiore di 4000 ms	La maggior parte degli utenti sperimenta un caricamento lento della pagina, che dovrebbe essere migliorato
Interaction to Next Paint (INP)	Buona	Minore o uguale a 200 ms	La maggior parte degli utenti sperimenta una buona reattività della pagina
	Da migliorare	Maggiore di 200 ms e minore di 500 ms	Alcuni utenti sperimentano una buona reattività, ma c’è margine di miglioramento
	Scarsa	Maggiore di 500 ms	La maggior parte degli utenti sperimenta una reattività lenta e frustrante, che dovrebbe essere migliorata
Cumulative Layout Shift (CLS)	Buona	Minore o uguale a 0,1	La maggior parte degli utenti sperimenta un layout stabile durante il caricamento della pagina
	Da migliorare	Maggiore di 0,1 e minore di 0,25	Alcuni utenti sperimentano un layout stabile, ma c’è margine di miglioramento
	Scarsa	Maggiore o uguale a 0,25	La maggior parte degli utenti sperimenta un layout instabile, che può essere fastidioso e dovrebbe essere migliorato

Quando una metrica è Da migliorare o Scarsa, usa i report sulle prestazioni web per analizzare le possibili cause e decidere cosa migliorare.

Usare i report sulle prestazioni web

Quando il riepilogo delle metriche delle prestazioni dispone di dati sufficienti per valutare i Core Web Vitals, usa i report per individuare le pagine e le modifiche che potrebbero influire sui risultati. In questo modo puoi prendere decisioni più consapevoli su cosa ottimizzare.

Il dispositivo, la rete e la posizione del cliente sono al di fuori del tuo controllo. I visitatori usano dispositivi e connessioni Internet diversi in tutto il mondo, quindi singole date o pagine possono risultare moderate o scarse anche quando la metrica complessiva è buona. Concentrati sul risultato complessivo anziché sui valori anomali isolati.

Esaminare le prestazioni nel tempo

Usa questi report per vedere come cambia ogni Core Web Vital nel tempo:

Per impostazione predefinita, questi report mostrano il 75° percentile del Core Web Vital pertinente in millisecondi. Usa il pannello di configurazione per personalizzare un report e modifica Dimensions e Filters, ad esempio intervallo di tempo, raggruppamento delle date e tipo di dispositivo. Scopri di più su come personalizzare i report

Il grafico a linee mostra in che modo modifiche come installazioni di app, aggiornamenti del tema Align e nuovo codice possono aver influito su un Core Web Vital nel tempo. Include:

Un punteggio di Summary delle prestazioni web per l’intervallo di date selezionato.
Annotazioni numerate degli eventi verticali, sulle quali puoi passare il mouse per visualizzare le modifiche del negozio che potrebbero influire sulle prestazioni.
Linee orizzontali di soglia che mostrano i limiti tra i risultati Buona, Da migliorare e Scarsa.

La colonna della metrica di distribuzione nella tabella dei dati include un grafico a barre che mostra le visite alle pagine in ogni categoria: buona (verde), moderata (gialla) e scarsa (rossa).

Esaminare le prestazioni per URL della pagina

Usa questi report per trovare singoli URL che potrebbero richiedere attenzione:

Per impostazione predefinita, questi report mostrano il 75° percentile del Core Web Vital pertinente in millisecondi. Usa il pannello di configurazione, Dimensions e Filters per definire l’intervallo di tempo, il raggruppamento delle date, il tipo di dispositivo e altri dettagli. Consulta come personalizzare i report

I report degli URL delle pagine non includono una visualizzazione grafica. Mostrano solo la tabella dei dati, con Page path come dimensione principale predefinita. Il grafico a barre della metrica di distribuzione mostra le visite alle pagine classificate come buone (verde), moderate (giallo) o scarse (rosso).

Esaminare le prestazioni per tipo di pagina

Usa questi report per verificare se una categoria di pagina contribuisce a un problema di prestazioni:

Questi report mostrano per impostazione predefinita il 75° percentile del Core Web Vital pertinente in millisecondi. Personalizzali con il pannello di configurazione, Dimensions e Filters, ad esempio intervallo di tempo, raggruppamento delle date e tipo di dispositivo. Scopri di più su come personalizzare i report

I report per tipo di pagina non includono una visualizzazione grafica. Mostrano la tabella dei dati, con Page type come dimensione principale predefinita, e una barra di distribuzione per le visite alle pagine buone (verde), moderate (giallo) e scarse (rosso).

Analizzare un problema

Esamina il riepilogo delle metriche delle prestazioni per identificare il Core Web Vital che richiede attenzione.
Per quella metrica, usa tutte e tre le visualizzazioni dei report per restringere il problema.
- Usa Over Time per identificare quando è cambiato il punteggio.
- Usa Page Type per verificare se sono interessati determinati modelli di pagina
- Usa Page URL per identificare le pagine interessate specifiche.
Confronta la tempistica con le modifiche al negozio, quindi usa le pagine e gli elementi identificati per apportare un miglioramento mirato.
Per indicazioni dettagliate sui miglioramenti, consulta Come migliorare le prestazioni del tuo negozio online

Domande frequenti

Perché il punteggio di velocità Google Lighthouse è stato rimosso?

Google Lighthouse usa ambienti simulati per i punteggi di velocità. È utile per una panoramica rapida, ma non rappresenta le esperienze degli utenti reali. Ora Google dà priorità ai Core Web Vitals per il ranking SEO; scopri di più da Google

Perché non ho ancora alcun punteggio?

Il negozio è protetto da password. Un negozio protetto da password non riceve il traffico degli utenti reali necessario per generare i Core Web Vitals. Rimuovi la pagina con password per consentire agli utenti di visitare il sito.
Il negozio non ha ancora traffico. Senza visualizzazioni di pagina, non ci sono metriche degli utenti reali da riportare.

Perché ho traffico ma non ho punteggi dei Core Web Vitals?

I Core Web Vitals sono un prodotto Google e attualmente sono disponibili solo nei browser basati su Chromium. I browser moderni come Safari e Safari iOS usano tecnologie simili, quindi le metriche rappresentano comunque con precisione l’esperienza degli utenti sul sito web.

Perché ho i punteggi di alcune metriche ma non di altre?

Ogni metrica misura una parte diversa dell’esperienza e dipende da attività diverse dei visitatori. Ad esempio, Largest Contentful Paint misura il caricamento della pagina, mentre Interaction to Next Paint misura la rapidità con cui la pagina risponde visivamente dopo un’interazione. Se i visitatori non interagiscono con la pagina, la metrica INP potrebbe non ricevere un punteggio.

Perché è cambiato un punteggio?

I punteggi possono cambiare a causa del volume di traffico o degli aggiornamenti del negozio. Se il poco traffico causa grandi oscillazioni, prova un filtro settimanale o mensile.

I punteggi possono cambiare anche dopo l’importazione di prodotti, la creazione di collezioni, modifiche ad Align, personalizzazioni del codice o l’aggiunta di un’app. Scopri i fattori che possono influire sulle prestazioni del tuo negozio online

Come posso migliorare il mio punteggio o il ranking?

Consulta Come migliorare le prestazioni del tuo negozio online per indicazioni sui miglioramenti.

Perché i punteggi della dashboard differiscono da quelli di altri strumenti?

La dashboard Web Performance può differire da altri strumenti per i seguenti motivi:

Fuso orario. I dati della dashboard usano lo standard UTC, che può differire dal fuso orario di un altro strumento.
Raccolta dei dati. La dashboard raccoglie un set di dati più ampio dai browser Chromium, inclusi Chrome, Opera, Edge e Samsung Internet, oltre a Firefox. Strumenti come PageSpeed Insights di Google usano il report CrUX per i browser Chrome che hanno aderito. Scopri di più sui dati CrUX
Indicazioni sulle prestazioni. Consulta Come migliorare le prestazioni del tuo negozio online prima di confrontare i risultati o pianificare modifiche.

Migliorare le prestazioni del negozio online

Molti fattori influiscono sulle prestazioni del negozio online. Alcuni sono sotto il tuo controllo, mentre altri dipendono dai clienti o dall’infrastruttura. Inizia controllando il report Web Performance per comprendere i risultati attuali.

Fattori che non puoi controllare

Dispositivo, rete e posizione del cliente

I clienti visitano il negozio da luoghi, dispositivi e connessioni Internet diversi. Di conseguenza, lo stesso negozio può caricarsi più velocemente o più lentamente per visitatori diversi.

Quando un cliente segnala che il negozio è lento, chiedigli di verificare quanto segue:

Il browser è aggiornato.
La cache del browser è stata cancellata di recente.
Il provider di servizi Internet non sta riscontrando un’interruzione o un peggioramento del servizio.

Infrastruttura Shopify

Shopify ospita i negozi online su server veloci e globali senza limitare la larghezza di banda del negozio. Controlla lo stato del negozio Shopify tramite Shopify Status

I continui miglioramenti dell’infrastruttura e del codice possono riflettersi nelle metriche delle prestazioni. Anche i servizi e le funzionalità seguenti possono influire sulla velocità.

Rete per la distribuzione dei contenuti (CDN)

Una CDN, ovvero una rete per la distribuzione dei contenuti, memorizza immagini e altri file, inclusi i contenuti caricati in Content > Files. Shopify offre una CDN globale gestita da Cloudflare per aiutare i negozi a caricarsi rapidamente in tutto il mondo.

Controlla la disponibilità della CDN nella pagina dello stato di Cloudflare

Cache locale del browser

Il negozio salva temporaneamente alcuni elementi nella memoria del browser locale del cliente. In una visita successiva, il browser può caricare le risorse memorizzate nella cache invece di effettuare un’altra richiesta al server.

Shopify imposta a un anno la durata della cache per le risorse del negozio memorizzabili nella cache. Tra queste risorse sono incluse immagini, PDF, file JS e file CSS.

Cache delle pagine lato server

Anche le pagine vengono memorizzate nella cache sul server. Il primo caricamento della pagina può essere più lento, mentre i caricamenti successivi possono essere più veloci perché i visitatori ricevono una copia memorizzata nella cache.

Risorse in `content_for_header`

L’oggetto Liquid content_for_header aggiunge risorse usate da varie funzionalità del negozio online, incluse le analisi delle prestazioni e funzionalità facoltative come i pulsanti di checkout dinamico. Il caricamento di questo oggetto e delle relative risorse influisce sulla velocità del negozio; Shopify continua a ottimizzare il tag e le sue risorse.

Fattori che puoi controllare

App

Le app che modificano la funzionalità o l’aspetto del negozio possono aggiungere codice ad Align per poter essere eseguite. Rimuovere, riordinare o disattivare le funzionalità delle app non necessarie può migliorare le prestazioni.

Se un’app potrebbe rallentare il negozio:

Disattiva le funzionalità delle app che non usi o rimuovi l’app se non è più necessaria. Valuta l’equilibrio tra funzionalità del negozio online e velocità
Quando rimuovi un’app, valuta la possibilità di rimuovere il codice aggiunto durante l’installazione. La maggior parte delle app rimuove automaticamente il proprio codice, ma verifica con lo sviluppatore dell’app. Alcune app identificano il proprio codice con tag {% comment %} che includono il nome dell’app. Rimuovere il codice delle app inutilizzato evita di eseguire codice per funzionalità che non usi più e rende il tema più facile da gestire.
Consulta lo sviluppatore dell’app per ricevere indicazioni.

Tema Align e personalizzazioni

Align usa Liquid, HTML, CSS e JavaScript. Le personalizzazioni possono aumentare le dimensioni dei file e influire sulle prestazioni web.

Se Align o una personalizzazione potrebbero contribuire a prestazioni lente:

Disattiva le funzionalità del tema che non usi. Valuta l’equilibrio tra funzionalità del negozio online e velocità
Valuta l’uso di un font di sistema
Per una domanda specifica su Align, consulta la documentazione di Company XYZ o contatta l’assistenza Company XYZ.

Funzionalità del tema o dell’app

Le funzionalità abilitate possono influire sulle prestazioni. Ad esempio, un popup di visualizzazione rapida potrebbe precaricare le informazioni di ogni prodotto in una pagina di collezione. Il caricamento di dati che i clienti non usano può rallentare la pagina senza aggiungere valore.

Disattiva le funzionalità non necessarie. Valuta l’equilibrio tra funzionalità del negozio online e prestazioni
Chiedi agli sviluppatori del tema e delle app se una funzionalità precarica i dati.

Codice Liquid complesso o inefficiente

Quasi tutto il codice Liquid usato per visualizzare un negozio può essere modificato, ma operazioni complesse ripetute possono aumentare il tempo di rendering Liquid e influire sulle prestazioni complessive. Ad esempio, ordina i prodotti di una collezione per prezzo prima di eseguire il ciclo sui prodotti, anziché ordinarli all’interno del ciclo. L’ordine non cambia per ogni prodotto, quindi ricalcolarlo ripetutamente aggiunge tempo di elaborazione.

Se temi che il codice non sia ottimizzato:

Esegui Shopify Theme Inspector for Chrome per identificare le righe di codice che rallentano le pagine del negozio.
Assumi un Shopify Partner per identificare il codice inefficiente o non necessario.

Immagini e video

Le immagini sovradimensionate e quelle nascoste alla vista possono ritardare contenuti della pagina più importanti. Quando i clienti attendono il caricamento di immagini grandi, il negozio può sembrare lento.

Shopify include protezioni che aiutano a limitare questo impatto:

Le pagine delle collezioni non possono contenere più di 50 prodotti e le homepage non possono contenere più di 25 sezioni.
Molti temi posticipano il caricamento delle immagini che non sono attualmente sullo schermo.
Molti temi caricano una dimensione dell’immagine basata sulle dimensioni dello schermo in cui viene visualizzata.

Queste protezioni non impediscono completamente alle immagini e ai video di influire sulle prestazioni. Se i contenuti multimediali potrebbero rallentare il negozio:

Consulta la guida all’ottimizzazione delle immagini
Limita le presentazioni di immagini in evidenza a due o tre diapositive oppure usa una sola immagine in evidenza.
Chiedi allo sviluppatore del tema qual è il modo migliore per usare le immagini nel tema.

Font

I font influiscono sulle prestazioni perché qualsiasi font non già presente sul dispositivo del visitatore deve essere trasferito prima che il browser possa visualizzare il testo. I font personalizzati aggiungono file alla pagina e i file grandi o non ottimizzati aumentano la quantità di dati che ogni visitatore deve scaricare.

Usa i font personalizzati con attenzione. Quando possibile, scegli file di font moderni e ottimizzati ed evita pesi, stili e set di caratteri non necessari. I font della libreria di font di Shopify sono già ottimizzati per l’uso con i temi Shopify, ma è comunque consigliabile mantenere basso il numero di famiglie di font.

Come regola generale, usa non più di due famiglie di font personalizzate per negozio, ad esempio una per i titoli e una per il testo del corpo. Un numero maggiore di famiglie di font significa più file da scaricare, con possibili rallentamenti del caricamento, soprattutto sui dispositivi mobili e sulle connessioni più lente.

Note sull’uso

Inizia dalla tendenza complessiva. Dai priorità a un Core Web Vital quando la sua valutazione riepilogativa è costantemente Da migliorare o Scarsa, invece di reagire a una singola pagina o data debole.
Analizza in sequenza. Usa i report nel tempo per stabilire quando si è verificata una modifica, quindi i report per tipo di pagina e URL della pagina per individuare i modelli e le pagine interessati.
Confronta le modifiche con il valore per il cliente. Mantieni le funzionalità che aiutano gli acquirenti a comprare, ma disattiva o posticipa quelle che offrono poco valore e caricano dati non necessari.
Tieni conto del volume di traffico. Usa filtri settimanali o mensili quando il poco traffico fa oscillare bruscamente i dati giornalieri.
Apporta modifiche mirate. Quando possibile, modifica una sola probabile causa alla volta, quindi attendi che si accumulino dati sufficienti degli utenti reali prima di valutare il risultato.