Come velocizzare un sito web realizzato con Elementor: guida completa in 24 passaggi

Un sito web realizzato con Elementor può essere molto bello e funzionale, ma anche molto lento se non si seguono alcune buone pratiche. La velocità di un sito web è fondamentale per offrire una buona esperienza agli utenti e per migliorare il posizionamento sui motori di ricerca.

In questo articolo, ti mostrerò come velocizzare un sito web realizzato con Elementor in 24 passaggi, dalla scelta del tema e del hosting, all’ottimizzazione delle immagini e dei plugin, fino all’uso di strumenti come il caching e il CDN. Seguendo questa guida completa, potrai rendere il tuo sito web più veloce e performante, senza rinunciare alla qualità del design e dei contenuti.

Prima di iniziare questo tutorial, ti consiglio vivamente di testare il tuo sito con il Network report di Chrome Dev Tools + KeyCDN’s Performance Test. Questi ti dicono se il tuo sito Elementor è lento a causa di CSS/JavaScript, immagini, font o TTFB (che è anche il 40% di LCP nei core web vitals).

Gli esperimenti sono coperti nei passi da 1 a 4, i font nei passi da 3 a 6, i CSS/JavaScript nei passi da 7 a 14, le immagini nei passi da 15 a 17 e il TTFB/uso della memoria sono principalmente legati all’hosting/CDN nei passi da 18 a 20.

È vero, Elementor aggiunge più CSS/JavaScript di Gutenberg. Ma questo diventa un problema solo quando installi plugin extra di Elementor e non ottimizzi correttamente il tuo sito. Poi controlli il tuo report di copertura e vedi questo. Un host/CDN/plugin di cache lento non aiuta neanche.

1. Attiva gli esperimenti Elementor

Vai su Elementor → Impostazioni → Esperimenti, quindi attiva quanto segue:

Icone di font in linea – le icone di font (ad esempio Font Awesome + eicons) verranno caricate in linea come SVG senza caricare l’intera libreria. Questo significa meno richieste CSS e problemi di blocco del rendering CSS in PSI.

Lazy Load delle immagini di sfondo – questa funzione attiva il caricamento differito delle immagini di sfondo.

Output DOM ottimizzato – affronta il problema di evitare una dimensione DOM eccessiva in PSI rimuovendo i wrapper div non necessari (elementor-inner, elementor-row e elementor-column-wrap).

Miglioramento del caricamento degli asset – carica solo le librerie lightbox e screenful, la libreria dialog e la libreria share links quando vengono utilizzate in una pagina, risultando in meno JavaScript sul tuo sito.

Miglioramento del caricamento dei CSS – carica solo i CSS dei widget e le animazioni dove vengono utilizzati (caricandoli in linea), risultando in meno CSS e risorse che bloccano il rendering sul tuo sito.

Condivisione dei dati di utilizzo – la condivisione dei dati con gli sviluppatori dei plugin richiede una piccola quantità di risorse del server che vengono utilizzate per inviare i dati. Pertanto, ti consiglio di disabilitare questa opzione in tutti i plugin.

2. Cambia il metodo di stampa CSS in “File esterno”

Sebbene esistano pro e contro per ciascuno, i file CSS esterni possono essere memorizzati nella cache e non aumentano le dimensioni dell’HTML. Puoi testare i risultati per il tuo sito, ma generalmente consiglio un file esterno.

3. Disabilita caratteri/icone predefiniti

Nei prossimi due passaggi, caricheremo solo i font necessari (localmente utilizzando woff2) mentre li precarichiamo. E il primo passo è disabilitare sia le icone di Google Fonts che quelle di Font Awesome.

4. Ospitare i caratteri localmente utilizzando woff2

Se fonts.gstatic.com o altri caratteri di terze parti vengono caricati sul tuo sito, ospitali invece localmente. Passaggio 1: vai al sito web di Google Fonts website (o un altro sito di caratteri) e scarica i tuoi caratteri. Assicurati di selezionare solo i pesi necessari, poiché troppi pesi aumenteranno le dimensioni del file.

Passaggio 2: convertili in woff2 utilizzando CloudConvert (i file woff2 sono più piccoli dei .ttf).

Passaggio 3: carica i caratteri come caratteri personalizzati (Tony Teaches Tech ha un video tutorial). Se non utilizzi Elementor Pro, OMGF li scarica automaticamente quando fai clic su “Salva e ottimizza” nelle impostazioni. Può anche caricare i caratteri in anticipo (precaricandoli) oppure puoi scegliere di non caricarli affatto [screenshot]. Web Squadron ha un altro video tutorial i se hai bisogno di ulteriori chiarimenti al riguardo.

