Gallerie prodotto e immagini: leggere ma belle

In un negozio online le foto fanno gran parte del lavoro di vendita: il cliente non può toccare il prodotto, quindi vuole vederlo bene, da più angolazioni, con lo zoom. Ma le immagini sono anche, quasi sempre, la parte più pesante di ogni pagina. La buona notizia è che non devi scegliere tra foto belle e pagine veloci: basta un po’ di metodo. Ecco come.

Parti dalla foto giusta

Il primo errore è caricare le foto così come escono dalla fotocamera o dallo smartphone: diversi megabyte e dimensioni enormi, molto più grandi di quanto un monitor potrà mai mostrare.

• ridimensiona prima di caricare: decidi una dimensione massima utile per lo zoom e non andare oltre;
• usa proporzioni uniformi per tutto il catalogo (per esempio tutte quadrate): le schede sono più ordinate e il tema non deve ritagliare;
• sfondi semplici e coerenti: oltre a essere più eleganti, si comprimono meglio;
• JPEG per le foto, PNG solo per grafiche con trasparenze: una foto salvata in PNG può pesare molte volte di più.

Un caso reale: ci è capitato di analizzare un negozio lento in cui l’immagine principale della home, una foto a tutta larghezza, era salvata in PNG e pesava diversi megabyte. Da sola valeva più di tutto il resto della pagina. Convertirla in un formato adatto a una fotografia ha cambiato il caricamento più di qualsiasi altra ottimizzazione.

Le dimensioni che crea WooCommerce

Per ogni immagine caricata, WordPress e WooCommerce generano diverse versioni: miniatura per le categorie, immagine singola per la scheda, miniature della galleria. Le dimensioni si regolano dal personalizzatore del tema, nella sezione dedicata alle immagini prodotto di WooCommerce (alcuni temi le gestiscono direttamente).

• imposta dimensioni coerenti con il layout del tema: un’immagine mostrata a 400 pixel non deve essere scaricata a 2000;
• se cambi le dimensioni dopo aver caricato il catalogo, le immagini esistenti vanno rigenerate: fallo nelle ore con meno visite, perché è un lavoro pesante;
• disattiva le dimensioni che il tema o i plugin creano ma non usano: occupano spazio e allungano ogni caricamento.

Formati moderni: WebP e AVIF

WebP e AVIF, a parità di qualità visiva, pesano in genere molto meno di JPEG e PNG. Non devi ricaricare il catalogo: Image Optimizer comprime le foto dei prodotti e le converte nei formati moderni, servendole ai browser che li supportano. Schede e categorie pesano meno e si aprono prima, soprattutto da smartphone.

Caricamento differito, ma non per tutte

Il caricamento differito (lazy loading) fa scaricare le immagini solo quando stanno per entrare nello schermo. È molto utile nelle pagine di categoria, dove sotto la prima riga ci sono decine di prodotti. Ma c’è un’eccezione importante:

• l’immagine principale della scheda prodotto e quella grande della home non vanno differite: sono il contenuto principale della pagina, quello che Google misura come LCP. Ritardarle peggiora il punteggio e l’impressione del cliente.

Le gallerie: dove le ottimizzazioni si rompono

La galleria prodotto di WooCommerce non è una semplice serie di immagini: quando il cliente sceglie una variante, uno script sostituisce la foto principale con quella della variazione, e zoom e miniature si aggiornano. Le informazioni sulle varianti, comprese le immagini, sono scritte dentro il codice della pagina.

Per questo le ottimizzazioni aggressive vanno provate con attenzione. Un caso reale: ci è capitato che un’ottimizzazione che aggiungeva l’attributo di caricamento differito alle immagini lo inserisse anche dentro i dati delle varianti, nascosti nel codice della pagina. Quei dati diventavano illeggibili per lo script, e la galleria smetteva di funzionare: niente cambio d’immagine sulle varianti, miniature bloccate. Il negozio sembrava normale finché un cliente non sceglieva un colore.

Dopo ogni ottimizzazione, controlla:

1. che la foto principale cambi quando scegli una variante;
2. che lo zoom funzioni, anche da smartphone;
3. che le miniature della galleria si scorrano e si aprano a schermo intero;
4. che nella console del browser (strumenti per sviluppatori) non compaiano errori in rosso.

Evita che la pagina «salti»

Se il browser non conosce in anticipo le dimensioni di un’immagine, quando arriva sposta tutto il contenuto sottostante. Google lo misura come CLS, e per il cliente è fastidioso: magari stava per toccare un pulsante e si ritrova su un altro. Le immagini inserite da WordPress e WooCommerce di solito hanno già larghezza e altezza; il problema nasce più spesso con slider, banner e immagini inserite dal page builder senza dimensioni. Se il punteggio CLS è alto, parti da lì.

Slider e video

• gli slider in home sono spesso più pesanti di quanto valgano: molti visitatori vedono solo la prima immagine. Una sola immagine ben scelta funziona quasi sempre meglio;
• i video caricali su una piattaforma esterna e incorporali con un’anteprima che carica il lettore solo al clic.

Misura, non indovinare

I clienti e le agenzie guardano spesso il punteggio di PageSpeed da mobile. Fai le prove su una scheda prodotto con molte varianti, su una categoria e sulla home, e ripetile più volte: i risultati oscillano. Concentrati su due misure:

• LCP: quanto ci mette a comparire il contenuto principale, spesso la foto del prodotto;
• CLS: quanto la pagina si sposta durante il caricamento.

In sintesi

1. carica foto già ridimensionate, in JPEG, con proporzioni uniformi;
2. regola le dimensioni di WooCommerce sul tuo tema;
3. lascia a Image Optimizer WebP e AVIF;
4. differisci le immagini sotto la piega, mai quella principale;
5. dopo ogni ottimizzazione prova varianti, zoom e galleria;
6. con iWebLab Cache le schede prodotto vengono servite dalla rete iWebLab Edge.

Se una galleria si è rotta dopo un’ottimizzazione, o non capisci cosa appesantisce le schede, apri un ticket dall’area clienti con l’indirizzo di una pagina di esempio.