Come risolvere un sito Web di Elementor lento: 16 ottimizzazioni che mi hanno aiutato a ottenere il 100% di velocità della pagina e i tempi di caricamento istantaneo sul mio sito

Elementor afferma di essere il più veloce costruttore di pagine per WordPress.


Quindi cosa sta causando il tuo sito web a caricamento lento?

Di solito ci sono alcune semplici modifiche che possono migliorare significativamente i tempi di caricamento e i punteggi GTmetrix. Elementor dice i motivi più comuni per un sito WordPress lento sono server, media, script esterni (ad esempio Google Fonts), plug-in, nessun CDN e l’utilizzo di un plug-in cache mediocre. Tuttavia, non entrano nei dettagli per elencare le istruzioni dettagliate.

Ecco perché ho scritto questo tutorial.

Imparerai come risolvere il tuo lento sito Elementor seguendo i consigli chiave della guida all’ottimizzazione di WordPress e i consigli di Elementor. Fornirò schermate, istruzioni dettagliate e risponderò a tutti i commenti se hai ancora bisogno di aiuto. Sono riuscito a ottenere punteggi GTmetrix al 100% sulla mia homepage. Anche i post con oltre 100 immagini e oltre 400 commenti (dimensioni della pagina 5 MB e 170 richieste) vengono caricati in circa <2s. Sì, sono un secchione della velocità di WordPress :)

Ottimizzazione della velocità elementare

1. Aggiornamento a PHP 7.4

Molte società di hosting hanno già rilasciato PHP 7.4.

L’aggiornamento delle versioni di PHP è uno dei modi più semplici per velocizzare il tuo sito Elementor. Kinsta di Benchmark PHP mostra come le versioni più alte di PHP possono funzionare 2-3 volte più velocemente. Anche elementare raccomanda versioni di PHP superiori e per aumentare il limite di memoria a 256 MB (vedere il passaggio successivo).

Innanzitutto, controlla la tua attuale versione di PHP in Elementor > Informazioni di sistema.

Elementor Versione PHP

Successivamente, accedi al tuo account di hosting, trova il gestore versione PHP (o simile) e seleziona una versione PHP superiore. È anche una buona idea fare un backup in anticipo. Altrimenti, è tutto!

Kinsta PHP 7.4

Importante: assicurati che i tuoi plug-in siano compatibili con versioni di PHP superiori. Stavo usando WP Rich Snippet (che non è più gestito) ma era incompatibile con PHP 7.2+, quindi ho eliminato il plugin e ho trovato un sostituto. Non vale la pena conservare plugin non mantenuti.

2. Aumenta il limite di memoria a 256 MB

Ancora una volta, controlla il limite di memoria in Elementor > Informazioni di sistema.

Sia Elementor, WordPress e WooCommerce consiglia un limite di memoria di 256 MB.

Limite di memoria elementare

Di solito è possibile modificare il limite di memoria nel proprio account di hosting:

Limite di memoria

Altrimenti, aggiungi questo codice a functions.php.

define (“WP_MEMORY_LIMIT”, “256 M”);

3. Utilizzare caratteri ospitati autonomamente

Se Google Fonts sta esplodendo il tuo rapporto GTmetrix, prova a ospitare i font in locale.

Se hai Elementor Pro, vorrai utilizzare caratteri personalizzati (presenti nelle impostazioni).

Ecco un Tutorial YouTube.

Font personalizzati Elementor

Non avere Elementor Pro?

Molti plug-in possono aiutare a ottimizzare i caratteri di Google: WP Rocket, Auto-ottimizzazione, caratteri di Google ospitati autonomamente, OMGF e Asset Clean Up. Se tu non fare vuoi usare un plugin, segui queste istruzioni.

Passo 1: Verifica che i caratteri rallentino il tuo sito Elementor in GTmetrix.

Google Fonts GTmetrix

Passo 2: Scarica i caratteri direttamente dal sito Web di Google Fonts. Scarica solo i caratteri e i pesi dei caratteri di cui hai assolutamente bisogno (più caratteri e pesi possono anche significare più richieste).

Passaggio 3: Usa uno strumento simile Transfonter per convertirli in file di font web.

Transfonter-Google-Font-conversione

Passaggio 4: Carica i nuovi file di caratteri web su WordPress e aggiungili al tuo CSS.

Passaggio 5: Verifica i caratteri, aggiungi un errore predefinito e presenta sempre fallback dei caratteri.

4. Ottimizza le richieste di terze parti

Proprio come Google Fonts è una richiesta di terze parti, così anche AdSense, Analytics, Maps, Tag Manager, video incorporati e persino Gravatar o plugin di condivisione social possono causare richieste di terze parti.

Devi ottimizzare anche questi.

Script esterni

Alcune richieste di terze parti sono facili da ottimizzare:

WP Rocket ha una scheda Componenti aggiuntivi che può aiutarti analisi dell’host a livello locale e aggiungi la cache del browser a Facebook Pixel. Le impostazioni multimediali di WP Rocket ti consentono di caricare i video in modo pigro mentre sostituiscono l’iframe con un’immagine di anteprima. Se si incorporano post dai social media, provare a fare uno screenshot e utilizzare un’immagine. Il caricamento condizionale di Disqus, il differimento dell’analisi di JavaScript nelle impostazioni del plug-in della cache e la disabilitazione selettiva di script / plug-in in Asset Clean Up possono aiutare a ottimizzare gli script.

WP Rocket Local Analytics

Le altre richieste di terze parti non sono così facili da ottimizzare:

Google AdSense può essere un killer GTmetrix. Oltre a caricarlo in modo asincrono, c’è poco che puoi fare. Inoltre non ho trovato alcuna soluzione per caricare Gravatars più velocemente e ho provato tutti i plugin di cache Gravatar (quindi li ho disabilitati). Google Tag Manager di solito dovrebbe essere utilizzato solo per siti Elementor grandi e non ottimizzati, altrimenti di solito fa più male che bene.

5. Evitare plug-in CPU elevati

Alcuni plugin da cui dovresti stare lontano.

I plug-in CPU elevati che rallentano i siti Elementor di solito hanno a che fare con statistiche, backup, condivisione sociale, portafogli, chat live, moduli di contatto, cursori, JetPack e qualsiasi plug-in che è costantemente necessario per “funzionare” sul tuo sito Web (pensa a Broken Link Scansioni in corso di Checker).

  1. Aggiungi questo
  2. Monitoraggio delle frodi sui clic di AdSense
  3. Calendario degli eventi tutto in uno
  4. Buddy di backup
  5. Beaver Builder
  6. Migliori Sitemap XML per Google WordPress
  7. Controllo Link interrotto (utilizzare Dr. Link Check)
  8. Contatto costante per WordPress
  9. Modulo di contatto 7
  10. Post contestuali correlati
  11. Collegamenti Digi Auto
  12. Disqus Sistema di commenti
  13. Divi Builder
  14. Griglia essenziale
  15. Visualizza l’elenco completo di 65 plugin lenti

Se si dispone di un plug-in lento, è possibile eliminarlo e trovare un sostituto, disabilitare selettivamente il plug-in su determinate pagine (passaggio successivo) o continuare a utilizzarlo e disporre di un sito Elementor lento.

6. Disabilitare selettivamente i plugin non utilizzati

Asset CleanUp e Perfmatters sono perfetti per disabilitazione selettiva dei plugin, script e stili.

L’esempio più comune è solo il caricamento del plug-in del modulo di contatto nella pagina dei contatti e la disabilitazione in qualsiasi altro luogo. Ma hai pensato di disabilitare il tuo plugin di condivisione social sulle tue pagine (dal momento che la maggior parte delle persone lo usa solo nei post)? O disabilitare il dispositivo di scorrimento sulle pagine che non dispongono di dispositivi di scorrimento? Attraverso la disabilitazione selettiva, è possibile effettuare meno richieste HTTP sulle pagine.

Passo 1: Installa Asset CleanUp o Perfmatters.

Plug-in Asset CleanUp

Passo 2: Modifica una pagina o un post e scorri verso il basso per vedere tutto ciò che viene caricato sulla pagina.

Passaggio 3: Disabilita (scarica) plugin, script e stili non utilizzati nella pagina. Puoi anche disabilitarlo per tipo di post oppure Asset CleanUp Premium (così come Perfmatters) ti consente di utilizzare RegEx.

Asset CleanUp Seleziona tutto

7. Disabilita gli script, gli stili, i frammenti del carrello di WooCommerce

Proprio come hai disabilitato selettivamente i plugin nel passaggio precedente, puoi utilizzare Perfmatters e Asset CleanUp per fare la stessa cosa con gli script, gli stili e i frammenti del carrello di WooCommerce.

Asset CleanUp WooCommerce

Perfmatters ti consente in realtà di farlo 1-click:

perfmatters ottimizzazione del commercio all'ingrosso

8. Cambia metodo Loader Editor in Elementor

Elementor dice:

“Se riscontri problemi di hosting o server utilizzando Elementor, abbiamo incluso un semplice switch che potrebbe risolvere il tuo problema.”

Puoi trovarlo sotto Elementor > impostazioni > Avanzate > Caricatore dell’editor.

Metodo Loader Editor Editor Elementor

9. Ridimensiona le immagini per correggere le dimensioni

Quando si utilizza Elementor, è importante ridimensionare (ridimensionare) le immagini per adattarle alle dimensioni corrette.

Servire immagini in scala