5. Precarica i caratteri

L’ultimo passo è di precaricare i font che si caricano above the fold.

Copia i nomi dei loro file, poi precaricali, cosa che puoi fare nella maggior parte dei plugin di ottimizzazione. Dovresti anche precaricare eicons e Font Awesome Icons se li usi. Una volta che i font sono precaricati, dovresti vedere diminuire il tempo di blocco (che è mostrato come la barra marrone nel grafico Waterfall).

Check your Console report for errors since preloading unused fonts decreases performance.

6. Imposta il caricamento dei Google Fonts su “Swap” (se stai utilizzando Google Fonts)

Impostare il caricamento dei Google Fonts su “swap” risolve il problema garantendo che il testo rimanga visibile durante il caricamento del webfont. Tuttavia, Font Awesome raccomanda font-display: block poiché li rende non bloccanti per il rendering. Puoi anche cambiare la proprietà font-display nei caratteri personalizzati di Elementor Pro. Zach Leatherman ha un’analisi dettagliata se vuoi approfondire le definizioni e i pro e i contro di ciascuno.

Per aggiungere la visualizzazione dei caratteri: scambia manualmente, trova il file CSS del tuo carattere o cerca il carattere utilizzando String Locator se non sei sicuro di dove si trova. Quindi aggiungi semplicemente font-display: passa al carattere.

@font-face {
font-family: "Lato Regular";
font-weight: 300;
font-style: normal;
src: url("fonts/Lato-Regular-BasicLatin.woff2") format("woff2");
font-display: swap;
}

7. Disabilita la libreria wp-block di Gutenberg

Dato che stai utilizzando Elementor, puoi disabilitare Gutenberg che aggiunge un file CSS aggiuntivo al tuo sito (/wp-includes/css/dist/block-library/style.min.css). Puoi trovare questo nel tuo codice sorgente:

Puoi utilizzare il plugin Disable Gutenberg o lo script manager in Perfmatters. Se utilizzi Gutenberg solo in determinate sezioni del tuo sito, entrambe le opzioni ti consentono di controllare dove viene caricato.

8. Remove Unused CSS With Elementor Exclusions

Il modo più veloce per rimuovere i CSS inutilizzati è con FlyingPress, Perfmatters o LiteSpeed ​​Cache. WP Rocket è più lento perché carica i CSS utilizzati in linea invece di un file separate. Questo è negativo perché aumenta le dimensioni dell’HTML e non può essere memorizzato nella cache. Mentre quasi ogni singolo plug-in di ottimizzazione ed “esperto di velocità” concorda che un file separato sia migliore , WP Rocket sembra più interessato ai punteggi rispetto alla velocità di navigazione.

Escludi i fogli di stile del contenitore Flexbox:

/wp-content/plugins/elementor/assets/css/frontend-lite.min.css
/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css

Escludi selettori di menu permanenti:

#elementor-device-mode
.elementor-sticky--active

Ecco come appare in Perfmatters. Per il metodo CSS utilizzato, il file è peggiore per i punteggi, ma più veloce per i visitatori. Per quanto riguarda il comportamento dei fogli di stile, la rimozione è la soluzione più rapida, ma dovrai escludere file/selettori se danneggiano il tuo sito. E se “rimuovi” causa troppi problemi, “ritardo” è l’impostazione migliore successiva.

9. Usa Trasforma + Translate nelle animazioni

Non che approvi le animazioni, ma utilizzo la trasformazione + translate per evitare cambiamenti di layout (CLS).

Puoi utilizzare Happy Addons per aggiungerli. La trasformazione CSS ti consente di modificare la larghezza/altezza delle animazioni mentre la traduzione CSS ti consente di spostare gli elementi senza causare spostamenti del layout.

10. Codifica il tuo Header/Footer in CSS

Poiché il tuo header/footer viene caricato su tutto il tuo sito, dovrebbero essere leggeri, specialmente il tuo header perché viene caricato in alto. Il CSS è molto più leggero del codice di Elementor. Dopo aver fatto ciò, “Elementor” è apparso circa 150 volte nel mio codice sorgente (rispetto a 2.008).

11. Ritardare JavaScript con le esclusioni di Elementor

Quando si utilizza WP Rocket o l’impostazione “ritarda tutto il JavaScript” in plugin come Perfmatters e FlyingPress, di solito è necessario escludere i file di Elementor o potrebbe rompere il tuo sito. Puoi anche utilizzare Flying Scripts per aggiungere manualmente i file JavaScript, ma “ritarda tutto” è di solito più potente.

