Amazon ha scoperto che ogni 100 ms di latenza costa l’1% delle vendite. Walmart ha scoperto che la conversione di un visitatore ha richiesto 2 secondi in meno di tempo di caricamento rispetto a un non acquirente. Le prestazioni non sono “bello da avere”. È la base delle entrate.

Le metriche che contano (Core Web Vitals)

Google misura il tuo sito utilizzando tre metriche chiave. Se fallisci, perdi il posizionamento SEO.

Metrico	Nome	Buon obiettivo	Cosa misura
LCP	La più grande vernice contenuta	< 2,5 s	Velocità di caricamento
INP	Interazione con Paint successivo	<200 ms	Reattività
CLS	Spostamento layout cumulativo	< 0,1	Stabilità visiva

La soluzione: Edge Computing

La velocità della luce è un vincolo difficile. Se il tuo server è in Virginia (Shopify US) e il tuo cliente è a Parigi, il segnale deve attraversare l’Atlantico. Ciò richiede tempo. Spostiamo il calcolo sull’Utente.

Ossigeno e Cloudflare

Shopify Oxygen funziona sulla rete di Cloudflare. Quando un utente richiede una pagina, il “Server” più vicino a lui (ad esempio, il nodo CDG Airport) gestisce la richiesta.

“sirena”. grafico TD Utente[Utente a Parigi] —>|5ms| Bordo[Nodo del bordo (CDG)]

sottografo "La Magia"
Edge -->|L'HTML è memorizzato nella cache?| Cache{Stale-While-Revalidate}
Cache -->|Sì| Bordo
Cache -->|No| Origine[Shopify Virginia]
fine

Origine -->|300ms| Bordo
Bordo -->|Stream| Utente


## Lista di controllo per l'ottimizzazione

### 1. Ottimizzazione dell'immagine (AVIF)
Smetti di usare i PNG.
Implementiamo una pipeline di immagini automatica che converte tutto in **AVIF** (50% più piccolo di JPEG).
"tsx
<Immagine 
  dati={prodotto.immagine} 
  larghezze={[300, 600, 900]} 
  formati={['avif', 'webp']} 
/>

2. Rinviare script di terze parti

Klaviyo, Gorgias e Meta Pixel distruggono le prestazioni del thread principale (INP). Li spostiamo in Partytown (Running on a Web Worker) o semplicemente li rimandiamo fino a dopo l’interazione. Gli utenti non possono acquistare se il thread principale è bloccato dal caricamento di un widget di chat.

3. Precaricamento predittivo

Quando un utente passa il mouse su una scheda prodotto, sospettiamo che farà clic su di essa. Iniziamo a recuperare i dati di prodotto JSON prima che facciano clic. Nel momento in cui il dito si solleva dal mouse, i dati sono già lì. Navigazione istantanea.

Case Study: Velocità vs Entrate

Abbiamo ottimizzato il sito di un cliente, riducendo l’LCP da 4,2 a 1,8 s.

Frequenza di rimbalzo: diminuita del 15%.
Tasso di conversione: aumentato dell’8%.
Entrate: +$40.000/mese.

Il tuo sito è lento?

Esegui un controllo del Faro. Se vedi Rosso, stai bruciando soldi. Assumi i nostri architetti.