Ottimizza ciò che la memorizzazione nella cache non può risolvere: automaticamente
La memorizzazione nella cache di Shopify gestisce la consegna delle risorse in modo efficiente. Il collo di bottiglia prestazionale che la maggior parte dei negozi deve affrontare è ciò che accade dopo Arrivano le risorse memorizzate nella cache: JavaScript che blocca il rendering, CSS non ottimizzato e caricamento delle risorse scarsamente ordinato. Esegui uno speed test gratuito sul tuo negozio per vedere dove viene effettivamente impiegato il tempo di caricamento.
Thunder Page Speed Optimizer si concentra su queste ottimizzazioni post-cache:
- Rinvia JavaScript non critico in modo che il browser visualizzi prima il contenuto visibile
- CSS critico integrato: non è necessario alcun viaggio di andata e ritorno aggiuntivo anche con una cache fredda
- Ottimizza l'ordine di caricamento delle risorse per una pittura con contenuto più grande e più veloce
- Gestisce gli script di app di terze parti che ignorano il livello di memorizzazione nella cache di Shopify
Comprendere la memorizzazione nella cache ti aiuta a prendere decisioni migliori sulla scelta del tema, sulla gestione delle app e sulle priorità delle prestazioni. Analizziamo ogni livello di memorizzazione nella cache.
Livello 1: memorizzazione nella cache del browser su Shopify
Il caching del browser memorizza i file localmente sul dispositivo del visitatore dopo il primo download. Quando visitano di nuovo (o navigano verso un'altra pagina), il browser carica questi file dal disco invece di scaricarli di nuovo. Questo è il livello di caching più efficace per i visitatori di ritorno.
Cosa Shopify memorizza nella cache nel browser
| Tipo di risorsa | Durata della cache | Dominio |
|---|---|---|
| Tema CSS/JS | 1 anno (nomi file con versione) | cdn.shopify.com |
| Immagini del prodotto | 1 anno | cdn.shopify.com |
| Caratteri | 1 anno | cdn.shopify.com |
| Risorse statiche dell'app | Varia (dipende dall'app) | Vari domini CDN |
| Pagine HTML | Nessuna cache del browser (o molto breve) | yourstore.myshopify.com |
Shopify utilizza URL indirizzati al contenuto per le risorse tematiche. Quando modifichi il CSS del tema, Shopify genera un nuovo nome file (come tema.css?v=123456), che obbliga i browser a scaricare la nuova versione. La cache di 1 anno della vecchia versione diventa irrilevante perché l'URL è cambiato.
Ciò significa che non dovrai mai preoccuparti che i visitatori vedano CSS o JavaScript non aggiornati dopo un aggiornamento del tema: il busting della cache di Shopify lo gestisce automaticamente.
Perché l'HTML non è memorizzato nella cache del browser
Le pagine HTML contengono contenuti dinamici: conteggio degli articoli nel carrello, nome del cliente, prodotti visualizzati di recente e prezzi che potrebbero cambiare. La memorizzazione nella cache dell'HTML nel browser mostrerebbe dati non aggiornati. Shopify invia Controllo cache: nessuna cache o corto età massima
Intestazioni per HTML per garantire che i visitatori ricevano sempre nuovi contenuti della pagina.
È qui che prende il sopravvento la edge cache CDN di Shopify: serve rapidamente nuovo HTML senza colpire ogni volta il server di origine.
Livello 2: caching edge CDN di Cloudflare
Shopify collabora con Cloudflare, il cui CDN ha Oltre 300 nodi edge in tutto il mondo. Questo è il livello che rende Shopify Tempo al primo byte (TTFB) così competitivo: in genere 200-600 ms, con pagine memorizzate nella cache edge che rispondono in 50-150 ms.
Come funziona la cache Edge CDN
Quando un visitatore richiede una pagina, la richiesta raggiunge il nodo edge Cloudflare più vicino. Se il nodo dispone di una copia in cache, risponde subito senza contattare i server di origine di Shopify. Altrimenti recupera la pagina da Shopify, la serve al visitatore e ne conserva una copia per le richieste successive.
Flusso di richieste: riscontri positivi e mancati della cache edge
Cosa viene memorizzato nella cache edge (e cosa no)
Dal 2023, Shopify ha ampliato la memorizzazione nella cache dei bordi HTML per i visitatori anonimi. Ecco cosa è idoneo:
✅ Edge-Cacheable
- Homepage (visitatori anonimi)
- Pagine della collezione
- Pagine prodotto (anonime)
- Post e articoli di blog
- Pagine statiche (Informazioni, Contatti)
- Tutte le risorse statiche (immagini, CSS, JS, caratteri)
❌ Non memorizzabile nella cache edge
- Pagine dei clienti registrati
- Pagina del carrello (unica per sessione)
- Checkout (sempre dinamico)
- Pagine con cookie di sessione unici
- Modalità di anteprima del tema
- Pagine con Liquid dinamico che forza la no-cache
Puoi verificare lo stato della cache controllando il file cf-cache-status
Intestazione della risposta in DevTools. Vedi il nostro Benchmark di velocità di Shopify per come la memorizzazione nella cache influisce sui numeri delle prestazioni del mondo reale.
Livello 3: memorizzazione nella cache a livello di app
Le singole app Shopify possono implementare le proprie strategie di memorizzazione nella cache per i dati che forniscono. Questo è il livello più variabile e quello che può aiutare o danneggiare le prestazioni del tuo negozio.
Come funziona la memorizzazione nella cache delle app
Le app che visualizzano contenuti sul tuo negozio (widget di recensione, consigli sui prodotti, popup di upsell) in genere effettuano chiamate API ai propri server. Le app ben realizzate memorizzano nella cache queste risposte:
- Buone app memorizza nella cache le risposte API sul proprio CDN, fornisce widget HTML statici ove possibile e si carica in modo asincrono in modo da non bloccare il rendering della pagina
- App mal costruite effettua nuove chiamate API a ogni caricamento di pagina, inserisce script sincroni che bloccano il rendering e non memorizza nulla nella cache
Il problema: non hai visibilità su come le app gestiscono la memorizzazione nella cache internamente. Un widget di revisione potrebbe memorizzare nella cache le recensioni per 5 minuti o recuperarle ogni volta: non c'è modo di saperlo senza controllare le richieste di rete.
Script dell'app e problema del bypass della cache
La maggior parte delle app Shopify iniettano JavaScript tramite ScriptTag
Riferimenti o blocchi di incorporamento app. Questi script si caricano da domini esterni (non cdn.shopify.com), il che significa:
- Richiedono ricerche e connessioni DNS separate (aggiunge 100-300 ms per dominio)
- Le intestazioni della cache sono controllate dallo sviluppatore dell'app, non da Shopify
- Possono inserire richieste aggiuntive che aggirano tutta la memorizzazione nella cache di Shopify
- Alcune app aggiungono script di blocco del rendering che ritardano il rendering della pagina anche quando la pagina stessa è memorizzata nella cache
Questo è esattamente il motivo per cui un negozio può disporre di una cache CDN perfetta e sembrare comunque lento: gli script di terze parti provenienti dalle app creano colli di bottiglia che la sola cache non può risolvere.
Quando la memorizzazione nella cache di Shopify si interrompe: scenari comuni
Capire quando la memorizzazione nella cache non si applica aiuta a diagnosticare i problemi di prestazioni:
Modalità anteprima tema
Quando visualizzi l'anteprima delle modifiche al tema, Shopify disabilita completamente la memorizzazione nella cache dei bordi. Questo è il motivo per cui il tuo negozio sembra più lento nell'editor del tema: vedi risposte sull'origine non memorizzate nella cache. Non giudicare le prestazioni in base alla modalità di anteprima.
Immediatamente dopo gli aggiornamenti dei contenuti
Quando aggiorni un prodotto, modifichi una pagina o pubblichi un post sul blog, Shopify invalida la cache CDN pertinente. Il primo visitatore dopo un aggiornamento vede una cache MISS (risposta dell'origine). I visitatori successivi ottengono la versione aggiornata memorizzata nella cache. Questo in genere si risolve in pochi secondi.
Geolocalizzazione e rilevamento valuta
I negozi che utilizzano prezzi basati sulla geolocalizzazione, cambio di valuta o contenuti specifici per regione potrebbero riscontrare una riduzione dell'efficacia della edge cache. Se ciascuna regione geografica prevede prezzi diversi, la CDN necessita di versioni memorizzate nella cache separate per regione, riducendo i tassi di riscontro nella cache.
App di test A/B e personalizzazione
Le app che modificano il contenuto della pagina in base ai segmenti di visitatori (test A/B, consigli personalizzati) creano in modo efficace varianti di pagina uniche. Ciò può impedire la memorizzazione nella cache dei bordi poiché il contenuto varia in base al visitatore. Maggiore è la personalizzazione che aggiungi, meno efficace diventa la memorizzazione nella cache della CDN.
Pagine a basso traffico
Le cache edge hanno uno spazio di archiviazione limitato. Le pagine che vengono visitate raramente possono essere rimosse dalla cache tra una visita e l'altra, con conseguente aumento dei MISS della cache. Le pagine ad alto traffico (homepage, prodotti popolari) mantengono cache "calde"; le pagine di prodotti a coda lunga con pochi visitatori potrebbero mancare costantemente.
Cosa possono effettivamente ottimizzare i commercianti oltre la memorizzazione nella cache
Poiché non puoi configurare direttamente la memorizzazione nella cache di Shopify, concentrati su ciò che puoi controllare: le prestazioni front-end, che determinano la velocità con cui il tuo negozio esegue il rendering dopo l'arrivo delle risorse memorizzate nella cache.
| Ottimizzazione | Impatto | Il tuo controllo |
|---|---|---|
| Configurazione della cache CDN | Alto | Nessuno: Shopify lo gestisce |
| Intestazioni della cache del browser | Medio | Nessuno: automatico per le risorse Shopify |
| Rinvio delle risorse con blocco del rendering | Molto alto | Completo: tramite codice tema o Thunder |
| Integrazione CSS critica | Alto | Completo: tramite codice tema o Thunder |
| Ottimizzazione dell'immagine | Alto | Completo: dimensionamento, caricamento lento, formati |
| Gestione degli script dell'app | Alto | Parziale: rimuove le app inutilizzate, rinvia gli script |
| Suggerimenti sulle risorse (preconnessione, precarico) | Medio | Completo: tramite codice tema |
Lo schema è chiaro: la memorizzazione nella cache lato server è il lavoro di Shopify; le prestazioni front-end sono il tuo lavoro. Anche con una memorizzazione nella cache perfetta, un tema che carica 2 MB di JavaScript che blocca il rendering risulterà lento. Anche senza memorizzazione nella cache, un front-end ben ottimizzato esegue il rendering velocemente.
Thunder Page Speed Optimizer automatizza le ottimizzazioni del front-end nelle righe verdi sopra, quelle che hanno l'impatto maggiore e che effettivamente controlli. Vedi il nostro guida completa all'ottimizzazione della velocità per la strategia completa.
Elenco di controllo per l'ottimizzazione della cache di Shopify
Sebbene non sia possibile configurare direttamente la memorizzazione nella cache, queste azioni ne massimizzano l'efficacia:
- Controlla le app installate : rimuovi tutti quelli che non generano attivamente entrate. Meno app = meno script di terze parti bypassando il livello della cache.
- Controlla i tassi di successo della cache : utilizza Chrome DevTools per verificare
cf-cache-status: HITsulle tue pagine chiave. Le basse percentuali di successo suggeriscono che la personalizzazione o il contenuto dinamico impediscono la memorizzazione nella cache. - Minimizza la personalizzazione sulle pagine di destinazione — Mantieni la tua home page e le pagine di raccolta il più possibile "anonime" per ottenere il massimo vantaggio dalla cache edge.
- Utilizzare caricamento lento per le immagini — Anche le immagini memorizzate nella cache richiedono tempo di rendering. Il caricamento lento rinvia le immagini fuori dallo schermo in modo che il browser si concentri prima sul contenuto visibile.
- Installa Thunder per l'ottimizzazione del front-end : automatizza il differimento di JavaScript, l'integrazione di CSS critici e la definizione delle priorità delle risorse. Installa ora
- Testate dalla prospettiva dei vostri clienti — Usa il nostro test di velocità gratuito o WebPageTest da posizioni geografiche che corrispondono alla vostra base di clienti.
- Non giudicare la velocità nell'anteprima del tema — La modalità di anteprima disabilita la memorizzazione nella cache. Prova sul negozio live o utilizza PageSpeed Insights.
Domande frequenti sulla memorizzazione nella cache di Shopify
Shopify utilizza la memorizzazione nella cache del browser?
Sì. Shopify serve risorse statiche (immagini, CSS, JavaScript, font) con intestazioni Cache-Control lunghe — tipicamente max-age=31536000 (1 anno) per le risorse versionate su cdn.shopify.com. Ciò significa che i visitatori abituali caricano questi file dalla cache locale del loro browser invece di scaricarli nuovamente. Le pagine HTML ricevono durate di cache più brevi o intestazioni no-cache perché contengono contenuti dinamici come lo stato del carrello ed elementi personalizzati.
Posso controllare la memorizzazione nella cache CDN di Shopify?
No. Shopify gestisce automaticamente la configurazione del suo CDN Cloudflare. Non è possibile impostare intestazioni cache personalizzate, eliminare la cache CDN o configurare regole di memorizzazione nella cache edge. Shopify determina quali pagine sono idonee per la memorizzazione nella cache edge in base al fatto che il visitatore sia anonimo (memorizzabile nella cache) o abbia effettuato l'accesso (non memorizzabile nella cache). Il lato positivo è che non devi preoccuparti dell'invalidamento della cache: Shopify lo gestisce quando aggiorni prodotti, collezioni o file di temi.
Perché il mio negozio Shopify mostra contenuti diversi a utenti diversi se la memorizzazione nella cache è attiva?
La memorizzazione nella cache di Shopify è intelligente riguardo alla personalizzazione. La memorizzazione nella cache edge HTML si applica solo ai visitatori anonimi. Quando un cliente effettua l'accesso, aggiunge articoli al carrello o ha cookie che indicano una sessione unica, Shopify bypassa la cache edge e genera una nuova pagina dal server di origine. Ciò garantisce che i clienti autenticati vedano il loro carrello corretto, i dettagli dell'account e i consigli personalizzati, mentre i browser anonimi ottengono la versione veloce memorizzata nella cache.
Le app Shopify influiscono sulle prestazioni della memorizzazione nella cache?
Sì, in due modi. Primo, le app che iniettano contenuti dinamici e personalizzati (come prodotti visualizzati di recente o prezzi basati sulla geolocalizzazione) possono impedire che le pagine vengano memorizzate nella cache edge perché il contenuto varia per visitatore. Secondo, le app aggiungono i propri file JavaScript e CSS che il browser deve scaricare — sebbene queste risorse statiche delle app siano tipicamente memorizzate nella cache sulla CDN di Shopify dopo il primo caricamento. Ridurre le app non necessarie migliora sia i tassi di successo della cache che il tempo di caricamento complessivo.
Come faccio a sapere se le mie pagine Shopify vengono servite dalla cache?
Aprite Chrome DevTools (F12), andate alla scheda Rete e ricaricate la vostra pagina. Cliccate sulla richiesta del documento HTML principale e controllate le intestazioni di risposta. Cercate 'cf-cache-status' — un valore di 'HIT' significa che Cloudflare ha servito la pagina dalla cache edge, 'MISS' significa che è andata al server di origine di Shopify, e 'DYNAMIC' significa che la pagina non è idonea per la memorizzazione nella cache edge. Per le risorse statiche su cdn.shopify.com, vedrete tipicamente 'HIT' dopo il primo caricamento.
Svuotare la cache del browser influisce sulla velocità del mio negozio Shopify per i clienti?
No. Svuotare la cache del browser influisce solo sulla tua esperienza locale. Le cache del browser dei tuoi clienti sono indipendenti. Tuttavia, se stai testando la velocità del tuo negozio, svuotare la cache ti offre un'esperienza di "prima visita", utile per capire cosa sperimentano i nuovi visitatori. Per test di velocità accurati, utilizza la modalità di navigazione in incognito o strumenti come PageSpeed Insights che simulano visite non memorizzate nella cache.
La memorizzazione nella cache è il punto di forza di Shopify: le prestazioni front-end sono tue
Il sistema di caching a tre livelli di Shopify (browser, CDN edge e livello di app) gestisce automaticamente il lato server e quello di consegna. Le risorse statiche ricevono intestazioni della cache del browser per un anno. Le pagine HTML anonime vengono memorizzate nella cache edge su oltre 300 nodi Cloudflare. Non è necessario configurare nulla di tutto ciò.
La vera opportunità in termini di prestazioni è l'ottimizzazione front-end: il modo in cui il tuo tema esegue il rendering dei contenuti dopo l'arrivo delle risorse memorizzate nella cache. Risorse di blocco del rendering, non ottimizzato Consegna CSSe pesante script di terze parti sono i colli di bottiglia che la memorizzazione nella cache non può risolvere.
Metti alla prova la velocità del tuo negozio adesso per vedere l'efficienza del rendering del tuo negozio, quindi lascialo Thunder ottimizza le parti che la memorizzazione nella cache lascia sul tavolo. Per la strategia di ottimizzazione completa, consulta il nostro guida completa all'ottimizzazione della velocità di Shopify.
Ottimizzazione professionale della velocità per il suo negozio
Il nostro team si occupa di tutto: ottimizzazione del tema, pulizia delle app e garanzia Core Web Vitals. La maggior parte dei negozi viene ottimizzata in 2 settimane.
✅ Garanzia Core Web Vitals · ⚡ Consegna in 2 settimane · 🎁 6 mesi di Thunder gratis
A partire da 1.500 € · Scopri di più