Una pagina prodotto WooCommerce di solito si carica in modo accettabile. La pagina negozio, gli elenchi di categoria e i risultati di ricerca spesso no, e i titolari di negozi ne restano regolarmente sorpresi perché i singoli prodotti sembrano a posto. La differenza è aritmetica. Una pagina prodotto mostra un’immagine principale. Una pagina di categoria con ventiquattro prodotti ne mostra almeno ventiquattro, e spesso il doppio una volta contati effetti al passaggio del mouse e anteprime di galleria.

Questa moltiplicazione è il motivo per cui le pagine di catalogo sono di norma la cosa più lenta di un negozio, e anche il motivo per cui sono le pagine che contano di più sul piano commerciale. Stanno fra un visitatore che arriva e un visitatore che trova qualcosa da comprare.

Lo schema dietro la maggior parte dei cataloghi lenti: il tema richiede una dimensione di miniatura che WordPress non ha mai generato, quindi il browser scarica il file caricato a dimensione piena e lo riduce nella pagina. Ventiquattro prodotti, ciascuno che spedisce una fotografia da due megabyte per mostrarla a trecento pixel, fanno una pagina di categoria da cinquanta megabyte che ottiene un punteggio pessimo per quanta cache si aggiunga.

Perché le pagine di catalogo si comportano diversamente

In una pagina elenco si sommano tre cose che in una pagina prodotto non accadono.

Il volume. Ogni prodotto nella griglia genera almeno una richiesta di immagine. Le impostazioni predefinite di WooCommerce mostrano spesso sedici o ventiquattro prodotti per pagina, e i negozi più grandi alzano quel numero per ridurre la paginazione.

Immagini al passaggio del mouse e di galleria. Molti temi precaricano una seconda immagine per prodotto per lo scambio al passaggio. Questo raddoppia in silenzio il numero di immagini della pagina, e poiché la seconda immagine non è mai visibile fino all’interazione, non contribuisce al rendering iniziale pur costando la stessa banda.

Instabilità del layout. Le griglie che non riservano spazio per le immagini si spostano man mano che ciascuna arriva. Su una pagina prodotto un singolo spostamento è sopportabile. Su una griglia di ventiquattro, il movimento cumulativo produce un punteggio Cumulative Layout Shift scadente, e si percepisce come la pagina che salta mentre provi a cliccare.

La conseguenza è che le pagine di catalogo falliscono i Core Web Vitals per motivi che una pagina prodotto non ha, e ottimizzare il template prodotto non fa nulla per loro.

Il disallineamento di dimensione che causa la maggior parte del problema

WordPress genera una serie di dimensioni al caricamento. WooCommerce registra le proprie sopra a quelle. I temi poi ne registrano altre. Quello che il browser riceve davvero dipende da quale di queste dimensioni chiede il template e dal fatto che quella dimensione esista.

La modalità di guasto è silenziosa. Se un tema chiede una dimensione registrata dopo il caricamento dei tuoi prodotti, WordPress non l’ha mai generata, quindi ripiega sull’originale a dimensione piena. La pagina continua a sembrare corretta, perché il browser riduce l’immagine per farla stare. Semplicemente sta spostando diversi megabyte per mostrare una miniatura.

Puoi accorgertene senza alcuno strumento. Apri una pagina di categoria, apri il pannello di rete e ordina le richieste di immagini per dimensione. Se le dimensioni trasferite sono vicine al peso dei caricamenti originali anziché a una loro frazione, viene servita la dimensione sbagliata. Confronta le dimensioni intrinseche di un’immagine caricata con lo spazio che occupa sullo schermo. Una fotografia che arriva a duemila pixel di larghezza per riempire un riquadro da trecento pixel è l’intero problema in una sola osservazione.

La soluzione è o rigenerare le miniature perché le dimensioni richieste esistano, oppure servire la dimensione giusta alla consegna così che la questione non si ponga.

Il caricamento differito, e dove va storto

WordPress carica le immagini in modo differito per impostazione predefinita, il che aiuta le pagine di catalogo più di quasi ogni altro tipo di pagina, perché gran parte di una griglia lunga sta sotto la piega.

Due errori annullano il vantaggio.

Differire la prima riga. Le immagini visibili all’arrivo dovrebbero caricarsi subito. Se la più grande è differita, il browser la scopre tardi, e poiché di solito è l’elemento Largest Contentful Paint, la misura ne risente direttamente. La maggior parte dei temi sbaglia qui, applicando il caricamento differito in modo uniforme a ogni riquadro prodotto.

Plugin di caricamento differito che combattono l’implementazione nativa. Eseguire un plugin che aggiunge il proprio caricamento differito sopra quello del browser produce immagini che non si caricano mai, si caricano due volte o sfarfallano. Se hai un plugin di prestazioni installato, verifica se sta duplicando qualcosa che il browser già fa.

La consegna: la parte che scala

Rigenerare le miniature sistema il catalogo di oggi. Non sistema quello del mese prossimo, quando un nuovo fornitore invia fotografie con un rapporto d’aspetto diverso, o quando cambi tema e le dimensioni richieste cambiano di nuovo.

