Introduzione: Il Problema della Velocità con i Page Builder
Una delle critiche più comuni ai page builder è l’impatto sulle prestazioni. Elementor, come qualsiasi strumento che genera HTML e CSS dinamicamente, aggiunge peso alle pagine. Ma con le giuste pratiche, un sito Elementor può essere veloce quanto uno sviluppato a mano. Il segreto è capire cosa rallenta il sito e come risolverlo.
In questa guida analizzeremo i problemi di performance più comuni con Elementor e le soluzioni pratiche per risolverli, dalle impostazioni del plugin all’infrastruttura server.
Perché Elementor Può Rallentare il Sito
Elementor può impattare le prestazioni in diversi modi:
1. Eccesso di Elementi DOM
Ogni sezione, colonna e widget genera elementi HTML (nodi DOM). Una pagina con 50 widget potrebbe avere centinaia di nodi DOM. Google raccomanda di mantenere il DOM sotto i 1500 nodi; le pagine Elementor complesse possono superare facilmente i 2000-3000 nodi.
Soluzione: usa i Container Flexbox al posto delle Sezioni classiche (riducono i nodi del 30-50%), evita sezioni annidate non necessarie, rimuovi widget e sezioni inutili.
2. CSS e JavaScript Non Utilizzati
Elementor carica CSS e JS per tutti i widget disponibili, anche se la pagina ne usa solo una frazione. Questo significa kilobyte di codice scaricato inutilmente.
Soluzione: attiva le ottimizzazioni sperimentali di Elementor per il caricamento selettivo degli asset (vedi sotto).
3. Immagini Non Ottimizzate
Le immagini sono quasi sempre il fattore principale di lentezza. Un’immagine da 2 MB caricata in un widget Image rallenta l’intera pagina.
Soluzione: comprimi tutte le immagini, usa il formato WebP, implementa lazy loading e utilizza dimensioni appropriate per il contesto.
4. Font Esterni
Ogni Google Font caricato richiede una richiesta HTTP ai server di Google. Più font e pesi carichi, più lenta sarà la pagina.
Soluzione: limita i font a 2-3 al massimo, con massimo 3-4 pesi ciascuno. Oppure carica i font localmente.
5. Animazioni e Effetti
Le animazioni CSS e gli effetti di parallax richiedono risorse del browser. Troppe animazioni, specialmente su mobile, possono causare jank (animazioni non fluide) e rallentamenti.
Ottimizzazioni nelle Impostazioni di Elementor
Elementor include diverse opzioni per migliorare le prestazioni direttamente dalle impostazioni del plugin:
Funzionalità e Esperimenti
Vai su Elementor → Impostazioni → Funzionalità (o Esperimenti nelle versioni precedenti):
- Improved Asset Loading — carica CSS e JS solo per i widget effettivamente utilizzati nella pagina. Questa singola opzione può ridurre il peso degli asset del 50-80%
- Flexbox Container — genera meno nodi DOM rispetto alle sezioni classiche
- Lazy Load Background Images — applica il lazy loading anche alle immagini di sfondo CSS
- Inline Font Icons — incorpora le icone Font Awesome nel CSS della pagina invece di caricare l’intero file di font
- Optimized Loading of Google Fonts — ottimizza il caricamento dei Google Fonts con preconnect e font-display: swap
Caricare i Font Localmente
Per conformità al GDPR e migliori prestazioni, puoi caricare i Google Fonts localmente invece che dai server di Google:
- Vai su Elementor → Impostazioni → Avanzate
- Trova l’opzione Google Fonts Loading
- Seleziona Local
Elementor scaricherà i font e li servirà dal tuo server, eliminando le richieste esterne a Google.
Ottimizzazione delle Immagini
L’ottimizzazione delle immagini è il singolo intervento con il maggiore impatto sulla velocità:
Compressione
Installa un plugin di compressione immagini:
- ShortPixel — eccellente rapporto qualità/compressione, supporto WebP nativo, API con 100 crediti gratuiti/mese
- Imagify — dell’ecosistema WP Rocket, tre livelli di compressione
- Smush — compressione gratuita fino a 50 immagini alla volta
Dimensionamento Corretto
Non usare immagini più grandi del necessario:
- Full width hero images: 1920px di larghezza
- Immagini in colonne: 600-800px per colonne al 50%
- Miniature e icone: 200-400px
- Retina: se vuoi supportare display Retina, usa il doppio delle dimensioni mostrate
Formato WebP
Il formato WebP offre compressione del 30-50% migliore rispetto a JPEG, senza perdita percepibile di qualità. La maggior parte dei plugin di compressione può convertire automaticamente le immagini in WebP e servirle ai browser che le supportano (praticamente tutti i browser moderni).
Caching
Il caching è essenziale per le prestazioni di qualsiasi sito WordPress:
Plugin di Caching Consigliati
- WP Rocket — il più completo e user-friendly (premium). Compatibilità eccellente con Elementor
- FlyingPress — alternativa moderna e performante (premium)
- LiteSpeed Cache — gratuito, eccellente su server LiteSpeed
- W3 Total Cache — gratuito, configurazione più complessa ma molto flessibile
Cosa Deve Fare un Plugin di Cache
- Page caching — salva l’HTML generato per servire pagine statiche
- Minificazione CSS/JS — rimuove spazi e commenti dal codice
- Combinazione file — unisce più file CSS/JS in uno solo (attenzione: può causare problemi con Elementor, testa attentamente)
- Lazy loading — carica immagini e iframe solo quando visibili
- Preloading — precaching delle pagine per navigazione istantanea
- Database optimization — pulisce revisioni, transient e dati temporanei
CDN (Content Delivery Network)
Un CDN serve i file statici del tuo sito (immagini, CSS, JS) da server distribuiti in tutto il mondo, riducendo la distanza tra il server e l’utente:
- Cloudflare — CDN gratuito con protezione DDoS e ottimizzazione automatica
- BunnyCDN — economico e performante, ottimo rapporto qualità/prezzo
- KeyCDN — CDN premium con eccellente supporto
Ridurre gli Elementi DOM
Ecco strategie concrete per ridurre il numero di elementi DOM:
- Usa Container Flexbox — eliminano il wrapper della colonna, riducendo i nodi
- Rimuovi widget Spaziatore — usa padding e gap al posto degli Spacer
- Consolida le sezioni — se due sezioni adiacenti hanno lo stesso sfondo, uniscile in una sola
- Evita l’annidamento eccessivo — ogni livello di annidamento moltiplica i nodi DOM
- Usa meno widget — un singolo Editor di Testo con H2 e paragrafo è meglio di un Heading + un Text Editor separati
Strumenti di Analisi
Per misurare e monitorare le prestazioni:
- Google PageSpeed Insights — analisi completa con suggerimenti specifici (punta a un punteggio di 80+ su mobile)
- GTmetrix — report dettagliato con waterfall chart per identificare colli di bottiglia
- WebPageTest — test avanzati con filmstrip e confronti
- Chrome DevTools (Lighthouse) — analisi locale integrata nel browser
Conclusione
La velocità non è un lusso: è un requisito. Gli utenti abbandonano i siti che impiegano più di 3 secondi a caricare, e Google penalizza i siti lenti nei risultati di ricerca. Con le ottimizzazioni giuste — asset loading intelligente, immagini ottimizzate, caching e CDN — il tuo sito Elementor può raggiungere prestazioni eccellenti.
Per completare la configurazione del tuo sito, leggi la nostra guida su tutte le impostazioni di Elementor dalla A alla Z. Per un’ottimizzazione professionale delle prestazioni, contatta G Tech Group. Offriamo anche servizi di hosting WordPress ottimizzato per le massime prestazioni.
Passi Specifici per Velocizzare
1. Improved Asset Loading
Attiva in Elementor > Performance. Carica solo CSS/JS dei widget usati nella pagina.
2. CSS Print Method
Internal Embedding per pochi pagine, External File per siti grandi (cache browser).
3. Riduci il DOM
Ogni widget aggiunge elementi. Google consiglia meno di 1500 elementi DOM.
Strumenti di Misurazione
- PageSpeed Insights: pagespeed.web.dev
- GTmetrix: Waterfall chart dettagliato
- Chrome Lighthouse: Audit completo dal browser
Checklist Performance
- Attiva Improved Asset Loading
- Plugin di cache (WP Rocket, LiteSpeed Cache)
- Lazy loading immagini/video
- Comprimi e converti in WebP
- Minimizza CSS/JS
- Usa CDN (Cloudflare)
- Riduci sezioni/container
- Rigenera CSS (Strumenti Elementor)
Case Study: Da 35 a 95 su PageSpeed
Ecco un esempio reale di ottimizzazione su un sito Elementor:
- Prima: PageSpeed 35, LCP 6.2s, 2.800 elementi DOM
- Dopo: PageSpeed 95, LCP 1.8s, 900 elementi DOM
Cosa abbiamo fatto
- Attivato Improved Asset Loading: -40% CSS/JS caricato
- Convertito immagini in WebP e compresso: -70% peso immagini
- Ridotto sezioni da 45 a 18: -60% DOM elements
- Attivato WP Rocket con CDN Cloudflare
- Rimosso 3 addon non utilizzati
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: