Velocità e prestazioni al massimo con la cache (guida pratica alla gestione della cache con Elementor)

Il web designer moderno vive nell’ansia delle performance: strumenti come Elementor rendono la creazione dei siti web più agevole ma, di contro, aumentano la complessità del codice che il browser e il server devono elaborare.

Per bilanciare il tutto, serve ottimizzazione: si può ottimizzare il server, oppure intervenire sul lato network implementando una CDN. Si possono (anzi, si devono) ottimizzare gli asset come immagini e font, ed infine la strategia più famosa di tutte: la cache, croce e delizia di ogni persona che crea e sviluppa siti web.

In questo articolo parleremo della cache, strumento che rappresenta una delle strategie più efficaci per velocizzare un sito e, inoltre, è una delle cause più frequenti di problemi, soprattutto in fase di modifica del sito.

Come funziona Elementor

Elementor non è un semplice generatore HTML, ma un sistema dinamico con tantissime parti in movimento; quelle che riguardano la cache sono le seguenti:

• Gestione CSS:
  Elementor li gestisce in due modi. Il metodo “File Esterno” (consigliato) genera file CSS statici che possono essere memorizzati in cache dal browser. Tuttavia, richiede una perfetta sincronizzazione con la cache di pagina: se Elementor rigenera il CSS ma la cache è vecchia, il sito apparirà in maniera errata o avrà evidenti problemi di layout e comportamenti imprevisti (FOUC, ovvero “Flash of Unstyled Content”);
  
• Asset Dinamici (JS):
  Elementor dipende da JavaScript per effetti e interazioni (form, animazioni). Ritardare l’esecuzione di questi script (Delay JS) può bloccare il sito o portare a comportamenti anomali. Inoltre, i token di sicurezza (in gergo, “nonces”) dei form scadono dopo circa 12 ore, richiedendo un refresh della cache inferiore a tale soglia.
  
• Widget Cache:
  introdotta di recente, la cache a livello di singolo widget può migliorare il caricamento di pagine complesse, a patto che si tratti di elementi statici. Si può gestire direttamente dalla scheda Avanzate del singolo widget (ma bisogna attivarla prima dalle caratteristiche di Elementor)
  

I livelli di caching

Un sito veloce utilizza quattro livelli di cache simultanei:

1. Browser Caching (client):
   salva asset statici (immagini, font) sul dispositivo dell’utente
   
2. Page Caching (server):
   salva l’HTML generato in file statici per ridurre il TTFB. Critico per il frontend
   
3. Object Caching (database):
   salva le query al database in memoria (es. Redis). È fondamentale per velocizzare l’Editor di Elementor (backend), dove la cache di pagina è inutile
   
4. OpCode Caching (PHP):
   il codice PHP deve essere interpretato ogni volta che un utente richiede una pagina; questo tipo di cache mantiene il codice PHP in memoria per evitare di ricompilarlo ad ogni richiesta della stessa pagina, velocizzando di molto le operazioni di creazione della pagina e diminuendo il carico di lavoro del server.

Panoramica delle diverse soluzioni

Il punto di forza di WordPress è il suo enorme ecosistema di plugin, ma spesso è anche causa di confusione proprio a causa della grande offerta. Per fortuna, nella maggior parte dei casi, i plugin che vengono utilizzati maggiormente sono anche quelli che funzionano meglio (ma non è sempre così).

Fra le diverse opzioni, insieme ai famosi W3Total Cache, WP Fastest Cache o WP Super Cache (che è sviuppato direttamente da Automattic), emergono tre plugin che sono fra i più apprezzati: WP Rocket, LiteSpeed Cache e Autoptimize

1. WP Rocket (Hosting Standard/Apache/Nginx)

Soluzione premium “all-in-one” ideale per tutti gli hosting. È particolarmente indicato per Elementor in quanto include delle logiche di compatibilità automatica specifiche che vanno a risolvere i problemi di configurazione più comuni.

Punti Critici:
la funzione “Delay JavaScript” è molto efficace nell’aumentare i punteggi di PageSpeed ma influisce negativamente su menu e popup se non si escludono script come elementor-frontend e jquery. La funzione di rimozione degli stili CSS superflui richiede un po’ di monitoraggio.

WP Rocket è una scelta scelta sicura e stabile per server non-LiteSpeed, ma ovviamente ha un costo, in quanto non si tratta di un plugin gratuito.

3. LiteSpeed Cache (solo per server LiteSpeed)

A differenza di tutti gli altri plugin, LiteSpeec Cache dialoga direttamente con le funzioni di cache del server LiteSpeed. Non è un semplice plugin che esegue codice PHP, ma sfrutta la potenza del server in maniera più diretta, ottimizzando drasticamente le prestazioni (e risultando anche più leggero nell’esecuzione).

Supporta ESI (Edge Side Includes), che permette di avere pagine statiche con solo alcune parti dinamiche (es. carrello aggiornato su pagina in cache). Include ottimizzazione immagini e CDN gratuiti via QUIC.cloud (servizio che però, superata una certa soglia, diventa a pagamento)

Indispensabile su hosting LiteSpeed (es. Hostinger, A2). Non è consigliato su server che non usano LiteSpeed: sarebbe solo uno spreco di risorse!

4. Autoptimize (Budget/Sviluppatori)

Autopmitize non è una vera e propria cache ma è più un ottimizzatore di asset; utile per ottimizzazioni granulari se non si ha budget o se il sito non è eccessivamente esigente.

Punti Critici:
l’aggregazione dei file CSS/JS è spesso sconsigliata, in quanto grazie ad HTTP/2 si riescono a caricare più risorse in parallelo ottimizzando molto i tempi di caricamento. Richiede esclusioni manuali complesse per non avere problemi con Elementor (e altri builder, beninteso).

Problemi (e soluzioni) comuni causati dalla cache

La cache, purtroppo, non risolve solamente i problemi di velocità di un sito, ma potrebbe causare qualche grattacapo se non usata in modo corretto.

Uno degli errori più frequenti che si possono commettere riguarda l’uso della cache durante la fase di creazione del sito: non farlo!

Non attivare nessuna ottimizzazione o cache durante la fase di creazione del sito; al massimo, se il tuo hosting lo prevede, attiva la object cache (Redis per esempio) e la Opcache per PHP, ma lascia perdere qualsiasi altra strategia di ottimizzazione se non vuoi impazzire mentre crei il tuo sito.

Solo una volta terminato il lavoro, puoi passare alla fase finale, ovvero: pulizia (rimozione di codice, pagine,plugin inutilizzati) e ottimizzazione.

Oltre a questo, ecco una breve lista dei problemi più comuni causati dalla cache e la possibile souzione:

• Aggiornamento Fantasma (Layout non aggiornato):
  causato da desincronizzazione tra CSS Elementor e HTML in cache.
  
  Soluzione: “cancellare la cache” in Elementor > Strumenti, poi svuotare la cache del tuo plugin (qualsiasi esso sia) se è attivo.
  
• Popup o Form bloccati:
  spesso dovuto al “Delay JS” o nonce scaduti.
  
  Soluzione: escludere i file JS di Elementor Pro dal defer (ritardo nell’esecuzione) e impostare la cache sotto le 12 ore (10, per esempio).
  
• Editor bloccato/caricamento infinito:
  memoria esaurita, cache attiva nel backend.
  
  Soluzione: aumentare il limite di memoria PHP (512M è il valore consigliato) e usare Object Cache (Redis).

Anche se è impossibile parlare di tutte le sfaccettature di questo argomento, speriamo che questo articolo sia una buona base di partenza per comprendere come sfruttare al meglio la cache con Elementor!