Perfmatters ha una lista di esclusioni e lo stesso vale per WP Rocket. Controlla la documentazione del plugin poiché “ritarda tutto” non funziona bene con Elementor a meno che tu non escluda i file. Perfmatters dice anche che “potrebbe variare leggermente in base agli elementi e ai modelli che stai utilizzando in Elementor. Se non stai utilizzando molte animazioni, potresti non aver bisogno di alcuna esclusione per Elementor.”

Elementor:

jquery.min.js
jquery.smartmenus.min.js
webpack.runtime.min.js
webpack-pro.runtime.min.js
frontend.min.js
frontend-modules.min.js
elements-handlers.min.js
elementorFrontendConfig
ElementorProFrontendConfig
imagesloaded.min.js

Elementor search:

webpack-pro.runtime.min.js
webpack.runtime.min.js
elements-handlers.min.js
jquery.smartmenus.min.js

Elementor Pro

a/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
/wp-includes/js/imagesloaded.min.js
ElementorProFrontendConfig
elementorFrontendConfiga

Ecco come appare in Perfmatters:

12. Testa i plugin per CSS, JS, uso elevato della memoria

Questa è la “trappola” di cui parlavo.

Installa il plugin sbagliato e può aggiungere una quantità ridicola di CSS/JavaScript che puoi controllare nel rapporto di copertura degli strumenti di sviluppo di Chrome (o nel gestore di script Perfmatters). Mentre la maggior parte di questi file sono correlati a DethemeKit, anche Elementor Pro aggiunge un bel po’ di CSS/JavaScript.

I plugin che eseguono attività in background in modo continuo non sono buoni poiché aumentano l’uso della memoria. Questo è comune con i plugin di sicurezza, ottimizzazione delle immagini, analisi, backup e alcuni plugin SEO. Anche Elementor aumenta l’uso della memoria (ed è per questo che non suggerisco di usarlo su hosting condiviso).

WP Hive è ottimo per dirti se un plugin aumenta l’uso della memoria. Basta installare l’estensione Chrome, sfogliare il repository dei plugin di WordPress e ti dirà sul lato destro. Tuttavia, prendi “impatto minimo su PageSpeed” con un granello di sale poiché sembra testare solo i plugin fuori dalla scatola. Ma una volta che inizi a aggiungere contenuti con Elementor, influisce sui punteggi.

13. Disabilita i plugin che non sono utilizzati

I plugin di Elementor sono notoriamente noti per il caricamento su tutto il sito.

Se ne hai bisogno solo su pagine/post specifici, puoi ridurre CSS/JavaScript scaricandoli in Perfmatters o Asset CleanUp. Io uso Perfmatters poiché ha molte più ottimizzazioni.

Una volta che hai abilitato il gestore di script (Impostazioni → Perfmatters → Extra → Gestore di script), vai alle impostazioni del gestore di script e abilita la modalità di test. Questo ti permette di testare il gestore di script senza che rompa il tuo sito, ma ricorda di disabilitarlo quando sei pronto a pubblicare le modifiche.

Visualizza lo script manager e scarica i plugin dove non vengono utilizzati (ovunque tranne pagine, post, URL corrente, Regex, ecc.). Questo ovviamente dipende da quali plugin usi e dove.

14. Utilizza meno widget/colonne di Elementor

Questo video di Oooh Boi contiene alcuni ottimi suggerimenti per utilizzare meno widget/colonne Elementor, il che si traduce in meno codice. Sicuramente vale la pena guardarlo tutti i 15 minuti se non l’hai già visto.

La parte principale inizia alle 3:23.

Elementor ha anche un video su questo:

15. Carica immagini in WebP

Il motivo per cui desideri caricare manualmente le immagini WebP è evitare l’uso di plug-in (che gravano sul server) e perché i CDN di immagini come Cloudflare Polish non sempre forniscono immagini WebP. Anche quando Cloudflare deve aver pensato che il risparmio non fosse abbastanza elevato e non li ha convertiti, ho scoperto che la conversione manuale generalmente comportava una riduzione delle dimensioni dei file di oltre il 50%.

Puoi verificare se le immagini vengono pubblicate in WebP utilizzando Chrome Dev Tools:

16. Usa Optimole (o un CDN per immagini) per ottimizzare le immagini

Optimole fa un lavoro migliore rispetto ad altri plugin, e Cloudflare Mirage/Polish sono ancora migliori.