Altrimenti, vedrai errori di immagini in scala di servizio in GTmetrix. Se ne vedi, prendi le dimensioni consigliate fornite da GTmetrix e ridimensiona l’immagine a quelle dimensioni, quindi sostituisci l’immagine. Consiglio di creare un “cheat sheet della dimensione dell’immagine” che elenca le dimensioni di tutte le aree del tuo sito Web (cursori, immagini in primo piano, immagini blog a larghezza intera, logo). In questo modo, puoi ridimensionare l’immagine alle dimensioni corrette prima di caricarle.

10. Elimina l’hosting condiviso e esegui l’upgrade al cloud

Avere un tempo di risposta del server lento?

Gestisci il tuo sito tramite Google Page Speed ​​Insights e assicurati che lo sia <200 ms come consigliato da Google. Il tuo server (hosting) è il Fattore n. 1 nella guida all’ottimizzazione di WordPress.

Di solito consiglio SiteGround (hosting condiviso) che va bene se hai poco traffico e plugin. Ma una volta che vai al cloud hosting (ad es. Cloudways DigitalOcean), La differenza è quella che passa tra notte e giorno. Sono migrato da SiteGround a Cloudways e il mio tempo di caricamento è stato dimezzato. Anche i post con oltre 100 immagini e oltre 400 commenti (dimensioni della pagina 5 MB, 170 richieste) vengono caricati in meno di 2 secondi.

Hosting elementare

SiteGround-vs-CloudWays-Cloud-Hosting

GTmetrix-report-per-lungo palo

Esperienze di altre persone con Cloudways:

Tempi di risposta di Cloudways

Motore WP verso Cloudways

Rapporto DigitalOcean Pingdom

Tempi di risposta del server Cloudways

Miglioramento del tempo di caricamento di Cloudways

Cloudways vs WP Engine

Senza titolo

Tempi di caricamento Pingdom di Cloudways

Rapporto Pingdom di Cloudways

Namecheap alla migrazione di Cloudways

Migrazione di Cloudways WooCommerce

Migrazione AWS di Cloudways

Sono stati anche il numero 1 in molti sondaggi su Facebook e hanno ottenuto ottimi risultati Recensioni di TrustPilot:

Raccomandazioni di hosting Facebook

VPS Cloud Hosting WooCommerce Poll

Sondaggio hosting cloud VPS

Suggerimenti per l'hosting di WordPress

CloudWays-Facebook-Review

Recensione Facebook di Cloudways

Cloudways vs SiteGround

Linea di fondo: l’hosting condiviso va bene se non esegui WooCommcerce, AdSense, plug-in CPU elevati o traffico discreto. Ma una volta che ne hai uno, guarda nel cloud hosting. Sì, sono un affiliato per CloudWays), ma ci sono molte altre persone che hanno migrato e pubblicato i loro risultati. Il codice OMM25 ti darà uno sconto del 25% sui primi due mesi di hosting su Cloudways.

11. Elimina plugin di cache gratuiti e usa WP Rocket

Perché WP Rocket di solito è il numero 1 nei sondaggi di Facebook?

Perché ha più funzioni di velocità rispetto alla maggior parte degli altri plug-in di cache (pulizia del database, analisi locale, combinazione di caratteri Google, immagini e video di caricamento pigri, integrazione CDN + Cloudflare, controllo del battito cardiaco, cache WebP, prefetch, cache del browser Pixel di Facebook).

Ecco perché WP Rocket produce punteggi migliori + tempi di caricamento in GTmetrix e significa meno plug-in sul tuo sito Elementor. È sempre aggiornato con nuove funzionalità e gestito da un team affidabile.

Quindi, se stai ancora utilizzando WP Fastest Cache o W3 Total Cache, dovresti davvero provarlo.

Miglior sondaggio plug-in cache 2016

Sondaggio plug-in cache 2019

Swift vs WP Rocket

Sondaggio plug-in cache 2016

Miglior sondaggio cache plug-in 2018

wp rocket vs w3 totla cache

Vedrai la differenza:

WP Rocket prima dopo

12. Pulisci il tuo database

Stai pianificando la pulizia del database in corso?

Mentre continui a costruire il tuo sito Elementor, accumulerai revisioni post, vecchie tabelle del database da plugin / temi che non stai più utilizzando, commenti nel cestino e altri file spazzatura.

Puoi usare plugin come WP Rocket e WP-Optimize per pulisci il tuo database WordPress. Assicurati solo di rivedere tutto ciò che viene eliminato e di effettuare un backup in anticipo.

WP-Optimize Clean Database

13. Usa il CDN di Cloudflare

L’uso di Cloudflare è un gioco da ragazzi.

È gratuito, ha oltre 200 data center e CDN lo sono raccomandato da WordPress.

Logo Cloudflare