Trasformare le immagini alla consegna evita questa ruota per criceti. L’originale resta come caricato, e la dimensione servita è decisa dall’URL invece che da quanto generato mesi fa. Cambia la griglia, cambia il parametro. Non c’è alcuna rigenerazione né rischio che una dimensione mancante ripieghi sull’originale intero.

Questo si adatta particolarmente bene ai cataloghi, perché la stessa fotografia di prodotto compare tipicamente in tre dimensioni: un riquadro di griglia, un’immagine di pagina prodotto e una vista zoom o lightbox. Con un modello di fatturazione per immagine sono tre addebiti per prodotto. Con il modello di Cloudflare sono tre varianti distinte indipendentemente da quanti prodotti hai, e le richieste ripetute nel mese non costano nulla.

Il nostro confronto fra Cloudflare Image Transformations e i plugin immagini per WordPress tratta le differenze fra i modelli di fatturazione e quale si adatti a quale forma di libreria.

Cosa cambiare, in ordine

Affronta questi punti in sequenza. Ciascuno è misurabile da solo, e farli fuori ordine rende difficile capire cosa abbia aiutato.

Comincia col capire se hai il disallineamento di dimensione, perché se ce l’hai nient’altro conta finché non è risolto. Controlla la dimensione trasferita delle immagini di griglia rispetto allo spazio che occupano.

Poi riduci quante immagini la pagina richiede. Disattiva le immagini al passaggio del mouse se il tema le precarica e puoi farne a meno. Chiediti se ventiquattro prodotti per pagina servano a qualcuno, o se sedici con un caricamento più rapido convertano meglio.

Poi correggi il confine del caricamento differito così che la prima riga visibile si carichi subito e tutto ciò che sta sotto no.

Poi affronta la consegna, così che le dimensioni servite corrispondano a quelle mostrate e restino corrette quando il catalogo cambia.

Solo dopo tutto questo la cache aiuta in modo significativo. Mettere in cache una pagina lenta la rende costantemente lenta anziché veloce, ed è il passo a cui si ricorre per primo perché è il più facile da installare.

Per il quadro più ampio oltre alle immagini, le prestazioni di WooCommerce trattano le query al database, il sovraccarico dei plugin e i frammenti non memorizzati in cache che pure rallentano i negozi.

Farlo misurare come si deve

I titolari di negozi di solito sanno che il negozio sembra lento e non sanno quale fra una dozzina di cause possibili ne sia responsabile. Tirare a indovinare costa caro, perché le soluzioni ovvie sono proprio quelle già tentate.

Mecanik esegue audit delle prestazioni WordPress che misurano specificamente le pagine di catalogo invece di testare una home page e considerare il lavoro concluso, e cura l’implementazione con attività di sviluppo WordPress dove la soluzione va oltre la configurazione. Se sono le tue pagine di categoria a perdere visitatori, è da lì che la misurazione dovrebbe partire.

Post correlati: Performance WooCommerce: perché il tuo negozio è lento , Migrazione sito senza perdere traffico: guida 2026 , Cloudflare Image Transformations vs plugin WordPress , Sviluppo e-commerce: Shopify vs soluzione personalizzata ., GEO per ecommerce: i dati prodotto nelle risposte IA

Domande frequenti

Perché le pagine di categoria WooCommerce sono più lente delle pagine prodotto? Una pagina prodotto carica un’immagine principale. Una pagina di categoria ne carica una per prodotto, spesso raddoppiata dalle immagini al passaggio del mouse, quindi ventiquattro prodotti possono significare quarantotto richieste. La stessa gestione delle immagini, innocua su una pagina prodotto, si somma male su una griglia.

Come capisco se WooCommerce sta servendo la dimensione sbagliata? Apri una pagina di categoria e il pannello di rete del browser, poi confronta la dimensione trasferita delle immagini di griglia con i caricamenti originali. Se sono simili anziché una frazione, il tema richiede una dimensione che WordPress non ha mai generato e l’originale intero viene ridotto nel browser.

Meglio rigenerare le miniature o trasformare le immagini alla consegna? La rigenerazione sistema il catalogo attuale ma va ripetuta a ogni cambio di dimensioni o di tema. La trasformazione alla consegna decide la dimensione dall’URL, quindi resta corretta al cambio di tema e con i nuovi caricamenti, senza alcuna rigenerazione.

Il caricamento differito aiuta o danneggia le pagine di catalogo WooCommerce? Aiuta, perché gran parte di una griglia lunga sta sotto la piega, ma la prima riga visibile dovrebbe caricarsi subito. Differire l’immagine visibile più grande ritarda direttamente la misura del Largest Contentful Paint, ed è un’impostazione predefinita comune nei temi.

Quanti prodotti per pagina sono meglio per le prestazioni? Meno immagini significano una pagina più veloce, ma più paginazione significa più clic per sfogliare. Da sedici a ventiquattro è tipico. Il numero conta molto meno del fatto che ogni immagine sia dimensionata correttamente, perché una griglia ben dimensionata di ventiquattro batte una sovradimensionata di dodici.