Mentre la maggior parte dei plugin comprime le immagini e le converte in WebP, non tutti supportano AVIF, il ridimensionamento delle immagini per dispositivi mobili o le ottimizzazioni basate su viewport/rete (come il degrado della qualità dell’immagine su connessioni lente). Quindi, se devi utilizzare un’ottimizzazione delle immagini, ti consiglio Optimole.

I CDN per immagini sono preferiti perché non utilizzano risorse del server o occupano spazio di archiviazione. Invece, le immagini vengono ottimizzate al volo (dal tuo CDN, non dal tuo server) senza la necessità di fare backup.

Per risolvere questi problemi, ritaglio/ridimensiono le immagini e le carico in WebP. Oltre a ottimizzare le immagini Above the Fold nel passaggio 17, tutto viene eseguito dal mio plug-in/CDN della cache. Assicurati solo di aggiungere le dimensioni dell’immagine nella scheda Layout di Elementor altrimenti potresti ricevere l’avviso “larghezza/altezza esplicita”.

Ho un tutorial completo sull’ottimizzazione delle immagini se hai ancora bisogno di aiuto:

17. Carica in anticipo le immagini del viewport ed escludile dal lazy load

Le immagini sopra la piega dovrebbero essere escluse dal lazy load o si aggiunge un ritardo nel caricamento delle risorse e danneggia LCP. Dovrebbero anche essere precaricate per renderle ad alta priorità, il che migliora anche LCP.

Il modo più semplice è precaricare le immagini critiche in Perfmatters o FlyingPress. Basta impostare il numero di immagini che di solito si caricano sopra la piega (di solito 2-3) e entrambe vengono fatte automaticamente. Altri plugin ti fanno escludere le immagini per URL o classe, poi precaricare manualmente le immagini, il che può richiedere tempo. Ci sono plugin per aiutare, ma è comunque più lavoro di Perfmatters/FlyingPress.

LiteSpeed Cache e WP Rocket rendono relativamente facile escludere le immagini dal lazy load, ma non le precaricheranno. Potresti anche usare un plugin per aggiungere classi a Elementor per rendere questo più facile.

18. Utilizza l’hosting LiteSpeed con archiviazione NVMe

ChemiCloud utilizza server LiteSpeed, SSD NVMe, Redis e più CPU/RAM che possono scalare attraverso il loro add-on Turbo Boost. Configurerai LiteSpeed Cache (che è gratuito e fa un ottimo lavoro con i core web vitals) in cima al CDN di QUIC.cloud o Cloudflare APO. Questo supera altre configurazioni di hosting in termini di TTFB, prezzo, supporto e scalabilità. Con una valutazione di 5/5 su TrustPilot, è ovvio che altri host sono popolari per il marketing, ma non sono all’altezza quando si guardano effettivamente le specifiche.

Note

• I server LiteSpeed sono più veloci di Apache.
• I server LiteSpeed sono più efficienti in termini di CPU/memoria.
• Gli SSD NVMe sono più veloci degli SSD SATA, spesso con velocità di lettura/scrittura 6 volte più veloci.
• MariaDB è più potente di MySQL (ecco un sondaggio di Facebook fatto sui due).
• Redis è più potente di Memcached, specialmente per siti dinamici/WooCommerce.

Host non raccomandati

Gli host mainstream come SiteGround, Hostinger, WPX e SlowDaddy non sono all’altezza delle aspettative. Utilizzano SSD SATA lenti, nessun Redis e risparmiano su CPU/RAM/inodes (causando problemi di CPU e aggiornamenti forzati).

Diventa più costoso con i rinnovi, gli add-on, gli aumenti di prezzo e il tempo sprecato a gestire incidenti come il DNS di SiteGround che ha causato la deindicizzazione di 2M di siti in Google. L’unico motivo per cui vedi “recensioni entusiastiche” è perché SiteGround minaccia le persone che scrivono recensioni negative, controlla i gruppi di Facebook e affiliati non veritieri. Hostinger scrive recensioni false e truffa le persone, quindi non credere a “illimitato” storage/siti web/banda sul loro sito web.

WPX non è ideale per siti dinamici/internazionali (dicono letteralmente che puntano a un TTFB di <400ms). Tecnologia lenta + risorse limitate + prezzi + incidenti + supporto scadente… non ne vale la pena.

19. Utilizza Rocket.net + Cloudflare Enterprise per un TTFB globale di 100ms

Se l’hosting più veloce significa il TTFB più veloce, Rocket.net ha una media di 100ms.

È quello che uso e sono particolarmente buoni per il pubblico internazionale e i siti dinamici/WooCommerce (da qui il TTFB globale di 100ms) grazie a Cloudflare Enterprise gratuito, 32 core CPU + 128GB RAM, SSD NVMe, Redis/Redis Pro e PHP di LiteSpeed.

