Verificare la velocità delle pagine nell’e-commerce: metriche e leve tecniche

Queste metriche contano nell’e-commerce

Tre Core Web Vitals determinano come Google valuta l’esperienza di caricamento. Largest Contentful Paint (LCP) misura il tempo di caricamento del contenuto principale visibile, Interaction to Next Paint (INP) la reattività e Cumulative Layout Shift (CLS) la stabilità visiva. Sono considerati buoni un LCP fino a 2,5 secondi, un INP fino a 200 millisecondi e un CLS fino a 0,1.

Il precedente First Input Delay (FID) è stato sostituito. Dal 12 marzo 2024 INP ha preso il posto di questo valore, anche se alcune guide più vecchie lo menzionano ancora.

Il punteggio PageSpeed deriva da un test di laboratorio con dispositivo e profilo di rete definiti. Ciò che i visitatori sperimentano realmente emerge solo dai dati reali degli ultimi 28 giorni. Un negozio online può ottenere 100 punti in laboratorio e sembrare comunque lento sullo smartphone, se la rete mobile o script di terze parti allungano i tempi di caricamento. Per la valutazione conta l’interazione tra entrambe le fonti, non un singolo numero.

I Core Web Vitals sono un fattore di ranking, ma non il più importante: Google sottolinea che prevale il contenuto più rilevante. Hanno tuttavia un impatto più diretto sul fatturato.

In uno studio Deloitte commissionato da Google (Milliseconds Make Millions, 2020), nel commercio le conversioni sono aumentate dell’8,4 % e il valore medio del carrello del 9,2 %, quando il tempo di caricamento mobile si riduceva di 0,1 secondi. Lo studio mostra una correlazione per molti marchi in Europa e negli USA, non una garanzia per il singolo negozio.

Negli shop online circa tre quarti delle sessioni avvengono tramite smartphone.

Dati di laboratorio vs. dati reali: differenze nella valutazione delle prestazioni

Come verificare sistematicamente tempi di caricamento e interattività

Strumenti gratuiti come PageSpeed Insights, Lighthouse o GTmetrix forniscono valori di laboratorio e indicazioni sulle cause. Testano LCP, CLS e INP nonché altre grandezze come Total Blocking Time, First Contentful Paint, Speed Index e Time to Interactive. I report dei test e i diagrammi a cascata mostrano quali risorse impiegano molto tempo a caricarsi e quali bloccano la costruzione della pagina.

Il punteggio va da 0 a 100. Da 0 a 49 significa molto lento con notevole necessità di intervento, da 50 a 89 c’è margine di miglioramento, da 90 a 100 si raggiunge la velocità di caricamento raccomandata. Nei report il rosso indica scarso, il giallo migliorabile e il verde buono.

Non testate solo la homepage. In un negozio online le liste di categorie, le pagine di dettaglio prodotto, il carrello e il checkout sono le pagine critiche, perché lì si prendono le decisioni d’acquisto. Verificate ciascuna di queste pagine separatamente per mobile e desktop: gli utenti mobile hanno spesso condizioni di rete peggiori, il che accentua i problemi di performance.

Da ogni report si possono ricavare due valori di confronto: la dimensione della pagina e il numero di richieste HTTP. Più grandi sono i dati trasferiti e più richieste al server sono necessarie, più lunga è la costruzione della pagina. Questo permette di verificare, prima e dopo un intervento, se effettivamente la quantità di dati o le richieste sono diminuite.

Individuare i freni tipici nello shop

I tre freni più comuni sono immagini troppo grandi, troppi script di terze parti e temi, plugin o app sovraccarichi. Assegnate innanzitutto le risorse individuate nel report a questi tre punti, prima di cercare altrove.

Il server raramente è la causa principale: studi di Yahoo! e Google hanno rilevato che solo il 10–20 % del tempo di caricamento dipende dal server. Un server performante aiuta, ma di solito non spiega le prestazioni scadenti.

Il sistema di gestione dei contenuti (CMS) ha un’influenza considerevole. Piattaforme come Joomla o WordPress calcolano dinamicamente ogni pagina richiesta nell’interazione tra PHP e database, generando così un carico di base corrispondente.

Plugin ed estensioni – ad esempio per forum, gallerie fotografiche o social media – aumentano ulteriormente i tempi di caricamento. JavaScript e CSS che bloccano il rendering ritardano la costruzione della pagina e la reazione agli input. Tempi di risposta del server lunghi spostano l’LCP in avanti, spostamenti imprevisti del layout peggiorano il CLS.

Cause più frequenti di tempi di caricamento lenti nell’e-commerce

Accelerare immagini e media

