🚀 Come velocizzare un sito Elementor: 3 consigli per PageSpeed Insights nel 2026
Elementor costruisce le pagine a partire da widget, stili e script, e ogni richiesta a una risorsa esterna aggiunge millisecondi al tempo di caricamento. Google Fonts, Font Awesome, Eicons: tre richieste di font che il plugin genera di default, anche se non le stai usando consapevolmente.
Il risultato: punteggi più bassi su PageSpeed Insights, una waterfall gonfiata su GTMetrix e visitatori che abbandonano prima che la pagina venga renderizzata completamente. Eppure Elementor stesso fornisce gli strumenti per disattivare ciascuna di queste richieste; devi solo sapere quali leve azionare.
Qui sotto trovi tre ottimizzazioni mirate che insieme possono tagliare fino a un secondo di tempo di caricamento senza plugin di caching né CDN. Ognuna è accompagnata da codice pronto all'uso per functions.php.
💡 Panoramica rapida:
- Disattivare Google Fonts da Elementor usando un'impostazione integrata o un hook nel tema, e ospitare i font in locale
- Sostituire il Font Awesome di Elementor con una versione Critical locale, così il browser carica solo le icone effettivamente usate
- Scambiare gli Eicons (le icone proprie di Elementor) con Font Awesome via CSS: un solo file invece di due pacchetti di font
1. Disattivare Google Fonts da Elementor
Di default, Elementor carica Google Fonts per ogni font usato nel design, anche se quei font li ospiti già in locale. Nella waterfall delle richieste questo compare come una chiamata HTTP separata a fonts.googleapis.com che blocca la renderizzazione del testo finché non è stata completata.
L'approccio più semplice è l'impostazione integrata di Elementor. Vai su Elementor → Settings → Performance e attiva Disattiva Google Fonts. Fatto questo, il plugin smetterà di generare richieste verso la CDN di Google e potrai collegare i font in locale tramite un child theme o un plugin come OMGF (Optimize My Google Fonts).
Se l'impostazione non fosse disponibile per qualche motivo o ti servisse un controllo programmatico, aggiungi questo codice al functions.php del child theme:
1 add_action( 'wp_enqueue_scripts', function() { 2 wp_dequeue_style( 'google-fonts-1' ); 3 wp_dequeue_style( 'google-fonts-2' ); 4 }, 99 );
L'hook con priorità 99 si attiva dopo che Elementor ha accodato i suoi stili e li rimuove prima che vengano emessi nel <head>. Dopo la disattivazione, collega i font in locale: scarica i pesi necessari in WOFF2, mettili nella cartella del tema e aggiungi le regole @font-face nei tuoi stili.
2. Sostituire il Font Awesome di Elementor con una versione locale
Elementor carica il pacchetto completo di Font Awesome (centinaia di icone) quando un sito tipico in realtà ne usa solo 5-7. I byte restanti bruciano semplicemente il tuo budget di caricamento.
La soluzione è un Critical Font locale. I plugin di caching (Swift Performance, LiteSpeed Cache) e gli strumenti specializzati (OMGF) possono scansionare la pagina, raccogliere l'elenco delle icone effettivamente usate e generare un webfont.css ridotto contenente solo i glifi necessari. Il file va nella cartella /wp-content/fonts/ sul tuo server: zero richieste esterne.
Per impedire a Elementor di caricare la sua versione e fargli usare la tua locale, aggiungi questo a functions.php:
1 add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 ); 2 add_action( 'elementor/frontend/after_enqueue_styles', function() { 3 wp_dequeue_style( 'font-awesome' ); 4 } ); 5 6 function replace_elementor_fa() { 7 wp_enqueue_style( 8 'font-awesome-local', 9 get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css', 10 array(), 11 '1.0.0' 12 ); 13 }
La prima riga accoda la tua versione locale con priorità alta. La seconda rimuove la versione di Elementor con l'handle font-awesome subito dopo che il plugin l'ha registrata. La funzione replace_elementor_fa specifica il percorso del file; sostituiscilo con quello generato dal tuo plugin di caching.
Dopo la configurazione, controlla la waterfall su GTMetrix: la richiesta a font-awesome.min.css di Elementor dovrebbe sparire e il webfont.css locale dovrebbe caricarsi dal tuo dominio.
3. Sostituire le icone di Elementor (Eicons) con Font Awesome
Elementor usa il suo font Eicons per le icone nei widget: frecce dello slider, icona del menu hamburger, pulsante di chiusura. L'intero pacchetto viene caricato ogni volta che si usa una qualsiasi icona, aggiungendo un'altra richiesta e un ritardo di rendering.
Dato che hai già Font Awesome in locale (punto 2), ha senso spostare gli Eicons su di esso: un solo file di font invece di due. Questa tecnica sostituisce le classi CSS .eicon e .eicon-menu-bar con glifi di Font Awesome.
Per prima cosa, rimuovi gli Eicons dalla coda. Questo codice va in functions.php:
1 add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' ); 2 3 function js_dequeue_eicons() { 4 if ( is_admin() || current_user_can( 'manage_options' ) ) { 5 return; 6 } 7 wp_dequeue_style( 'elementor-icons' ); 8 }
La funzione salta l'area di amministrazione così l'editor di Elementor continua a funzionare senza problemi e rimuove l'handle elementor-icons solo nel frontend.
Ora aggiungi la sostituzione CSS, tramite Appearance → Customize → Additional CSS oppure nel foglio di stile del child theme:
1 .eicon, 2 .eicon-menu-bar { 3 display: inline-block; 4 font: normal normal normal 14px/1 FontAwesome; 5 font-size: inherit; 6 text-rendering: auto; 7 -webkit-font-smoothing: antialiased; 8 -moz-osx-font-smoothing: grayscale; 9 } 10 11 .elementor-menu-toggle i:before { 12 content: "\f0c9"; 13 font-family: FontAwesome; 14 } 15 16 .elementor-menu-toggle.elementor-active i:before { 17 content: "\f00d"; 18 font-family: FontAwesome; 19 }
Il primo blocco riassegna le classi base degli Eicons al typeface FontAwesome. Il secondo e il terzo impostano glifi specifici: \f0c9 per l'icona hamburger (fa-bars) e \f00d per il pulsante di chiusura (fa-times). Le altre icone si sostituiscono allo stesso modo: apri i devtools, trova la classe del widget e aggiungi content con il codice del glifo dal cheatsheet di Font Awesome.
Dopo l'implementazione, controlla la console del browser per eventuali errori di caricamento dei font e passa la pagina su PageSpeed Insights. La richiesta a eicons.woff2 dovrebbe sparire dal report.
⁉️🤔 Domande frequenti
Questo metodo funziona con le versioni attuali di Elementor?
Sì, tutti e tre i consigli sono validi per l'attuale linea di Elementor. Gli hook
elementor/frontend/after_enqueue_stylesewp_enqueue_scriptsfanno parte dell'API pubblica del plugin e mantengono la retrocompatibilità. La documentazione ufficiale di Elementor sulla disattivazione dei Google Fonts descrive l'interruttore integrato in Elementor → Impostazioni → Performance. Per il consiglio n. 1, usalo per primo e tieni il codice come fallback per temi non standard.
Cosa devo fare se le icone spariscono nell'editor dopo aver sostituito gli Eicons?
Il codice di disattivazione degli Eicons salta l'area di amministrazione. I controlli
is_admin()ecurrent_user_can( 'manage_options' )assicurano che il font rimanga attivo nell'editor di Elementor. Se le icone spariscono comunque, verifica di aver aggiunto il codice alfunctions.phpdel tema attivo, non tramite un plugin di snippet che potrebbe essere eseguito anche sulle pagine di amministrazione.
Devo installare un plugin di caching per queste ottimizzazioni?
Per i consigli n. 1 e n. 3 non serve un plugin di caching; il codice in
functions.phpè sufficiente. Per il consiglio n. 2 (Critical Font) ti serve uno strumento che generi un Font Awesome ridotto: Swift Performance, LiteSpeed Cache, OMGF Pro oppure la creazione manuale con l'utilityfonttools. Senza questo passaggio, ti limiti a spostare il caricamento completo di Font Awesome dalla CDN di Elementor al tuo server, con un risparmio quasi nullo.
Quanto guadagno realmente in PageSpeed Score con questi tre interventi?
Ogni caso è diverso, ma ecco una linea guida: disattivare Google Fonts taglia 200-400 ms di tempo di caricamento, Font Awesome in locale fa risparmiare altri 150-300 ms e sostituire gli Eicons elimina una richiesta HTTP facendo guadagnare 50-150 ms. In totale, fino a un secondo di tempo di caricamento pieno, che su un hosting tipico da 10-20 $/mese fa salire il punteggio mobile di PageSpeed Insights di 5-15 punti.
Posso eliminare del tutto Font Awesome ed Eicons?
Puoi farlo, se sei pronto a ricostruire tutte le icone di Elementor in SVG. Significa sostituire manualmente le icone nei widget con file SVG caricati o usando un plugin come Iconic. Lo sforzo è notevole (decine di widget su un sito), ma il risultato è il frontend più leggero possibile. Per la maggior parte dei progetti, un Critical Font locale (punto 2) è un compromesso adeguato.
Cosa ottieni con queste modifiche su un sito reale?
Le tre tecniche descritte non richiedono plugin premium, una CDN o un cambio di hosting. Si tratta di lavorare esclusivamente sulle richieste dei font, la voce di costo in velocità più sottovalutata sui siti Elementor.
Se non hai ancora fatto un'ottimizzazione di base di WordPress, inizia con la guida completa alla velocità del sito, che copre caching, compressione CSS/JS e ottimizzazione delle immagini. Quando arrivi ai font, torna su questi tre passaggi e implementali uno per volta, controllando PageSpeed Insights dopo ciascuno.
Fai le prove su una copia del sito, fai un backup prima di modificare functions.php e spremi la massima velocità da Elementor.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.