A parte le mie opinioni di parte, sono diventati molto popolari nei gruppi Facebook dove Ben Gabler (CEO) ha fatto un AMA. Hanno tutte recensioni TrustPilot da 5/5 stelle dove vedrai persone che sono passate a Rocket.net da altri host (ma non il contrario) anche quando cerchi le 13.000 recensioni TrustPilot di SG. Puoi vedere più risultati di migrazione se cerchi “TTFB” nel loro TrustPilot.

20. Utilizza la cache di pagina completa

Indipendentemente dalle mie raccomandazioni di hosting/CDN, dovresti utilizzare la cache di pagina completa.

Raccomando Cloudflare APO (o meglio, Cloudflare Enterprise) o QUIC. Il CDN di SiteGround supporta la cache di pagina completa, ma non ho idea del perché lo utilizzeresti al posto di APO che ha più PoPs ed è $5/mese, a meno che SiteGround non voglia che tu li paghi invece di Cloudflare.

21. Configura le impostazioni di hosting

Alcuni di questi si trovano in Elementor → Informazioni di sistema, ma ti consigliamo di aprire la dashboard dell’hosting e configurare quanto segue (ovviamente alcuni dipendono dal tuo host):

22. Ripensa al tuo plugin di ottimizzazione

Utilizza LiteSpeed ​​Cache se utilizzi un server LiteSpeed, FlyingPress in tutti gli altri casi.

WP Rocket ha rilasciato solo 1 nuova funzionalità dopo il 2020 se controlli il registro delle modifiche, manca di molte funzionalità importanti e anche RocketCDN/Imagify mancano di funzionalità. Sono praticamente diventati “stantii”. Ho usato WP Rocket prima di FlyingPress e ho subito notato che il mio sito era più veloce dopo il cambio.

SiteGround Optimizer va bene per la memorizzazione nella cache, ma è uno dei peggiori plugin per i fondamentali web vitals. Di solito consiglio di disabilitare tutte le impostazioni (tranne la memorizzazione nella cache dinamica + Memcached, quindi utilizzare FlyingPress o Perfmatters per tutto il resto. Inoltre, è pieno di problemi di compatibilità che il loro supporto (Hristo) ama attribuire a temi/plugin di terze parti se controlli i forum di supporto .

23. Sezioni Lazy Render Elementor

Per farlo avrai bisogno di FlyingPress o LiteSpeed ​​Cache.

Il rendering lento è come il caricamento lento delle immagini solo per qualsiasi elemento della pagina utilizzando i selettori CSS. Anche se #footer e #comments sono entrambi comuni, puoi anche eseguire il rendering lento delle sezioni Elementor.

Visualizza il tuo sito, quindi fai clic con il pulsante destro del mouse sulla sezione Elementor di cui desideri eseguire il rendering lento. Esaminalo in Chrome Dev Tools, fai clic con il pulsante destro del mouse sul codice, copia il selettore CSS e incollalo in FlyingPress/LSC.

24. Tieni sotto controllo le dimensioni del database per evitare il database bloat

Ecco un riepilogo:

• Rimuovi il bloat utilizzando FlyingPress, Perfmatters o Debloat.
• Usa il plugin Disable WooCommerce bloat per WooCommerce.
• Rimuovi il bloat del database (inclusi i tavoli inutilizzati) con WP-Optimize.
• Disabilita tutti i moduli/impostazioni inutilizzati nei plugin se non li usi.
• Consenti Heartbeat solo quando modifichi pagine/post (fonte: Perfmatters).

Le impostazioni di gonfiamento di FlyingPress dovrebbero assomigliare a queste:

Il problema con la pulizia del database con i plugin della cache è che non eseguono backup (WP-Optimize li prende tramite UpdraftPlus), eliminano tutte le revisioni dei post (WP-Optimize può conservarne alcune) e non rimuovono le tabelle inutilizzate rimaste dietro dai vecchi plugin (mentre WP-Optimize lo fa).

Ultimate Addons, Premium Addons, Rank Math e molti altri plugin sono basati su moduli, il che significa che puoi disattivare le funzionalità che non usi. Esiste anche Ultimate Adds For Elementor e utilizza troppi caricamenti automatici, quindi, ancora una volta, devi stare attento a quali plugin usi.

Conclusione: Elementor è lento, ma il tuo sito non deve esserlo

Il mio blog è incentrato sulla velocità, quindi utilizzo GeneratePress (Elementor non avrebbe senso per me).