Data di pubblicazione: 24 giugno 2026
Nuvemshop (nota come Tiendanube nell'America Latina di lingua spagnola) è la piattaforma di e-commerce leader nella regione, che supporta oltre 180.000 negozi online. Poiché i commercianti personalizzano le loro vetrine con più temi e disposizioni dei contenuti dinamici, garantire caricamenti rapidi delle pagine in questa diversità presenta sfide tecniche uniche.
- L'integrità della metrica Largest Contentful Paint (LCP) è migliorata del 68%, passando dal 57% al 96% in un anno, il che riflette un cambiamento importante nel modo in cui i negozi mostrano i contenuti nella parte superiore dell'area visibile per gli utenti reali.
- La percentuale di superamento dei Core Web Vitals è passata dal 48% al 72%, il che significa che quasi 3 negozi su 4 ora soddisfano la soglia di rendimento di base di Google.
- Il coinvolgimento con Shopping è migliorato in modo misurabile: analizzando la stessa coorte di negozi brasiliani attivi a gennaio 2025 e gennaio 2026, i visitatori da dispositivi mobili provenienti dalla ricerca organica di Google hanno mostrato:
- Aumento dell'8,9% del tasso di conversione (da sessione a ordine pagato)
- +8,4% del tasso di coinvolgimento del carrello (dalla sessione al carrello)
- I dispositivi mobili hanno registrato i maggiori miglioramenti, in linea con i punti in cui i miglioramenti dell'LCP sono stati più significativi.
Questi risultati sono in linea con la ricerca di Deloitte commissionata da Google (oltre 30 milioni di sessioni su 37 brand), che ha rilevato che un miglioramento di 0,1 secondi della velocità di caricamento può aumentare i tassi di conversione della vendita al dettaglio dell'8,4%, confermando la direzione dei nostri investimenti.
La sfida: rilevamento dell'LCP nei layout di e-commerce dinamici
All'inizio del 2025, solo il 48% dei nostri store superava le soglie di Core Web Vitals e il 57% aveva punteggi LCP positivi. La nostra ipotesi iniziale era il peso delle immagini o la latenza del server. Ci sbagliavamo.
Attraverso l'analisi di PageSpeed Insights su migliaia di negozi, abbiamo scoperto che la nostra piattaforma consente ai commercianti di organizzare dinamicamente le sezioni della home page: caroselli, banner, griglie di prodotti e moduli personalizzati possono essere visualizzati in qualsiasi ordine.
Questa flessibilità ha introdotto un problema imprevisto: l'elemento giusto non veniva sempre identificato come LCP. Nei negozi con caroselli, che rappresentavano l'85% dei nostri storefront, a volte un banner più in basso nell'area visibile veniva contrassegnato come LCP anziché come prima immagine del carosello, a seconda del modo in cui la pagina veniva visualizzata su schermi e dispositivi diversi. Ciò significava che i nostri sforzi di ottimizzazione non avevano l'effetto desiderato: stavamo ottimizzando elementi che non erano effettivamente elementi LCP.
A differenza delle tipiche piattaforme SaaS, non potevamo limitarci a correggere la home page. Avevamo bisogno di una soluzione che funzionasse con ogni possibile configurazione del tema, disposizione delle sezioni e personalizzazione del commerciante, senza compromettere i negozi esistenti o limitare la libertà creativa.
In che modo i layout dinamici influiscono sulla selezione degli elementi LCP
Tramite l'analisi di PageSpeed Insights e il monitoraggio degli utenti reali, abbiamo scoperto che le transizioni CSS su caroselli e banner venivano ritardate quando gli elementi diventavano visibili all'algoritmo di rilevamento LCP del browser. Anche se gli utenti percepivano che il carosello veniva caricato per primo, a volte il browser contrassegnava un banner nella seconda sezione come elemento LCP, perché la visibilità di quell'elemento non era ritardata dagli effetti di transizione.
Abbiamo identificato tre cause principali:
- Le transizioni CSS sono state ritardate quando gli elementi sono stati considerati visibili, spostando il rilevamento LCP al frame sbagliato.
- Il caricamento lento è stato applicato alle immagini nella parte superiore dell'area visibile che dovevano essere caricate immediatamente.
- La mancanza di indicatori di priorità significava che le immagini più importanti non venivano caricate per prime.
Abbiamo anche scoperto che una parte significativa delle misurazioni LCP proveniva dalle pagine di categoria e di prodotto, non solo dalle home page, il che significa che le nostre correzioni dovevano essere applicate in modo coerente a tutti i tipi di pagine con traffico elevato.
Implementazione: correzione delle tre cause principali su larga scala
Una volta identificate le cause, le correzioni sono state semplici. Le abbiamo applicate in modo coerente a tutti i temi principali e ai tipi di pagina, ma ognuna ha richiesto un'attenta definizione dell'ambito per evitare di creare nuovi problemi.
- Sono state rimosse le transizioni CSS per le sezioni in prima posizione. Le sezioni che vengono visualizzate per prime nella pagina ora vengono visualizzate immediatamente, garantendo che il browser le rilevi come candidati LCP senza ritardi artificiali.
Rimosso il caricamento lento dalle immagini nella parte superiore dell'area visibile. Per le immagini nella prima sezione, rimuoviamo
loading="lazy"in modo condizionale per eliminare il ritardo di caricamento delle risorse. Abbiamo fatto attenzione a limitare l'ambito solo alla prima immagine nelle sezioni in prima posizione:<!-- Before --> <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"Aggiunta di indicatori di priorità espliciti. Aggiungendo
fetchpriority="high", indichiamo allo scanner di precaricamento del browser che l'immagine LCP è una risorsa con priorità elevata, consentendone il rilevamento e il download prima del completamento del layout e del rendering. Abbiamo aggiunto una logica di convalida per garantire che gli indicatori di priorità vengano applicati solo quando l'elemento si trova effettivamente in una posizione in cui potrebbe essere il candidato LCP: l'aggiunta difetchpriority="high"a troppe immagini sarebbe controproducente, poiché se tutto ha una priorità elevata, niente lo è.<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- After -- img src="slide-1.webp" fetchpriority>="high" alt="Featured product"Latenza ridotta tramite edge caching. La memorizzazione nella cache è efficace per ridurre i tempi di caricamento, ma nell'e-commerce comporta un rischio reale: la pubblicazione di dati obsoleti su prezzi e inventario influisce direttamente sulla fiducia dei clienti e sulle entrate. Abbiamo affrontato questo problema con attenzione, monitorando le metriche aziendali insieme ai dati sul rendimento, massimizzando i tassi di successo della cache e assicurandoci di non memorizzare mai nella cache contenuti che potessero danneggiare l'esperienza del commerciante o dell'acquirente.
Impatto e risultati: miglioramento dell'LCP dal 57% al 96%
| Metric (Jan 2025 to Jan 2026) | Miglioramento relativo |
|---|---|
| LCP (buono) | +68% (da 57% a 96%) |
| Core Web Vitals (percentuale di superamento) | +50% (dal 48% al 72%) |
| Tasso di conversione (da sessione a ordine di pagamento) - Google organico per dispositivi mobili | +8,9% |
| Coinvolgimento con il carrello (dalla sessione al carrello) - Traffico organico di Google su dispositivi mobili | +8,4% |
Questi miglioramenti hanno posizionato Nuvemshop e Tiendanube come la piattaforma di e-commerce n. 1 per prestazioni in Brasile, Argentina e Messico.
Concetti chiave e riflessioni post-mortem
L'architettura altamente personalizzabile di Nuvemshop ci ha impedito di fare affidamento sui playbook di ottimizzazione standard. Il vero problema non era il peso delle immagini o la latenza del server: era che i browser selezionavano elementi imprevisti come LCP a causa delle transizioni CSS, dei segnali di priorità mancanti e del caricamento lento applicato alle immagini nella parte superiore della finestra visiva.
La correzione è stata semplice una volta comprese le cause principali: rimuovere le transizioni dalle sezioni in prima posizione, rimuovere il caricamento lento dalle immagini nella parte superiore dell'area visibile e aggiungere indicatori di priorità espliciti. Abbiamo applicato questo approccio in modo coerente a tutti i temi principali, ai tipi di pagina e agli oltre 180.000 negozi della nostra piattaforma.
I risultati parlano da soli: le percentuali di superamento della metrica LCP sono passate dal 57% al 96%, le percentuali di superamento complessive di Core Web Vitals sono passate dal 48% al 72% e i commercianti hanno registrato guadagni misurabili: un aumento dell'8,9% del tasso di conversione e un aumento dell'8, 4% del coinvolgimento con il carrello su dispositivi mobili. Le vetrine veloci non sono solo un risultato tecnico, ma favoriscono direttamente il successo dei commercianti.