Doctor Web

Agency
Fai crescere la tua attività!

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

Indice dei contenuti

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.

Fai crescere la tua attività con

doctor web agency - realizzazione siti web servizi seo sem social
Doctor web - numero verde

1. Attiva gli esperimenti Elementor

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

Elementor experiments 2

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.

Elementor with without experiments font optimization

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.

Come velocizzare un sito web realizzato con Elementor: guida completa in 24 passaggi image 1
Elementor css print method

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.

Elementor disable google fonts font awesome
Disable default fonts elementor

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.

Elementor custom font types

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).

Elementor eicons

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

Chrome dev tools preload error

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.

Elementor google fonts load swap

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:

Gutenberg wp block library css 1

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.

Disable gutenberg plugin

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.

Remove unused css elementor

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.

Css transform translate elementor

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).

Elementor source code

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:

Delay javascript elementor

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.

Elementor 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.

Wp hive high memory usage plugins
Elementor jquery plugin
PluginCategoryMemory ImpactPageSpeed Impact
All In One SEOSEOxx
Broken Link CheckerSEOx
DisqusCommentsx
Divi BuilderPage Builderxx
ElementorPage Builderxx
Elementor Premium AddonsPage Builderx
Elementor ProPage Builderxx
Elementor Ultimate AddonsPage Builderx
JetElementsPage Builderxx
JetpackSecurityxx
NextGEN GalleryGalleryxx
Popup BuilderPopupxx
Site Kit by GoogleAnalyticsx
Slider RevolutionSliderxx
Social Media Share ButtonsSocial Sharingx
WooCommerceWooCommercexx
WordfenceSecurityx
wpDiscuzCommentsxx
WPMLTranslatexx
Yoast SEOSEOx

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.

Perfmatters test mode

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.

Disable elementor plugins perfmatters
Disabilita i plugin Elementor se non vengono utilizzati in determinate aree del tuo sito
Disable plugins perfmatters

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.

Elementor layout

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:

Test webp images 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.

ImagifyShortPixelOptimoleSiteGround CDNBunny OptimizerCloudflare Mirage/Polish
Compression
WebPVia plugin
Mobile resizingxSP Adaptive Imagesx
AVIF supportxxx
Serve images from CDNxSP Adaptive ImagesCloudfront
CDN locations450176114300
No server usexxxx
No bloatxxOffloadingx
Plugin rating4.4/54.5/54.8/5
PriceFree 20MB/mo or $9.99/moFree 100 credits/mo or $3.99/moFree 5,000 visits/mo or $19.08/mo$14.99/mo$9.5/mo or $.03/GB w/ FlyingCDNVaries on Cloudflare Enterprise

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:

Optimize images in wordpress

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

GoDaddy Managed WP Deluxe PlanBluehost Choice Plus PlanSiteGround GrowBig PlanHostinger Business WP PlanChemiCloud WordPress Turbo Plan
ServerApache + NginxApache + NginxApache + NginxLiteSpeedLiteSpeed
CPU cores + RAM1 core + 512MBNot listedNot listed2 cores + 1.5GB3 cores + 3GB (scalable to 6/6)
Storage60GB SATA40GB SATA20GB SATA200GB SATA40GB NVMe in 10/11 locations
Object cacheMemcachedxMemcachedMemcachedRedis
DatabaseMySQLMySQLMySQLMariaDBMariaDB
Data centers9610811
Cache pluginxxSG OptimizerLiteSpeed CacheLiteSpeed Cache
CDNCloudflare (free)Cloudflare (free)SiteGround CDN ($14.99/mo)QUIC (but use Cloudflare APO)QUIC (but use Cloudflare APO)
Full page cachingxx
Control panelCustomcPanelSite ToolshPanelcPanel
Inodes250,000200,000400,000600,000500,000
IncidentsMalware, several data breachesDowntimesTTFBDNSCPU issuescontrols FB groupsDowntimesfake reviewsscamsbad pollNone
MigrationsPaidFree on qualified accounts only$30/siteUnlimited (but screws it up)10+ free (details)
SupportDDCDA
TrustPilot rating4.7/54.2/54.8/54.6/5 (fake)5/5
Intro price$10.49 (2 years)$5.45 (1 year)$4.99 (1 year)$3.99 (4 years)$5.99 (3 years)
Renewal price$16.99/mo$19.99/mo$29.99/mo$9.99/mo$19.95/mo
1 year price$143.88$65.40$59.88$59.88$82.62
3 year price$359.64$268.20$659.64$191.52$215.64

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.

