Velocità da mobile di un negozio PrestaShop: cosa misurare e cosa migliora davvero

Provi il tuo negozio dal computer dell'ufficio, con la fibra, e va bene. Il tuo cliente lo apre da uno smartphone di fascia media, con copertura irregolare, sull'autobus. Per lui la stessa pagina impiega diversi secondi a mostrare la foto del prodotto e risponde in ritardo quando tocca «Aggiungi al carrello». È questa seconda esperienza quella che conta, sia per vendere sia per Google, che indicizza e valuta le pagine in base alla loro versione mobile.

Laboratorio e campo: due misure diverse

Prima di cambiare qualsiasi cosa, distingui due tipi di dati:

• Dati di laboratorio: quelli forniti da un test simulato come Lighthouse o dalla parte inferiore di PageSpeed Insights. Utili per la diagnosi, perché misurano sempre nelle stesse condizioni, ma sono una simulazione.
• Dati sul campo: ciò che hanno vissuto utenti reali di Chrome negli ultimi giorni, in forma aggregata. È quello che compare in alto in PageSpeed Insights (se c'è traffico sufficiente) e nel report Segnali web essenziali di Search Console.

Fissarsi sul punteggio di laboratorio è un errore frequente. Un negozio può avere 60 in Lighthouse e superare la valutazione con i dati reali, oppure 90 e non superarla perché i suoi utenti usano smartphone lenti. Quello che Google usa come segnale sono i dati sul campo.

Le tre metriche, nel linguaggio di un negozio

Si valutano sul 75° percentile delle visite: non basta che vada bene per la maggioranza, deve andare bene per tre visite su quattro.

Cosa rallenta PrestaShop su uno smartphone

Tempo di risposta del server

Se il server impiega molto a generare la pagina, tutto il resto parte in ritardo. In PrestaShop pesano le query al database di ogni pagina, i moduli che aggiungono logica negli hook del front, un PHP vecchio e un hosting senza risorse sufficienti. Una cache di pagina completa, che serve alle visite anonime l'HTML già generato, è di solito il singolo miglioramento più visibile su questo punto.

CSS e JavaScript che quella pagina non usa

Ogni modulo tende a caricare i suoi file in tutte le pagine: il CSS del modulo di contatto nella scheda prodotto, lo script del configuratore nella home. Su uno smartphone, scaricare, interpretare ed eseguire tutto questo ritarda la visualizzazione e, soprattutto, peggiora l'INP, perché il processore del telefono è occupato quando l'utente tocca lo schermo.

Script di terze parti

Chat, pixel pubblicitari, mappe di calore, widget di recensioni. Ognuno aggiunge richieste e lavoro per il processore. Molti non servono finché l'utente non interagisce con la pagina.

Immagini

Foto prodotto caricate in grandi dimensioni, senza formati moderni, o un carosello in home che fa scaricare allo smartphone un'immagine pensata per gli schermi desktop. L'elemento LCP di una scheda è quasi sempre la foto principale: se è pesante o viene caricata in modo differito, l'LCP ne risente.

Font

Diverse famiglie tipografiche, con molti pesi, caricate da server esterni. Oltre al peso, ritardano il testo o lo fanno saltare quando viene applicato il font definitivo.

Cosa migliora davvero, in ordine

1. Server e PHP aggiornati. Una versione di PHP supportata e un PrestaShop aggiornato sono più veloci di per sé, e permettono di usare strumenti di cache e ottimizzazione attuali che non funzionano sulle versioni vecchie.
2. Cache di pagina per le visite anonime, con esclusioni corrette per carrello, pagamento e account, e svuotamento automatico quando cambiano prodotti o prezzi.
3. Togliere CSS e JS dalle pagine in cui non si usano, invece di limitarsi a combinarli e minificarli. Unire tutto in un unico file grande non riduce ciò che lo smartphone deve elaborare.
4. Ritardare gli script di terze parti fino alla prima interazione, con un elenco di eccezioni per ciò che deve caricarsi sempre.
5. L'immagine principale senza caricamento differito e con le dimensioni corrette; il resto, in differita. Riserva lo spazio di immagini e banner con le loro dimensioni per evitare spostamenti.
6. Font serviti dal tuo server, solo con i pesi che usi e con font-display regolato.

Come misurare il prima e il dopo

• Annota i dati sul campo dei template chiave (home, categoria, scheda) prima di iniziare.
• Usa il laboratorio per verificare che la modifica faccia quello che ti aspetti su un URL specifico.
• Aspetta che i dati sul campo si aggiornino: riflettono un periodo di diverse settimane, quindi il miglioramento non compare il giorno dopo.
• Prova anche su uno smartphone reale di fascia media, con la connessione limitata dagli strumenti del browser: è quanto di più vicino a ciò che vive buona parte dei tuoi clienti e rivela problemi che la fibra dell'ufficio nasconde, come menu che tardano ad aprirsi o pulsanti che si spostano.
• Guarda anche il tuo business: tasso di conversione da mobile, rimbalzo sulle schede, carrelli avviati.

La velocità è un segnale tra i tanti per Google, e nessuno può prometterti posizioni per averla migliorata. Quello che è certo è che un negozio veloce da mobile perde meno clienti per strada.

Come risolverlo in PrestaShop

Il Pack Tienda rápida di Rekire riunisce i pezzi di questo articolo: All In One Cache (cache di pagina completa su disco con svuotamento automatico quando salvi prodotti, categorie o prezzi, cache delle query in Redis da PrestaShop 8 e gestione di OPcache), il relativo servizio di configurazione e formazione, RKR OptiMatters e Cache Buster. OptiMatters fa l'inventario dei CSS e JS caricati da ogni tipo di pagina con il loro peso e il modulo di origine, ti permette di toglierli, differirli o ritardarli fino alla prima interazione per pagina, dispositivo o controller, serve i Google Fonts dal tuo server con i soli pesi che usi e include una modalità prima/dopo visibile solo a chi è connesso al back office.