Alcuni host come SiteGround ti consentono di attivare Cloudflare nella loro dashboard. Altrimenti, iscriviti al piano gratuito di Cloudflare, accedi al registrar di domini e passa ai nameserver di Cloudflare.

Nella dashboard, ci sono alcune modifiche che dovresti considerare:

  • Velocità: abilita Brotli e Rocket Loader
  • Scrape Shield: abilita la protezione hotlink
  • Firewall: blocca i bot danneggiati dal rapporto sul traffico in tempo reale di Wordfence
  • Regole della pagina: Cloudflare ne ha molti regole della pagina per velocità, sicurezza, compatibilità

14. Usa un tema leggero

Ora della favola.

Stavo usando un tema ThemeForest che è stato abbandonato dallo sviluppatore (un rischio che si corre quando si acquista un tema da uno sviluppatore indipendente, anche se ha buone recensioni). Ho anche avuto incubi nell’acquistare temi gonfiati per i clienti che hanno rallentato il loro sito WordPress.

Voglio dire, avere tutto integrato lo rende molto più facile, giusto?

No! Vuoi scegliere un tema leggero che sia minimo e ben codificato, quindi fare affidamento sui plugin per aggiungere solo le funzionalità di cui hai bisogno. L’ottimizzazione del tema è più difficile dell’eliminazione di un plug-in.

La maggior parte di voi, si spera, sta usando i temi Astra, Flatsome o StudioPress, che sono i principali che raccomando.

15. Trova i colli di bottiglia in GTmetrix

Oltre a misurare i punteggi + i tempi di caricamento, puoi scoprire parecchie cose in GTmetrix. Poiché ogni sito Elementor è diverso, vuoi trovare esattamente ciò che sta rallentando il tuo.

Tempo al primo byte

Tempo al primo byte

Immagini non ottimizzate

Ottimizzazioni delle immagini in GTmetrix

Plugin lenti

Plugin WordPress lento

16. Completa l’ultimo 10% della velocità con Perfmatters

Perfmatters (di Kinsta) si prende cura di ciò che mi piace chiamare ottimizzazioni varie della velocità:

caratteristiche perfmatters

Alcuni di questi sono estremamente utili; il gestore di script che consente di disabilitare selettivamente plugin / script da determinate pagine, modificando l’intervallo di salvataggio automatico, limitando le revisioni dei post, precollegando e disabilitando gli script, gli stili e i frammenti del carrello di WooCommerce. Quando si tratta di queste ottimizzazioni, non conosco nessun plug-in che funzioni meglio di Perfmatters.

Cosa ti aspetti, è Kinsta. Ovviamente è un ottimo plugin.

Domande frequenti

&# X1f680; Quali sono i motivi più comuni per un sito Elementor lento?

Non utilizzare un buon plug-in di cache, non configurare le impostazioni del plug-in di cache in modo ottimale, hosting lento, immagini non ottimizzate, utilizzo di font e script esterni di Google, plug-in CPU elevati e non utilizzo di una rete CDN sono alcuni dei motivi più comuni per un sito Elementor lento.

&# X1f680; Cosa posso fare per accelerare Elementor?

Utilizza l’opzione Caratteri personalizzati di Elementor per ridurre la quantità di richieste da Google Fonts o Font Awesome. Puoi anche disabilitare selettivamente le funzioni Elementor inutilizzate su pagine / post usando un plugin come Asset CleanUp o Perfmatters di Kinsta. Il resto sono ottimizzazioni di velocità generiche che non hanno nulla a che fare con Elementor.

&# X1f680; Come usi i font personalizzati per caricarli più velocemente?

Per fare ciò avrai bisogno di un account Elementor Pro. Scarica i tuoi file di font (ad es. Da Google Fonts) e caricali nella sezione font personalizzati di Elementor.

&# X1f680; Elementor sta rallentando il mio sito?

Elementor non ha causato errori nel mio rapporto GTmetrix e si suppone che sia il più veloce costruttore di pagine WordPress. Non dovrebbe rallentare molto il tuo sito web, se non del tutto. Ma se pensi che lo faccia, controlla la scheda Cascata GTmetrix per vedere cosa sta realmente causando il problema.

&# X1f680; Quale hosting è consigliato per i siti Elementor?

Nel popolare gruppo Facebook Elementor, SiteGround e Cloudways sono generalmente i primi 2 host classificati presi nei sondaggi di Facebook.

Hanno ancora un sito elementare lento?

Dirò questo: Cloudways e WP Rocket dovrebbero risolvere l’80% dei tuoi problemi. L’hosting e il plug-in della cache sono i fattori principali nella guida all’ottimizzazione di WordPress. Ma se il tuo sito Elementor è ancora lento, inviami un commento con il tuo rapporto GTmetrix e sono felice di dare un’occhiata. Il nostro team offre anche servizi di velocità WordPress con report GTmetrix prima + dopo.

Saluti,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map