SiteGround Cloud Jump Start PlanKinsta Starter PlanCloudways Vultr HF (2GB)Rocket.net Starter Plan
TypeCloudCloudCloudPrivate cloud
ServerApache + NginxApache + NginxApache + NginxApache + Nginx
Nginx reverse proxy$50/mo
Cores/RAM4 cores + 8GB12 cores + 8GB1 core + 2GB32 cores + 128GB
Storage40GB SATA10GB SATA64GB NVMe10GB NVMe
Object cacheMemcached$100/mo RedisRedis ProRedis (Redis Pro on Business plan)
PHP processorFastCGIFastCGIFPMLiteSpeed
PHP workersNot listed, but CPU limits are common2No limitNo limit
Memory limitAdjustable256MBAdjustable1GB
DatabaseMySQLMySQLMariaDBMariaDB
Bandwidth + visits5TB/mo25k/mo2TB/mo50GB + 250k/mo
CDN$14.99/mo SiteGround CDNCloudflare APO + firewall rules (read)$5/mo Cloudflare Enterprise + challenge pagesFree Cloudflare Enterprise (details)
CDN locations176300300300
Full page caching
Smart routingAnycastxArgoArgo
Image optimizationLimitedxMirage/PolishMirage/Polish
DNSGoogle deindexed 2M SG domainsAmazon Route 53$5/mo DNS Made EasyCloudflare
Cache pluginSG OptimizerUse FlyingPressBreezeUse FlyingPress
Data centers103544Served from Cloudflare’s edge
Control panelSite ToolsMyKinstaCustom (difficult)Mission Control
Email hostingxxx
SupportCBCA
Migrations$30/siteUnlimited free1 free + $25/siteUnlimited free
TrustPilot rating4.8/54.2/54.6/54.9/5
How it starts costing moreHigh initial price, CPU limits, CDN, price increases, internal incidentsPHP workers, add-ons, monthly visits, bandwidth, price increasesScaling CPU/RAM, CPU limits, CDN, backups, price increasesBandwidth
Monthly price$100 + CDN$29 when paying yearly + add-ons$30 + CDN$25 when paying yearly (no add-ons)

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.

Move to rocket. Net from siteground
Rocket. Net 2023 wordpress hosting benchmarks

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.

RocketCDNSiteGround CDNFlyingCDN By FlyingPressCloudways Cloudflare EnterpriseRocket.net Cloudflare Enterprise
CDNStackPathGoogle CloudBunnyCDNCloudflareCloudflare
Tbps100Not listed80192192
Locations73176114300300
Full page cachexxAPOAPO
Brotlix
Smart routingxAnycastSmartEdgeArgoArgo
Priority routingxxx
Load balancingx
Image optimizationxVery limitedBunny OptimizerMirage/PolishMirage/Polish
Compressionx
WebPxx
Mobile resizingxx
Firewallxx
Anti-DDoSxx
BandwidthNot unlimited as advertisedUnmeteredUnlimited100GBDetermined by hosting plan
Price$8.99/mo$14.99/mo$.03/GB$5/moFree w/ hosting
Cloudflare apo impact on ttfb fcp si

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):

Wp hosting benchmark tool

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 .

SG OptimizerWP RocketFlyingPressLiteSpeed Cache
Server-side cachingxx
Object cache integrationxx
Delay JavaScriptx
Remove unused CSSxInlineSeparate fileSeparate file
Critical CSSx
Preload critical imagesxxx
Exclude above the fold imagesBy class/typeBy URL/classAutomaticAutomatic
Lazy load background imagesxInline HTMLlazy-bg classx
Add missing image dimensionsx
Lazy load iframesx
YouTube iframe preview imagex
Self-host YouTube placeholderxxx
Host fonts locallyxx
Font-display: swapx
Preload linksx
Bloat removal (beyond Heartbeat)xx (details)x
Lazy render HTML elementsxx
Guest Modexxx
Advanced cache controlxxx
Gravatar cachexxx
Limit post revisionsDelete allDelete allDelete allKeep some
CDNGoogle CloudStackPathBunnyCDNQUIC.cloud
CDN PoPs1767311480
Full page cachingxx
CDN geo-replicationxxx
CDN image optimizationxx
CDN image resizing for mobilexxx
CDN DDoS protectionxx
CDN bandwidthUnmeteredVery limitedUnlimitedUnlimited
Documented APO compatibilityxxx
DocumentationNot detailedGoodNot detailedGood
New featuresInfrequentInfrequentFrequentFrequent
Facebook groupJoinJoinJoinJoin
CDN price$14.99/mo$8.99/mo$.03/GB$.02-.08/GB
Plugin priceFree$59/year$60/yearFree
Renewal priceFree$59/year$42/yearFree

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.

Come velocizzare un sito web realizzato con Elementor: guida completa in 24 passaggi image
Copy elementor section css selector

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:

Flyingpress bloat settings 2

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).

Wp optimize unused database tables

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.

Disable unused modules

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).

Fastest wordpress theme starter templates
Ho eseguito un test sui temi WordPress più veloci utilizzando diversi modelli/layout iniziali
Luca-De-Santis - Digital strategist - web designer - consulente seo

Dott. Luca De Santis

Ciao, il mio nome è Luca De Santis, web masterconsulente SEO e fondatore di Doctor Web Agency, un’agenzia di  comunicazione e web marketing al servizio della piccola e media impresa.

Ho realizzato questo blog per aiutare imprenditori, professionisti, artigiani, commercianti, a sfruttare il web per acquisire nuovi clienti automaticamente.

Amo sviluppare progetti di Web Marketing  per startup, professionisti e PMI sin dalla realizzazione del logo per poi sviluppare la presenza nel mondo del web. E di questo, con la passione e l’esperienza, ne ho fatto la mia attività lavorativa principale che oggi svolgo insieme al mio team di collaboratori.

Sarebbe un piacere aiutarti nei tuoi progetti web. Per iniziare compila il form contatti per ottenere un preventivo gratuito.

Articoli che potrebbero interessarti

Doctor Web
Agency

FAI CRESCERE LA TUA ATTIVITA’

Per maggiori informazioni
compila il form

La tua iscrizione non può essere convalidata.
La tua iscrizione è avvenuta correttamente.

🚀 Fai crescere la tua attività!

Ricevi gratuitamente via mail ogni settimana preziosi consigli di per far crescere la tua attività online.


✅ SEO: Search Engine Optimization

✅ SEM: Search Engine Marketing

✅ Web Design e realizzazione siti Web