Ottimizzazione tecnica

Ottimizzazione della cache mobile di WordPress: configurazioni reali per LiteSpeed, WP Rocket e Fastest Cache

Pannello delle impostazioni mobili di WordPress LiteSpeed Cache

Perché la memorizzazione nella cache mobile è diversa

Le versioni mobile e desktop di un sito WordPress spesso caricano lo stesso URL, ma offrono layout o risorse leggermente diversi. Temi responsive, script condizionali e plugin specifici per dispositivi mobili possono modificare ciò che il visitatore vede e il comportamento della cache.

Se la cache non è configurata correttamente, un visitatore da dispositivi mobili potrebbe visualizzare un layout desktop o addirittura contenuti obsoleti. Ecco perché l'ottimizzazione della cache per dispositivi mobili è fondamentale non solo per la velocità, ma anche per la coerenza e la SEO.

La memorizzazione nella cache mobile migliora i tempi di caricamento sulle reti 3G o 4G più lente, riduce il TTFB e migliora le metriche Core Web Vitals come LCP e FID. Tuttavia, se configurata in modo errato, può creare pagine duplicate, versioni della cache in conflitto e problemi di "Vary: User-Agent" che rendono difficile il debug.

Comprensione dell'intestazione Vary: User-Agent

IL Vary: User-Agent L'intestazione indica ai browser e ai CDN di memorizzare diverse versioni della cache per ogni tipo di dispositivo: desktop, mobile, tablet, ecc. Questo può essere utile se il tuo sito web offre effettivamente HTML diverso a dispositivi diversi.

Ma ecco il problema: se il tuo sito è reattivo (stesso HTML per tutti i dispositivi), utilizzando Vary: User-Agent Aumenta solo la frammentazione della cache e la complessità della CDN. Ogni agente utente univoco potrebbe avere la propria voce nella cache, con il risultato di centinaia o migliaia di varianti non necessarie.

La regola pratica è semplice:

  • Utilizzo Vary: User-Agent soltanto se il tuo sito genera diverso markup per dispositivi mobili.

  • Disattivalo per i temi responsive in cui il CSS gestisce le modifiche al layout.

LiteSpeed Cache: configurazione mobile corretta

LiteSpeed Cache offre un'opzione integrata per la "Visualizzazione Mobile Separata". Questa funzionalità crea file di cache distinti per i dispositivi mobili, ma non è sempre necessaria.

Passaggi di configurazione:

  1. Vai a LiteSpeed Cache → Cache → Mobile.

  2. Abilitare Vista mobile separata soltanto se utilizzi un tema o un plugin specifico per dispositivi mobili.

  3. Se il tuo tema è reattivo, lascia questa impostazione spento.

  4. Se abilitato, assicurati che il tuo CDN (Cloudflare, BunnyCDN, QUIC.cloud) ignori il Vary: User-Agent intestazione per impedire la duplicazione della cache.

Modifica avanzata facoltativa:
Nel ESI (Edge Side Includes) sezione, disabilitare ESI per i frammenti mobili per evitare il rendering di contenuti misti tra desktop e dispositivi mobili.

Risultato: una cache unificata per pagina, nessun duplicato e TTFB coerente su tutti i dispositivi.

WP Rocket: Impostazioni della cache mobile

WP Rocket offre due opzioni sotto Cache → Mobile:

  • "Abilita la memorizzazione nella cache per i dispositivi mobili"

  • “File di cache separati per dispositivi mobili”

Se il tuo sito è reattivo, abilita solo la prima opzioneIn questo modo i visitatori da dispositivi mobili possono accedere alle pagine memorizzate nella cache senza dover suddividere lo spazio di archiviazione.

Abilita entrambe le opzioni solo se il tuo tema genera un HTML diverso per gli utenti mobili (ad esempio, menu mobili o file di intestazione separati).

Se utilizzi Cloudflare o un altro CDN con rilevamento dei dispositivi, lascia che sia il CDN a gestire le variazioni e mantieni disabilitata la cache mobile separata.