Le immagini troppo grandi rappresentano uno dei maggiori freni negli shop con molti prodotti. Efficaci sono dimensioni corrette invece di fornire ogni file nella risoluzione originale, formati moderni come WebP, compressione con un rapporto equilibrato tra volume di memorizzazione e qualità dell’immagine nonché fornitura responsive, grazie alla quale i dispositivi mobili ricevono file più piccoli.

Il lazy loading carica le immagini solo quando entrano nell’area visibile, riduce il tempo di caricamento iniziale e migliora l’LCP. L’immagine principale di una pagina dovrebbe esserne esclusa, altrimenti il contenuto principale visibile viene spostato in avanti.

Con articoli o varianti nuovi ogni giorno, l’ottimizzazione manuale singola raggiunge i suoi limiti; un’ottimizzazione automatica delle immagini tramite CDN può assumere questo lavoro. Un CDN è una rete di più server distribuiti localmente che forniscono contenuti multimediali, raggiungono velocità massime grazie a caching e cluster e garantiscono una distribuzione ottimale anche in caso di picchi di carico o di traffico.

Tra i fornitori citati vi sono ad esempio Akamai, Amazon Web Services, Microsoft Azure, Host Europe e Swiss TXT. Il tempo di caricamento delle foto non dipende solo dalla dimensione dell’immagine, ma anche dalle prestazioni del server su cui risiedono i dati.

Alleggerire JavaScript, CSS e terze parti

JavaScript e CSS che bloccano il rendering frenano la costruzione e l’interattività. Gli script non necessari per la prima costruzione devono essere caricati in ritardo o al di fuori del percorso critico. La cache del browser risparmia download interi nelle visite ricorrenti e alleggerisce la reattività.

Per un CLS stabile riservate spazio per immagini, materiali pubblicitari ed elementi incorporati prima che vengano caricati. Evitate cambiamenti improvvisi del layout dopo il primo rendering della pagina.

Script di terze parti come plugin per social media, tracking o widget di chat figurano tra i freni più comuni, perché ogni script aggiuntivo porta con sé richieste di rete e tempo di esecuzione. Verificate per ogni servizio se è necessario per la vendita e rimuovete o spostate il resto. I plugin di ottimizzazione che fanno tutto automaticamente vanno usati con cautela, perché possono compromettere la visualizzazione.

Configurare correttamente server, caching e distribuzione

Secondo RTP GmbH, l’ottimizzazione comprende la compressione delle richieste HTTP, l’ottimizzazione delle dimensioni dei file per immagini, JavaScript e CSS, strategie di caching, una soluzione di hosting performante e l’impiego di un server proxy. Questa sequenza è sensata anche nella pratica: prima ridurre la quantità di dati e le richieste, poi modificare la distribuzione.

Poiché solo il 10–20 % del tempo di caricamento dipende dal server, un cambio di server porta meno di quanto spesso ci si aspetti. Rimane utile se tempi di risposta del server lunghi comprimono l’LCP. Riducete prima il numero di richieste HTTP. Attivate compressione e caching prima di cambiare classe di hosting.

Un CDN distribuisce contenuti multimediali da server vicini agli utenti e reindirizza i visitatori dall’estero, in background, su un nodo vicino. Verificate presso il fornitore dove si trovano i nodi più vicini al vostro pubblico e come vengono memorizzate nella cache immagini e file statici. Per gli shop svizzeri, la copertura in Svizzera e in Europa nonché l’integrazione con la vostra piattaforma di shop sono i criteri decisivi.

Sequenza di ottimizzazione: dalla diagnosi all’implementazione

Dalla metrica all’intervento: priorità per gli e-commerce svizzeri

Iniziate con una fotografia della situazione basata su valori di laboratorio e dati reali. Ottimizzate poi innanzitutto le pagine su cui si guadagna: pagine di dettaglio prodotto mobile e checkout, in seguito categorie e homepage. Implementate le modifiche singolarmente, in modo da poter attribuire l’effetto di ciascun intervento.

Dopo ogni ottimizzazione è previsto un test visivo. Un esempio documentato mostra il perché: un plugin ha portato il punteggio PageSpeed sul desktop a 100, ma ha dovuto essere disattivato perché in seguito la pagina non appariva più corretta ovunque.

L’effetto nel campo reale si manifesta solo nei valori reali. Tenete sotto controllo questi valori dopo ogni modifica, invece di seguire soltanto il punteggio di laboratorio. Non aspettatevi balzi improvvisi nel ranking: i Core Web Vitals sono un segnale tra molti.

Passaggi importanti per l’ottimizzazione della velocità delle pagine