Suggerimento rapido:
WP Rocket a volte aggiunge Vary: User-Agent automaticamente. Puoi confermarlo in Chrome DevTools → Rete → IntestazioniSe lo vedi quando non dovresti, disattiva "Separa i file di cache per i dispositivi mobili".

Confronto tra la memorizzazione nella cache mobile e quella desktop di GTmetrix a cascata

WP Fastest Cache: gestione delle visualizzazioni mobili

WP Fastest Cache adotta un approccio più manuale. Troverai due opzioni rilevanti in Impostazioni → Cache:

  • "Crea cache per il tema mobile"

  • "Non mostrare la versione memorizzata nella cache per desktop sui dispositivi mobili"

LEGGERE  Come ho reso il tema Woodmart super veloce: la mia esperienza nella pulizia di xts_options e caricamento automatico

Se il tuo tema è reattivo, abilita solo la seconda opzioneGarantisce che gli utenti mobili non vedano la cache del desktop senza creare file di cache ridondanti.

Se il tuo sito utilizza un tema mobile separato (come WP Touch o AMP per WP), seleziona entrambe le opzioni.

Per verificare la configurazione, svuota tutta la cache e ispeziona le intestazioni di risposta. Se vedi Vary: User-Agent quando non te lo aspetti, disattiva la duplicazione mobile.

Test e verifica della cache mobile

Dopo la configurazione, è necessario testare il comportamento della cache mobile.

  1. Esegui un GTmetrix o WebPageTest utilizzando emulazione mobile.

  2. Confronta TTFB e dimensione totale per dispositivi mobili e desktop.

  3. Se entrambe le versioni offrono HTML e velocità simili, la configurazione è corretta.

  4. Se la versione mobile carica un layout desktop o ha una risposta più lenta, ricontrolla le impostazioni del plugin.

In Strumenti per sviluppatori Chrome, Sotto Rete → Intestazioni → Risposta, trova il Variare campo.

  • Dovrebbe essere vuoto o mostrare solo Accept-Encoding.

  • Se si vede User-Agent, è probabile che la cache sia divisa inutilmente.

Riepilogo delle migliori pratiche

  • Utilizzo cache mobile separata solo se il tuo sito genera codice HTML mobile univoco.

  • Mantenere Vary: User-Agent minimo per prevenire la frammentazione della CDN.

  • Dopo aver aggiornato un tema o un plugin, svuota sempre la cache.

  • Monitora mensilmente il TTFB mobile per monitorare le prestazioni a lungo termine.

Per ottenere miglioramenti completi delle prestazioni su dispositivi mobili e desktop, esplora il nostro Servizio di ottimizzazione di WordPress per la memorizzazione nella cache completa, CDN e ottimizzazione del database.

Esempio di configurazione reale (client SpeedWP Pro)

Per un client SpeedWP Pro che utilizza LiteSpeed Enterprise + Cloudflare CDN:

  • “Vista mobile separata” → Disabilitato.

  • "Servi obsoleto in caso di errore" → Abilitato.

  • Chiave cache Cloudflare:

    Cache-Key: scheme+hostname+path

Risultato:
Il TTFB medio è sceso da Da 480 ms a 210 mse le voci duplicate nella cache sono diminuite da 30.000 a 11.000.

LEGGERE  Il tuo negozio online sembra lento, ma PageSpeed dice 95? La verità su filtri, varianti e clienti persi, e come risolverli

Questa configurazione ha garantito prestazioni rapide e stabili sia su dispositivi mobili che su desktop, mantenendo al contempo l'archiviazione della cache efficiente e pulita.

Una corretta configurazione della cache mobile in WordPress non riguarda solo la riduzione dei millisecondi, ma anche la coerenza e l'affidabilità. Un sito che invia la stessa risposta ottimizzata a ogni visitatore, indipendentemente dal dispositivo, mantiene un posizionamento migliore e una maggiore soddisfazione degli utenti.

Con le impostazioni corrette di LiteSpeed, WP Rocket o WP Fastest Cache, puoi evitare cache duplicate, ridurre al minimo il carico del server e garantire che il tuo sito WordPress funzioni altrettanto bene su dispositivi mobili e desktop.