Ottimizzazione della velocità Divi: la guida definitiva

Divi non è solo un generatore di pagine. Divi porta il processo di progettazione a un livello completamente nuovo con un sistema di web design completo che ti consente di progettare visivamente ogni parte del tuo sito web. Ma questo non significa che Divi debba essere lento. Lontano da esso.

Le funzioni integrate di ottimizzazione della velocità e delle prestazioni di Divi possono facilmente mettere il tuo sito in cima all'elenco nei punteggi di Google PageSpeed. Con funzionalità come Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries e altro, Divi è ora sia un robusto generatore di pagine che un tema leggero. Ma per quanto Divi sia veloce, ci sono altri fattori sottostanti che necessitano di ottimizzazione. E se non affrontato, la velocità del tuo sito Divi ne risentirà inutilmente.

In questo post, esploreremo cosa è stato già fatto per velocizzare Divi e cosa possiamo fare per renderlo ancora più veloce. Ecco alcuni argomenti chiave che tratteremo:

• Prestazioni di WordPress vs prestazioni Divi
• Funzioni integrate di ottimizzazione della velocità e delle prestazioni di Divi
• Struttura del modulo dinamico
• Librerie JavaScript dinamiche
• Rimanda jQuery e jQuery Migrate
• CSS dinamico
• CSS critico
• Altezza soglia critica
• Carica foglio di stile in linea dinamico
• Migliora il caricamento dei caratteri di Google
• Disattiva gli emoji di WordPress
• Rinviare Gutenberg Block CSS
• Icone dinamiche
• Supporto Srcset nativo per immagini reattive
• 14 cose che puoi fare per ottimizzare la velocità e le prestazioni del tuo sito Web Divi
• #1 Aggiorna il tuo hosting
• #2 Ottimizzazione TTFB
• #3 Ottimizza il database del tuo sito
• #4 Ottimizza il tuo DNS
• #5 Utilizza una rete di distribuzione dei contenuti (CDN)
• #6 Aggiungi memorizzazione nella cache
• #7 Aggiungi minimizzazione e aggregazione
• #8 Abilita la compressione Gzip
• #9 Ottimizzazione dell'immagine
• #10 Ottimizzazione video
• #11 Costruisci la tua pagina Divi per la velocità
• #12 Usa i plugin con attenzione e parsimonia
• #13 Conduci test di velocità
• # 14 Considera il nostro progetto di pagina ad alta velocità Divi
• Utilizzo di Divi e altri plug-in per le prestazioni di terze parti
• Altri suggerimenti

Prestazioni di WordPress vs prestazioni Divi

Divi spesso non è il principale fattore determinante delle prestazioni del tuo sito web. È solo un pezzo del puzzle. Devi anche considerare le esigenze di ottimizzazione sottostanti per un sito WordPress in generale. Divi (il tema Divi e/o il Divi Builder) si trova sopra WordPress (il CMS), che si trova sopra una pila di software server, che si trova sopra un'infrastruttura di hosting. Tutte queste cose devono essere sintonizzate correttamente. Per cominciare, questi includono cose come un buon hosting, memorizzazione nella cache e un CDN. Senza queste ottimizzazioni sottostanti in atto, un sito Divi sarà più lento indipendentemente da quanto bene ottimizziamo Divi. Quindi, se il tuo sito Web Divi è molto lento, devi considerare anche questi altri pezzi del puzzle.

Con le esigenze di ottimizzazione sottostanti per un sito Web WordPress in atto, dobbiamo affrontare l'ottimizzazione delle prestazioni di Divi. Questo viene fatto migliorando le prestazioni del tema Divi e/o Divi Builder, assicurandosi che funzioni in modo ottimale nelle aree in cui si basa su WordPress e nelle aree in cui funziona all'interno di WordPress. Una volta ottimizzati tutti questi pezzi, possiamo creare con successo un sito Web Divi con velocità e prestazioni ottimali.

Nel resto dell'articolo di seguito, affronteremo prima l'ottimizzazione delle prestazioni integrata di Divi (le cose già fatte per te). Quindi affronteremo come ottimizzare ulteriormente il tuo sito Divi affrontando alcune esigenze di ottimizzazione sottostanti (cose aggiuntive che puoi fare).

Funzioni integrate di ottimizzazione della velocità e delle prestazioni di Divi

Per prima cosa, diamo un'occhiata ad alcune delle ottimizzazioni integrate di velocità e prestazioni che Divi ha già. Queste funzionalità di ottimizzazione accelerano Divi da ogni angolazione, rendendolo forse il generatore di pagine più veloce sul mercato. Ma non è tutto. Divi è costruito con un framework dinamico che elimina il bloat e fornisce una base su cui Divi può crescere con più moduli e più funzionalità senza mai aggiungere bloat al tuo sito web. Questo ti dà il meglio di entrambi i mondi: la potenza di un ampio generatore di pagine con l'agilità di un tema leggero.

Le funzioni di ottimizzazione delle prestazioni possono essere gestite accedendo a Divi > Opzioni tema. Nella scheda Generale, seleziona la sottoscheda Prestazioni.

Ora diamo un'occhiata più da vicino alle funzionalità che rendono così facile creare un sito Web Divi super veloce.

Struttura del modulo dinamico

La funzionalità Dynamic Module Framework aumenta la velocità del sito in modo potente selezionando ed eseguendo le funzioni PHP su richiesta. Divi elabora al volo la logica necessaria per eseguire il rendering solo dei moduli e delle funzionalità utilizzate in ogni pagina: tutto il resto viene tagliato fuori dall'equazione. In altre parole, tutto ciò che potrebbe essere considerato "gonfio" viene cancellato dal back-end.

Moduli su richiesta

Ad esempio, se hai 3 moduli su una pagina, Divi elaborerà solo le funzioni necessarie per quei 3 moduli invece di elaborare tutte le funzioni per tutti i moduli indipendentemente da quale viene utilizzato. Queste 3 funzioni renderanno lo shortcode/HTML per quel modulo sulla pagina senza spreco di tempo di elaborazione.

Funzionalità su richiesta

Proprio come Divi elabora e carica dinamicamente i moduli su richiesta, Divi fa lo stesso per tutte le funzionalità utilizzate in una pagina. Invece di elaborare le funzioni per tutte le possibili funzioni che potrebbero essere utilizzate su Divi Element (Effetti di scorrimento, Animazioni, Opzione permanente, Opzioni bordo, ecc.), Divi elabora solo quelle funzioni che vengono effettivamente utilizzate su un elemento. Questa funzionalità non si applica solo ai moduli, ma a qualsiasi elemento Divi inclusi Sezione, Righe e Colonne.

Librerie JavaScript dinamiche

Per aumentare la velocità del sito, abbiamo ottimizzato il JavaScript di Divi per renderlo più conciso e modulare. Ciò consente a Divi di caricare JavaScript su richiesta in modo dinamico. Divi caricherà ed elaborerà funzioni JavaScript (come Sticky Options) e librerie JavaScript esterne (come Magnific Popup) solo quando sono necessarie per i moduli o le funzionalità di una pagina.

La dimensione del file Javascript di base più piccola combinata con le librerie JavaScript dinamiche aumenterà sicuramente la velocità del sito semplicemente perché c'è meno codice da elaborare per ogni caricamento di pagina. Gli script inutilizzati vengono rimossi. E, poiché questa logica anti-gonfiore avviene su base per pagina, se hai una riga appiccicosa su una pagina, non dovrai preoccuparti che Sticky JavaScript venga caricato su una pagina che non ce l'ha. Questa è la bellezza del JavaScript dinamico di Divi.

Esempio: libreria JavaScript dinamica per un modulo immagine utilizzando Lightbox

Supponiamo che tu abbia una pagina con un modulo immagine con lightbox abilitato. Divi punterà ed eseguirà dinamicamente la libreria Magnific Popup JS per quella pagina per applicare quella funzionalità di popup lightbox. Se lightbox è disabilitato sull'immagine, la libreria JS non viene caricata o eseguita sulla pagina.

Rimanda jQuery e jQuery Migrate

Quando possibile, jQuery e jQuery Migrate verranno spostati nel corpo per rimuovere una richiesta di blocco del rendering e accelerare i tempi di caricamento. Come mostra l'illustrazione di seguito, se lo script jQuery viene caricato in anticipo (nell'intestazione), sospenderà l'analisi dell'HTML fino all'esecuzione dello script. Questo rallenterà il rendering della tua pagina

Solo d'altra parte, se un plug-in di terze parti registra jQuery come dipendenza, verrà riportato all'inizio per evitare conflitti. Questa opzione può essere disabilitata se causa problemi.

CSS dinamico

Dynamic CSS applica la stessa logica anti-gonfiore (utilizzata nel framework del modulo dinamico) al foglio di stile di Divi. Come puoi immaginare, il foglio di stile principale di Divi sarebbe piuttosto grande considerando tutte le funzionalità che ha. Ma caricare un foglio di stile di grandi dimensioni su ogni pagina provoca un inutile ingombro e tempi di caricamento della pagina più lenti.

Con il CSS dinamico, il CSS di Divi è suddiviso in centinaia di piccoli componenti. In ogni pagina, questi componenti CSS sono combinati per formare un foglio di stile unico che contiene solo i pezzi necessari per modellare quella particolare pagina in base ai moduli, alle funzionalità del modulo e alle opzioni di layout del tema che stai utilizzando.

Questo risolve il problema di gonfiaggio CSS perché ora non esiste. Non c'è gonfiaggio perché non viene caricato nessun altro CSS. Senza Dynamic CSS, il foglio di stile di Divi sarebbe di circa 900kb e verrebbe caricato su tutte le pagine indipendentemente dal contenuto. Ora, se hai solo bisogno di 80 kb di CSS per la pagina, Dynamic CSS elimina gli 800 + kb che non ti servono per caricare la pagina. Ciò significa che la tua pagina si carica ancora più velocemente.

CSS critico

Il sistema Critical CSS di Divi aumenta la velocità del sito identificando il CSS necessario per lo stile del contenuto above the fold e rinviando tutto il resto. Poiché solo gli stili critici sono necessari quando la pagina viene caricata per la prima volta e poiché le risorse di blocco del rendering svolgono un ruolo così significativo nella velocità della pagina, la capacità di Divi di separare automaticamente gli stili critici e non critici offre un enorme vantaggio rispetto ad altri temi e builder di WordPress . Dopo che Divi ha terminato l'elaborazione del suo CSS, non rimane quasi nulla nell'intestazione del sito Web, il che significa che il contenuto viene visualizzato immediatamente, ed è per questo che Google assegna ai siti Web Divi punteggi così alti immediatamente.

Ad esempio, se il tuo contenuto above the fold è costituito da titolo, paragrafo, pulsante e immagine, solo il CSS relativo a tali elementi verrà caricato non appena i tuoi visitatori caricano la pagina. Ovviamente verrà caricato anche il resto del CSS, ma non alla prima interazione. Questo è ciò che viene chiamato CSS non critico.

Per una spiegazione più completa di come funziona questa funzione e come utilizzarla, consulta i nostri articoli su Come la funzione CSS critica di Divi aumenta la velocità del sito e come creare la pagina Divi più veloce.

Altezza soglia critica

Relativo a Critical CSS è l'opzione Critical Threshold Height.

Quando Critical CSS è abilitato, Divi determina una "soglia above the fold" e rinvia tutti gli stili per gli elementi below the fold. Tuttavia, questa soglia è solo una stima e può variare su diversi dispositivi. L'aumento dell'altezza della soglia ritarderà meno stili, con conseguente tempi di caricamento leggermente più lenti ma meno possibilità che si verifichino CLS (Cumulative Layout Shifts). Se riscontri problemi con CLS, puoi aumentare l'altezza della soglia.

Carica foglio di stile in linea dinamico

L'opzione Load Dynamic In-Line Stylesheet è l'ottimizzazione CSS finale che rimuove tutte le richieste CSS che bloccano il rendering.

A causa di Dynamic CSS, il foglio di stile Divi di base è ora abbastanza piccolo da poter essere caricato in linea sulla pagina effettiva! Il caricamento di questo CSS in linea rimuove una richiesta di blocco del rendering e migliora i punteggi di Google PageSpeed. Quando le opzioni Critical CSS, Dynamic CSS e Load Dynamic In-Line Stylesheet sono abilitate, tutte le richieste CSS che bloccano il rendering vengono rimosse .

Migliora il caricamento dei caratteri di Google

L'opzione Migliora caricamento di Google Fonts consente la memorizzazione nella cache di Google Fonts e li carica in linea nell'intestazione. Ciò riduce le richieste di blocco del rendering e accelera i tempi di caricamento.

Abbiamo anche aggiunto l'opzione Limita il supporto dei caratteri Google per i browser legacy.

Questo sostanzialmente rimuove i file di font legacy per ridurre il carico utile. L'abilitazione di questa opzione ridurrà le dimensioni di Google Fonts e migliorerà i tempi di caricamento, tuttavia limiterà il supporto di Google Fonts in alcuni browser molto vecchi. Puoi disattivare questa opzione per aumentare il supporto per i browser meno recenti a un leggero costo per le prestazioni.

Disattiva gli emoji di WordPress

WordPress viene fornito con un sistema emoji nativo, ma questo non è più necessario grazie al supporto emoji nativo nei browser moderni. In effetti, gli emoji nativi hanno un aspetto molto migliore rispetto alla versione di WordPress. Divi ti dà la possibilità di disabilitare gli emoji nativi di WordPress, che rimuove le risorse non necessarie. E avere meno risorse per il rendering si traduce in caricamenti di pagina più veloci.

Rinviare Gutenberg Block CSS

Quando si utilizza Divi Builder su una pagina, si sceglie anche di non utilizzare l'editor di blocchi WordPress predefinito (Gutenberg). E dal momento che non utilizzerai blocchi per modellare la tua pagina, non hai bisogno che il rendering CSS di Gutenberg blocchi il caricamento della tua pagina Divi. Con l'opzione Defer Gutenberg Block CSS abilitata, Divi ora (per impostazione predefinita) caricherà pigramente il CSS del blocco Gutenberg sulle pagine in cui si utilizza invece Divi Builder. Verrà comunque caricato per ogni evenienza (nel piè di pagina), ma non bloccherà più il rendering.

Icone dinamiche

Divi ora viene fornito con sottoinsiemi di caratteri icona che vengono caricati su richiesta in base ai moduli e alle funzionalità che stai utilizzando. Ciò riduce la dimensione del carattere dell'icona di base di Divi da 90 kb fino a 6 kb. Il set completo di icone viene caricato solo quando necessario. Questa opzione è disabilitata per impostazione predefinita se stai utilizzando un tema figlio o un modulo Divi personalizzato. Se il tuo tema figlio o il modulo Divi di terze parti utilizza l'intero set di icone Divi, questa opzione dovrebbe rimanere disabilitata.

Esistono tre sottoinsiemi di caratteri delle icone che vengono utilizzati in base alle esigenze di una pagina.

• Base: questo sottoinsieme include tutte le icone utilizzate per impostazione predefinita nel tema Divi e nei suoi moduli.
• Social: questo sottoinsieme include tutte le icone di base più tutte le icone social, che si caricano quando viene utilizzato un modulo di follow sui social media.
• Tutto: questo è l'intero set di icone che viene utilizzato quando si utilizza il selettore di icone in un modulo Divi per selezionare un'icona personalizzata.

Ecco un esempio del sottoinsieme di caratteri dell'icona social che viene caricato dinamicamente a causa di un modulo di follow sui social media esistente nella pagina.

Se hai bisogno di accedere all'intero carattere dell'icona su tutte le pagine (ad esempio, se stai utilizzando il nostro carattere dell'icona nel tuo tema figlio), puoi disabilitare questa opzione e caricare l'intera libreria dei caratteri dell'icona su tutte le pagine.

Supporto Srcset nativo per immagini reattive

Divi include il supporto SRCSET nativo per tutte le immagini Divi, il che significa che Divi renderà automaticamente le tue immagini reattive e servirà l'immagine perfettamente dimensionata su ciascun dispositivo. Poiché le immagini più piccole vengono servite a dispositivi più piccoli, ciò può migliorare notevolmente la velocità di caricamento e non richiede alcun lavoro aggiuntivo da parte tua.

14 cose che puoi fare per ottimizzare la velocità e le prestazioni del tuo sito Web Divi

L'ottimizzazione della velocità continua a svolgere un ruolo cruciale nell'esperienza utente del tuo sito web, così come nella sua ottimizzazione per i motori di ricerca (SEO). Quindi, per far sì che il tuo sito Divi funzioni bene per i visitatori e per Google, dovrai occuparti di quelle aree al di fuori di Divi che ottimizzano ulteriormente la velocità del tuo sito.

Ecco 14 cose che puoi fare per ottimizzare la velocità e le prestazioni del tuo sito web Divi...

#1 Aggiorna il tuo hosting

Se prendi sul serio la velocità (e le prestazioni) del tuo sito web, inizia con la scelta di un buon provider di hosting. In effetti, puoi fare tutto bene per ottimizzare il tuo sito Web per la velocità e avere ancora un sito lento a causa del tuo host. E i provider di hosting davvero validi faranno molte di queste ottimizzazioni della velocità per te, quindi non devi preoccupartene. Quindi, se hai un sito Divi lento, il primo passo è considerare l'aggiornamento del tuo hosting.

Usa Divi Optimized Hosting

Se desideri un sito Web Divi veloce, ha senso scegliere un provider di hosting ottimizzato non solo per WordPress ma anche per Divi. Quindi, se stai cercando un ottimo hosting WordPress che funzioni perfettamente con Divi e venga fornito con l'installazione automatica di Divi, allora Divi Hosting è un'ottima nuova soluzione per te. Abbiamo collaborato con alcuni dei nostri host WordPress preferiti (Pressable, Flywheel e SiteGround) per offrire ai clienti Divi un modo semplice per creare siti Web Divi veloci, supportati da una moderna infrastruttura di hosting che soddisfa tutti i requisiti di Divi e supportati dai principali professionisti di WordPress .

Perché scegliere Divi Hosting?

In definitiva, ogni utente Divi deve fare una scelta sull'hosting. Fare la scelta sbagliata può portare a molto dolore. Vogliamo rendere facile questa scelta. Ecco alcune cose che rendono unico Divi Hosting:

• Quando crei il tuo sito web, Divi viene installato automaticamente.
• Il tuo nuovo sito web viene automaticamente connesso al tuo account Elegant Themes e configurato con la tua chiave di licenza in modo da poter ottenere aggiornamenti e supporto.
• Il tuo ambiente di hosting sarà configurato per soddisfare immediatamente tutte le impostazioni PHP consigliate da Divi. Non sono necessarie regolazioni.
• Il tuo sito web sarà alimentato da un'infrastruttura di hosting veloce e moderna, il che significa tempi di caricamento rapidi e strumenti moderni come la memorizzazione nella cache automatica e i CDN.
• Sarai ospitato da un'azienda che conosce WordPress dentro e fuori.
• Sarai ospitato da uno dei nostri partner, il che significa che si impegnano a garantire una fantastica esperienza Divi sui loro sistemi.

Ci sono molte opzioni di hosting là fuori e non sono tutte uguali. Aiutiamo i nostri clienti ogni giorno ad affrontare problemi di compatibilità relativi all'hosting che possono essere incredibilmente frustranti. Tutti hanno bisogno di hosting per usare Divi e la tua esperienza di hosting non deve essere una lotta. Per ulteriori informazioni, scopri come l'hosting Divi è la migliore soluzione di hosting per Divi.

Trovare la giusta soluzione di hosting per il tuo sito Divi

Hai bisogno di usare Divi Hosting per avere un sito Divi veloce? Assolutamente no. Ci sono altre fantastiche soluzioni di hosting là fuori e Divi funzionerà sempre alla grande su ottimi ambienti di hosting. Ma poiché l'hosting svolge un ruolo fondamentale nell'ottimizzazione della velocità e delle prestazioni, dovresti prendere il tempo necessario per trovare la giusta soluzione di hosting per il tuo sito Divi.

Ci sono un sacco di società di hosting fantastiche e non così grandi là fuori. E ognuno di solito offre più soluzioni e servizi di hosting. Quindi, trovare quello giusto può essere travolgente. Di seguito sono riportate alcune informazioni utili sui tipi di hosting più comuni da considerare quando si trova la giusta soluzione di hosting per il proprio sito Divi.

Hosting tradizionale (condiviso) (non consigliato)

Questo è di gran lunga il tipo di hosting più popolare per gli utenti di WordPress in gran parte perché è il più conveniente. Ma sfortunatamente, è l'opzione peggiore per l'ottimizzazione della velocità. Con l'hosting condiviso tradizionale, condividerai tutte le risorse disponibili di un server con altri. Poiché stai condividendo, il costo per questo tipo di hosting è basso. Ma il rovescio della medaglia è che non puoi controllare la quantità di traffico che gli altri siti stanno ricevendo sul tuo server condiviso. Quindi puoi facilmente cadere preda di periodi di tempi di caricamento estremamente lenti e persino momenti in cui il tuo sito è completamente inattivo. Quindi è meglio avere una buona idea di quanto traffico può gestire il tuo hosting condiviso.

Hosting dedicato

Con l'hosting dedicato, hai il tuo server dedicato solo per te. Non c'è bisogno di condividere alcuna risorsa con nessun altro. Ciò significa che avrai tempi di caricamento rapidi più prevedibili e coerenti per il tuo sito web. Questo è solitamente offerto come opzione di alto livello per le grandi aziende a un costo premium elevato.

Hosting VPS

L'hosting Virtual Private Server (VPS) è fondamentalmente una via di mezzo tra hosting condiviso e dedicato. Il tuo spazio sul server è "privato", il che significa che è completamente separato da tutti gli altri (una specie di gated community per i file del tuo sito). Quindi i file del tuo sito non sono esposti ad altri sul server. A differenza dell'hosting condiviso, un VPS ha un numero dedicato di risorse di sistema (o potenza) a tua disposizione per garantire che il tuo sito ottenga sempre ciò di cui ha bisogno per fornire tempi di caricamento rapidi in modo coerente. Quindi non dovrai preoccuparti dei picchi di traffico di altri siti Web che influiscono sulla velocità del tuo sito.

Ma, a meno che tu non abbia un VPS gestito, questo tipo di hosting è principalmente per quei tipi fai-da-te che sono abbastanza esperti di tecnologia da gestire le cose da soli. Per maggiori informazioni, ecco un confronto delle prestazioni tra l'hosting VPS e l'hosting condiviso.

Hosting cloud

Con il cloud hosting, hai accesso a una rete di server (nel cloud) anziché a un singolo server fisico. Ciò ti consente di estrarre tutte le risorse di cui hai bisogno da questa rete di server secondo necessità. In sostanza, si dispone di una partizione virtuale dello spazio del server supportata dalla potenza e dalle risorse dell'intera rete. Quindi non devi preoccuparti dei picchi di traffico come faresti nell'hosting condiviso. Il cloud hosting è estremamente flessibile e scalabile in base alle tue esigenze.

Una delle principali differenze tra l'hosting cloud e l'hosting VPS è che l'hosting VPS ha un numero dedicato (o limitato) di risorse da cui estrarre che può o meno esaurirsi. Il Cloud Hosting, invece, è in grado di tenere a disposizione le tue risorse senza esaurirle perché può sempre prelevare dagli altri server nel cloud. In teoria, il cloud hosting offre alte velocità più coerenti e affidabili. Quindi, se prendi sul serio la velocità, il cloud hosting è un'ottima opzione (forse anche la migliore).

Hosting WordPress gestito

Hosting WordPress gestito di solito si riferisce all'hosting condiviso gestito da esperti di WordPress. Di solito costa un po' di più dell'hosting condiviso tradizionale, ma se si desidera un sito Divi più veloce, potrebbe valerne la pena l'hosting WordPress gestito. Non è "privato" come un VPS o potente come un ambiente di hosting dedicato. Ma aiuta a massimizzare la velocità del tuo ambiente condiviso facendo lavorare gli esperti di WordPress. Lo fanno bene perché adattano i loro servizi e configurano i loro server esclusivamente per i siti WordPress. E molti di loro sono dotati di molte funzionalità integrate interessanti e convenienti come ambienti di staging con un clic, memorizzazione nella cache del sito, distribuzione CDN con un clic, backup automatici, SSL e altro ancora. Sono perfetti per quelli di noi che non vogliono fare affidamento su (o gestire) una serie di plug-in per l'ottimizzazione, la sicurezza e la gestione di base della velocità.

In effetti, Divi Hosting è un hosting WordPress gestito ottimizzato per Divi. Questo elimina tutti i mal di testa dall'ottimizzazione dell'ambiente di hosting per il tuo sito Divi.

#2 Ottimizza il tempo al primo byte (TTFB)

Cos'è TTFB?

Il Time to First Byte (TTFB) è la quantità di tempo impiegata dall'utente per ricevere il primo byte di dati del sito Web dal tuo host/server. Quindi, quando un utente effettua una richiesta HTTP (carica la tua pagina web), il TTFB sarà essenzialmente quel periodo di attesa prima che i dati vengano ricevuti dal browser. Questo è importante perché più lungo è il TTFB, più tempo impiega la pagina a caricarsi.

Pensalo come prendere un fast food. Il ristorante può essere ottimizzato per consegnare il cibo velocemente. In effetti, potrebbero avere già un hamburger che ti aspetta. Ma devi ancora aspettare in fila per ordinare. Quel periodo di attesa è quello che puoi pensare come il momento del primo morso (vedi cosa ho fatto lì).

Il TTFB dovrebbe essere di circa 200 ms (secondo Google). Ma per i siti che hanno un hosting scadente e non sono stati ottimizzati, il TTFB può essere facilmente di 2 secondi o più.

Cosa causa un TTFB lento?

Il ritardo TTFB sul tuo sito Divi è solitamente causato da quanto segue:

• La quantità di contenuto dinamico che deve essere ricevuto. Questo può essere ridotto con la memorizzazione nella cache, l'ottimizzazione del database e un CDN.
• La quantità di traffico che il tuo server sta vivendo in quel momento. I provider di hosting tradizionali (o condivisi) rendono difficile disattivare quel TTFB perché condividi risorse con altri sullo stesso server. I picchi nel loro traffico ridurranno la velocità di elaborazione del tuo server.
• La configurazione del tuo server web . Un buon provider di hosting WordPress può aiutarti con il TTFB del tuo sito fornendo una solida infrastruttura di backend e ottimizzando la configurazione del tuo server web (cose praticamente fuori dal tuo controllo).

Come velocizzare il TTFB del tuo sito Divi

TTFB è uno dei Web Vitals (insieme a FCP, LCP e CLS) che Google utilizza per determinare il posizionamento del tuo sito. Quindi è importante ottimizzarlo. La buona notizia è che TTFB può essere ottimizzato. Ecco alcuni suggerimenti chiave che puoi utilizzare per ridurre il TTFB.

• Aggiorna il tuo Hosting . Il modo più efficace per potenziare il tuo TTFB è semplicemente aggiornare il tuo hosting. Pagare un po' di più per l'hosting gestito per WordPress o Divi Hosting avrà il maggiore impatto su TTFB fin dall'inizio.
• Usa un CDN . Ciò consentirà ai visitatori di caricare i dati del tuo sito da un server più vicino a loro in modo da poter ridurre la latenza e ridurre il TTFB.
• Rimuovere plugin o temi non necessari . Plugin e temi (soprattutto quelli obsoleti) possono impantanare il server del tuo sito e i tempi di caricamento (incluso TTFB). Quindi, è meglio utilizzare solo plugin (o temi) di qualità essenziale e rimuovere gli altri.
• Implementare la memorizzazione nella cache . Divi ha la memorizzazione nella cache integrata per la distribuzione di Divi JS e CSS. Ma la memorizzazione nella cache del tuo sito Web nel suo insieme, oltre a utilizzare un CDN, ridurrà il TTFB.

Usa Cloudflare per potenziare TTFB

Un modo per ottenere un rapido aumento del TTFB del tuo sito è utilizzare Cloudflare. La memorizzazione nella cache e il CDN disponibili sul loro piano gratuito aumenteranno sicuramente TTFB. Puoi anche sfruttare l'ottimizzazione automatica della piattaforma di Cloudflare che è stata testata per mostrare una riduzione del 72% del TTFB.

Per saperne di più, dai un'occhiata al nostro articolo completo su TTFB e su come ottimizzare il tuo sito web per questo.

#3 Ottimizza il database del tuo sito

Perché il sito WordPress ha bisogno di database puliti?

A differenza dei siti HTML statici, WordPress è un CMS dinamico che utilizza PHP per recuperare i dati archiviati in un database MySQL al fine di visualizzare tali dati su una pagina web. Ciò semplifica la gestione del tuo sito, ma lo svantaggio è che impiega più tempo a caricare le pagine perché deve individuare i dati nel database prima di caricare la pagina. In generale, i siti Web HTML statici saranno più veloci dei siti Web WordPress per questo motivo.

Un modo per mantenere un sito Divi il più veloce possibile è assicurarsi di avere un database pulito. I file del sito WordPress sono organizzati nel tuo database per tabelle e ogni volta che aggiungi nuovi dati al tuo sito (come temi e plugin), crei nuove tabelle e più dati. Come ci si aspetterebbe, più disordinato è il database, più difficile sarà trovare i dati. Questo porta a un sito web più lento.

Quindi, se hai aggiunto il tema Divi al tuo sito Web dopo anni di tentativi di altri temi e innumerevoli plug-in, è probabile che tu abbia archiviato alcuni dati che non ti servono più. Anche se disinstalli un plugin, non significa che tutti i dati siano andati nel database. I plug-in amano lasciare alcuni dati lì nel caso in cui reinstalli il plug-in. Non è bello, lo so. Questi dati rimanenti possono portare a un disordine inutile e rallentare il tuo sito.

Proprio come ogni organizzazione umana ha bisogno di lavorare in modo più efficiente, ogni sito WordPress (Divi o meno) ha bisogno di un database pulito per caricare le pagine più velocemente. Quindi, se hai il tuo sito web da un po', pulirlo può velocizzare notevolmente le cose.

Come ottimizzare il database del tuo sito Divi

Suggerirei di utilizzare un plugin per questo. WP Optimize sembra essere un'opzione credibile. Ma ci sono altri plugin per database di WordPress da considerare.

Oppure, se sai cosa stai facendo, puoi sempre farlo manualmente in MySQL.

Oltre a ripulire il database di WordPress, potresti voler rendere WordPress ancora più leggero riducendo i dati che memorizza. Ad esempio, WordPress conserverà automaticamente gli elementi eliminati nel cestino per 30 giorni. Potresti voler ridurre quel periodo di tempo a 7.

#4 Ottimizza il tuo DNS

In che modo il DNS influisce sulla velocità del sito

La prima cosa che deve accadere quando un utente visita l'URL di una delle tue pagine web è una ricerca DNS. Non appena l'URL viene inserito (o cliccato), l'ISP del visitatore invia una query DNS ai nameserver per trovare l'indirizzo IP associato al tuo dominio (ogni dominio/sito web ha un indirizzo IP specifico). In sostanza, una ricerca DNS è come cercare il tuo nome di dominio in una rubrica per trovare l'indirizzo IP per quel dominio.

Ma quando un utente visita una pagina del tuo sito, la pagina potrebbe avere più domini a cui è necessario accedere per richiamare la pagina. Quindi potresti fare 3 o 4 ricerche di dominio su un singolo caricamento di pagina (forse di più).

In generale, la maggior parte dei provider DNS gratuiti come Godaddy e Namecheap saranno generalmente più lenti di quanto probabilmente vorrai.

Utilizzo di Cloudflare per l'ottimizzazione DNS (e altro se lo desideri)

La migliore opzione gratuita disponibile per aumentare la velocità di ricerca DNS è probabilmente Cloudflare. Hanno le prestazioni DNS più veloci registrate su DNSPerf.com. Questo sarà significativamente più veloce di GoDaddy e Namecheap. E puoi persino ottimizzare Cloudflare per essere utilizzato per DNS senza i loro altri servizi (come CDN o WAF) se lo desideri.

Ad esempio, potresti voler utilizzare Cloudflare per DNS e sicurezza (rilevamento DDOS) e KeyCDN (o MaxCDN) per la tua CDN. Sembra che sarebbe un'ottima combinazione.

Configurazione di Cloudflare

Cloudflare è davvero facile da configurare. Non devi preoccuparti di cambiare il tuo hosting o altro in anticipo. Tutto quello che devi fare è seguire la loro configurazione di 5 minuti che inizia con l'inserimento del tuo dominio.

Recupereranno automaticamente i tuoi record DNS correnti.

La cosa principale che dovrai fare per completare la configurazione è cambiare i server dei nomi predefiniti sul tuo attuale provider DNS (come GoDaddy) con i server dei nomi di Cloudflare.

Quindi puoi gestire facilmente i tuoi DNS dalla loro Dashboard.

E proprio così, hai un aumento della velocità di ricerca DNS, più sicurezza e un CDN per il tuo sito web (e altro ancora).

Parlando di CDN, devi assolutamente usarne uno.

#5 Utilizza una rete di distribuzione dei contenuti (CDN)

StackPath CDN PoP

Una rete di distribuzione dei contenuti (CDN) porta la velocità del sito a un altro livello. Come suggerisce il nome, un CDN è una rete per la distribuzione di contenuti. La rete è composta da server in tutto il mondo che archiviano file statici memorizzati nella cache (immagini, video, script, ecc.) Dei contenuti del tuo sito web. Quindi, quando una persona invia una richiesta per quel contenuto (visitando il tuo sito Web), il server (o PoP) più vicino alla persona consegnerà il contenuto. Senza un CDN, i file del tuo sito web sono accessibili da una posizione del server (ovunque il tuo host stia memorizzando quei file), quindi più sei lontano da quel server, più lento sarà fornire quel contenuto del sito web al tuo browser.

Pensaci, quando vuoi che una pizza venga consegnata a casa tua, non scegli la pizzeria a 30 miglia di distanza. Scegli quello a 5 miglia di distanza perché vuoi che venga consegnato il prima possibile (se sei un normale umano che ama la pizza quanto me). Un CDN funziona in modo simile. Poiché desideri che il sito Web appaia nel tuo browser il prima possibile, un CDN avrà i file del tuo sito pronti per essere consegnati dal server più vicino alla tua posizione. Quindi, se i file del tuo sito sono archiviati su un server a San Francisco e qualcuno a Londra richiama il tuo sito, potrebbero volerci 1 o 2 secondi per ricevere quei dati da un server a migliaia di chilometri di distanza. Ma con un CDN, puoi fornire gli stessi dati da un server a Londra in metà del tempo. Questa è una grande differenza!

Quindi, anche se non vedi l'intera portata dei risultati a casa, stai accelerando la consegna del tuo sito web in tutto il mondo.

Ci sono molti modi per ottenere un CDN per il tuo sito. Molte società di hosting includeranno un'opzione per l'implementazione di un CDN con il loro servizio. E ci sono piattaforme di rete come Cloudflare e StackPath (precedentemente MaxCDN) che offrono funzionalità CDN insieme ad altre prestazioni e funzionalità di sicurezza.

Ecco alcune piattaforme CDN credibili da considerare:

• Cloudflare CDN: oltre all'ottimizzazione DNS (menzionata sopra), Cloudflare offre una CDN globale veloce e sicura che memorizza nella cache il contenuto statico e lo consegna rapidamente agli utenti. Questo è incluso nel loro piano gratuito che è fantastico per la maggior parte dei siti.
• KeyCDN (puoi anche utilizzare con il plug-in WordPress CDN Enabler per integrare KeyCDN; questa configurazione funzionerebbe bene anche con Cache Enabler)
• StackPath (in precedenza MaxCDN)
• Amazon Cloudfront
• Sucuri

Esistono alcuni plug-in di memorizzazione nella cache come WP Total Cache o CDN Enabler che includono un'opzione per l'integrazione automatica di più provider CDN, il che è piuttosto conveniente.

Ecco alcuni plugin con supporto CDN:

• WP Cache più veloce
• WP Rocket
• Ottimizzazione automatica
• Cache totale W3
• WP Super Cache
• Abilitatore CDN

#6 Aggiungi memorizzazione nella cache

Esistono quattro tipi principali di memorizzazione nella cache che possono essere implementati per velocizzare il tuo sito.

• Cache della pagina : questo processo memorizza le versioni HTML statiche memorizzate nella cache della tua pagina per una consegna rapida.
• Caching del browser : questo ti dà un maggiore controllo su quale contenuto può essere memorizzato nella cache dal browser e per quanto tempo. Solo alcuni plugin possono farlo, quindi potrebbe essere meglio farlo manualmente per un maggiore controllo. Ciò ti aiuterà a gestire la metrica "Sfrutta la memorizzazione nella cache del browser" durante lo svolgimento dei test di velocità.
• Caching CDN : serve pagine/file di siti Web memorizzati nella cache da un CDN più vicino ai tuoi utenti.
• Caching degli oggetti: la memorizzazione nella cache degli oggetti memorizza nella cache i risultati delle query ripetute che PHP avvia per recuperare i dati dal database e servirli all'utente. Questo è diverso dalla memorizzazione nella cache del bytecode che memorizza una versione cache del codice PHP compilato utilizzato per visualizzare il tuo sito web.

Divi esegue la memorizzazione nella cache quando serve i file JS e CSS di Divi dietro le quinte. Ma questo è principalmente per i file del tema Divi per una migliore funzionalità di Divi Builder.

È ancora necessario utilizzare la memorizzazione nella cache per il tuo sito Web nel suo insieme. La maggior parte dei siti ha più plug-in forniti con i propri file CSS che potrebbero dover essere combinati, minimizzati e memorizzati nella cache. Quindi puoi sicuramente sfruttare una soluzione di terze parti per servire versioni HTML statiche memorizzate nella cache di tutte le tue pagine.

Il CDN di Cloudflare è un ottimo modo per aggiungere la memorizzazione nella cache al tuo sito Divi. Memorizza una copia del contenuto del sito Web (risorse statiche) geograficamente più vicino ai visitatori per ridurre il carico e la latenza della pagina. L'APO per WordPress di Cloudflare sembra essere una soluzione ancora più mirata per la memorizzazione nella cache di pagine Web e caratteri di terze parti per un sito WordPress/Divi utilizzando il plug-in di WordPress.

I plugin di memorizzazione nella cache più diffusi includono:

• WP Rocket
• Abilitatore cache (leggi la nostra recensione)
• W3 Total Cache (leggi la nostra recensione)
• W3 Super Cache (leggi la nostra recensione)
• Comet Cache (leggi la nostra recensione)
• WP Cache più veloce

Suggerimento: ogni volta che hai abilitato la memorizzazione nella cache delle pagine sul tuo sito utilizzando un plug-in, assicurati di eliminare (o cancellare) la cache ogni volta che apporti modifiche al tuo sito Web per assicurarti che a te e ai tuoi visitatori venga offerta l'ultima versione del tuo posto.

#7 Aggiungi minimizzazione e aggregazione del sito web

La minimizzazione rende i file del tuo sito più piccoli. Minimizzare i file del tuo sito (CSS, JavaScript, HTML) rimuove tutti quei caratteri non necessari (come spazi e interruzioni di pagina) in modo che le dimensioni del file si riducano. Ciò riduce il tempo necessario al browser per caricare il contenuto di una pagina.

L'aggregazione comporta la combinazione dei file del sito per ridurre le richieste totali sulla pagina e velocizza i tempi di caricamento per i tuoi visitatori.

Come accennato in precedenza, Divi minimizza e combina dinamicamente Javascript e CSS per impostazione predefinita. Quindi tecnicamente non devi preoccuparti di utilizzare un plug-in di terze parti per ridurre ulteriormente e combinare Javascript e CSS di Divi. Tuttavia, Divi non minimizza l'output HTML. Quindi puoi beneficiare di un plug-in di terze parti per minimizzare (e memorizzare nella cache) l'intero HTML di una pagina.

Inoltre, quasi tutti i siti Divi dipenderanno da file al di fuori del tema Divi (come plug-in o altri file aggiunti al tema figlio) che trarranno vantaggio dalla minimizzazione e dalla combinazione dei file CSS e JS.

Uno dei modi migliori per aggiungere la minimizzazione all'HTML, JS e CSS dell'intero sito è utilizzare Cloudflare. Cloudflare utilizza Auto Minify per ridurre le dimensioni del file di tutto il codice sorgente sul tuo sito web. Inoltre viene fornito di serie con la versione gratuita.

Alcuni plugin credibili che minimizzeranno i file del tuo sito includono:

• Ottimizzazione automatica
• W3 Total Cache (leggi la nostra recensione)
• W3 Super Cache (leggi la nostra recensione)
• WP Rocket (a pagamento)

Questi plugin dovrebbero funzionare con Divi. Ma non c'è modo di valutare tutte le sfumature di un sito Web per dire che funzionerà meglio per tutti. A volte, i plug-in di terze parti ridurranno automaticamente i file JavaScript in un modo che potrebbe causare errori/problemi, quindi assicurati di testare accuratamente il tuo sito web. In generale, è sempre sicuro minimizzare i file CSS. Ma fai attenzione con quei file JavaScript.

E se c'è un conflitto, potrebbe essere necessario disabilitare le opzioni integrate di Divi e lasciare che il plug-in di terze parti gestisca le cose.

E se non vuoi fare affidamento su una terza parte per questo, puoi sempre farlo manualmente. Per ulteriori informazioni su come eseguire questa operazione, dai un'occhiata a questo post completo su come minimizzare CSS, HTML e JavaScript del tuo sito web.

#8 Abilita la compressione GZIP

In che modo la compressione Gzip aiuta a velocizzare il tuo sito Divi

L'abilitazione della compressione Gzip sul tuo sito Divi può darti un grande aumento della velocità (fino al 70% in alcuni casi). Se hai familiarità con la creazione di file compressi (o zippati) sul tuo computer, hai già una conoscenza di base di come funziona la compressione Gzip. Creiamo file zip (o cartelle) per ridurre il contenuto del file (o cartella). Come mai? Quindi possiamo caricare e scaricare il file molto più velocemente! La compressione Gzip fa la stessa cosa per il tuo sito web. Dice al server di comprimere tutti i file che può in versioni più piccole in modo che possa essere servito al client molto più velocemente. Questo può davvero aumentare la velocità di caricamento della pagina.

Questa è una di quelle aree in cui puoi migliorare la velocità di Divi anche su una nuova installazione. Poiché Divi minimizza comunque i file del tema principale, la compressione Gzip o Brotli renderà quei file molto più piccoli di quanto potrebbe mai fare la minimizzazione.

La compressione Gzip è l'algoritmo di compressione più utilizzato, ma sembra che la compressione Brotli sia l'algoritmo di nuova generazione che cerca di ridurre le dimensioni dei file per un trasferimento dei dati più veloce. Viene utilizzato da società di hosting come SiteGround e anche da Cloudflare.

Come abilitare la compressione Gzip sul tuo sito Divi

Alcuni provider di hosting abiliteranno automaticamente la compressione gzip perché è un gioco da ragazzi per le prestazioni del sito. Sentiti libero di controllare se la compressione Gzip è abilitata sul tuo sito

Come già accennato, Cloudflare fornisce la compressione Brotli per tutti i domini nel loro piano gratuito.

Molti dei plug-in per le prestazioni di WordPress (come W3 Total Cache e WP Super Cache) includeranno la compressione Gzip come opzione. Tuttavia, non sembra necessario aggiungere un plug-in per le prestazioni per questa ottimizzazione.

Un modo comune per abilitare la compressione Gzip (su server Apache) è farlo manualmente utilizzando mod_deflate. E tutto ciò che devi fare è accedere al tuo sito Web (la radice) tramite FTP (assicurati di mostrare i file nascosti). Quindi copia e incolla un blocco di codice in fondo al tuo file .htaccess.

#9 Ottimizzazione dell'immagine

L'ottimizzazione delle immagini è uno dei maggiori colpevoli della lenta velocità di caricamento della pagina. Ciò è probabilmente dovuto a quanto sia facile ignorarlo. Dopotutto, quanti danni può fare un'immagine di sfondo a una pagina web? Beh, potresti essere sorpreso. Solo poche immagini di grandi dimensioni che non sono state ottimizzate per il Web potrebbero avere conseguenze catastrofiche sulla velocità di caricamento della pagina. E ammettiamolo, il tuo sito avrà probabilmente molte immagini.

Non c'è davvero bisogno di sottolineare abbastanza la necessità essenziale per l'ottimizzazione dell'immagine. Ogni sito web dovrebbe farlo. La sola compressione delle immagini può rendere il tuo sito notevolmente più veloce e le dimensioni dell'immagine più piccole faranno risparmiare spazio di archiviazione e larghezza di banda (win-win!). Ma ci sono anche altre importanti ottimizzazioni delle immagini a cui dovresti pensare.

In breve, durante l'ottimizzazione dell'immagine per il Web, ti consigliamo di eseguire le seguenti operazioni:

Usa il tipo di file giusto

Quando si tratta di immagini sul Web, dovresti davvero attenerti ai seguenti tipi di file di immagine:

• JPG – Questo dovrebbe essere il tuo tipo di file preferito per la maggior parte delle immagini/fotografie che usi sul tuo sito perché puoi ottenere immagini di bell'aspetto con una dimensione del file più piccola rispetto a PNG o GIF. Evita di usare il formato PNG per cose come immagini di sfondo o fotografie, a meno che tu non abbia bisogno di uno sfondo trasparente.
• PNG: usa i PNG per le immagini che richiedono uno sfondo trasparente. JPG non supporta la trasparenza.
• SVG: questo è un formato vettoriale che offre dettagli estremamente nitidi utilizzando il codice HTML. Gli SVG sono ottimi per loghi, icone e altre animazioni vettoriali.

Ridimensiona e ritaglia le tue immagini

Non vuoi mai che la tua immagine sia più grande di quanto dovrebbe essere. Ad esempio, se stai aggiungendo un logo nelle opzioni del tema di Divi, nella maggior parte dei casi è sufficiente che abbia una larghezza di 100 px. Quindi non caricare un logo con una larghezza di 5000 px e forzare Divi a ridimensionare quell'immagine per te. Il risultato potrebbe sembrare simile sul front-end, ma quelle grandi dimensioni stanno uccidendo il tempo di caricamento della pagina.

Quando carichi immagini sulla tua pagina utilizzando Divi, è utile sapere quanto devono essere grandi quelle immagini all'interno della struttura a colonne di Divi. Questa guida definitiva può aiutarti a indirizzarti nella giusta direzione. (Tuttavia, ci sono nuove strutture di colonne che sono state aggiunte da quel post, quindi cercheremo di aggiornarle presto).

Comprimi le dimensioni del file

Ti consigliamo di ridurre le dimensioni del file di immagine fino al punto prima di notare un calo di qualità. Questo viene fatto attraverso la compressione delle immagini. La maggior parte degli editor di foto, dei plug-in e dei siti come tinypng.com comprimono le immagini utilizzando la compressione senza perdita di dati (che riduce il file di immagine senza perdere la qualità dell'immagine) e la compressione intelligente con perdita di dati (che riduce le dimensioni del file di immagine riducendo i metadati e la qualità dell'immagine in un modo che non è realmente percepibile dall'utente).

Approfitta degli strumenti di ottimizzazione delle immagini

Se puoi, ti suggerirei di ottimizzare le tue immagini per Internet prima di caricarle sul tuo sito Divi. Questo può essere fatto tramite editor di foto come Photoshop che includono un'opzione "Salva per Web". Inoltre, puoi utilizzare un sito di terze parti gratuito come TinyPNG.com o Compressor.io per comprimere l'immagine prima di caricarla sul tuo sito.

Ci sono alcuni ottimi plugin che condurranno la compressione delle immagini per te. Alcuni plugin (come Imagify) comprimeranno le immagini già utilizzate sul tuo sito e comprimeranno automaticamente le immagini mentre le carichi nella tua libreria multimediale di WordPress. Tieni presente che l'utilizzo di un plug-in per questo può essere oneroso per il tuo sito durante la compressione di tali immagini, quindi è consigliabile eseguire l'ottimizzazione delle immagini in anticipo, se possibile.

Ecco alcuni ottimi strumenti e plugin per l'ottimizzazione delle immagini che puoi utilizzare:

• Siti web:
  • Compressor.io
  • Tinypng.com
• Plugin:
  • Immaginare
  • Smush Compressione e ottimizzazione delle immagini
  • razzo WP

Per maggiori informazioni, controlla un confronto su 6 plugin di ottimizzazione delle immagini di qualità.

Supporto SRCSET integrato di Divi

Anche le immagini reattive con supporto SRCSET nativo sono integrate in Divi. Ciò migliora ulteriormente l'ottimizzazione delle immagini utilizzate in Divi offrendo immagini ridimensionate della dimensione giusta per diversi display reattivi (come tablet e telefono).

#10 Ottimizzazione video

L'ottimizzazione del video è un po' più difficile dell'ottimizzazione delle immagini, ma sicuramente non per questo meno importante. I file video possono essere di grandi dimensioni e quindi estremamente onerosi per la velocità di caricamento della pagina. E se stai ospitando molti video sul tuo server (ad esempio nella Galleria multimediale di WordPress), incontrerai il problema aggiuntivo dello spazio su disco. Ecco perché spesso si consiglia di utilizzare servizi di terze parti (come YouTube o Vimeo) per ospitare i tuoi video. In alternativa, potresti considerare di scaricare i tuoi contenuti multimediali video su una piattaforma di archiviazione come Amazon S3. Ciò ti consentirà di collegarti a quei video dall'interno del modulo video di Divi senza che debbano rallentare il tuo server.

Se hai intenzione di ospitare autonomamente i tuoi video, dovrai sicuramente ridurre le dimensioni del video per un caricamento più rapido. Puoi ridurre facilmente i file video usando uno strumento gratuito come Handbrake (che è facile da usare).

Per ulteriori informazioni su come utilizzare i video in Divi (come l'aggiunta di un URL video ospitato da terze parti a un modulo video), consulta questa guida definitiva.

#11 Costruisci la tua pagina Divi per la velocità

Quando si tratta di non farlo, la velocità di un sito Web è determinata dalla velocità con cui carica il contenuto di una pagina. Quindi ha senso creare ciascuna delle pagine del tuo sito Web Divi con l'ottimizzazione delle prestazioni in mente. L'importante è identificare l'obiettivo principale per ogni pagina che crei. Dopodiché, puoi trovare un sano equilibrio tra velocità e design per creare una pagina dall'aspetto sorprendente sul front-end, pur rimanendo appoggiato al back-end. Per un esempio pratico di come ottimizzare il contenuto della pagina Divi per la velocità, consulta il nostro articolo su come creare la pagina Divi più veloce.

Ecco alcuni suggerimenti chiave da tenere a mente quando crei la tua pagina:

• Ottimizza il contenuto above the fold per lavorare con il Critical CSS integrato di Divi.
• Usa Divi Presets per sfruttare la funzione di stili intelligenti integrata di Divi . Ciò consentirà agli elementi di condividere frammenti di codice CSS in base alle classi ed evitare di dover caricare un blocco univoco di CSS per ciascuno.
• Quando possibile, limita i tipi di moduli che utilizzi per creare la pagina . A causa del framework dinamico di Divi, Divi non elaborerà o caricherà i moduli (e il loro CSS unico) che non usi. Ad esempio, se puoi utilizzare due moduli di testo (invece di un modulo di testo e un modulo blurb) per gli stessi risultati, meglio non usare process e caricare inutilmente il modulo blurb sulla pagina.
• Sii intelligente nell'usare l'animazione per la tua pagina . A causa delle funzionalità dinamiche di Divi, Divi non elaborerà o caricherà il JS o il CSS necessari per funzionalità come gli effetti di movimento se non li usi. Ad esempio, se utilizzi le normali impostazioni di animazione in tutta la pagina, potresti voler evitare di utilizzare gli effetti di movimento per un solo elemento. Invece, mantieni lo stile di animazione coerente e goditi un caricamento delle pagine più veloce.

#12 Usa i plugin con attenzione e parsimonia

Usa plugin di qualità

La qualità è il fattore chiave quando si tratta di plugin. In effetti, puoi avere 10 plugin di qualità che non rallenteranno il tuo sito tanto quanto uno cattivo. In generale, assicurati di scegliere plugin che hanno superato la prova del tempo e hanno ottime recensioni. E verifica sempre come un plug-in influisce sulle prestazioni del tuo sito Web con test di velocità prima e dopo per essere sicuro.

Rimuovi plugin inutilizzati o obsoleti

Oltre a utilizzare plug-in di qualità, è anche importante rimuovere dal tuo sito tutti i plug-in inutilizzati e/o obsoleti. Possono essere dannosi per le prestazioni del tuo sito web e un serio rischio per la sicurezza. Inoltre, ogni plug-in (anche quelli di qualità) aggiungerà risorse aggiuntive che aumenteranno il tempo di caricamento di ogni pagina. Se vuoi un sito Divi veloce, ti consigliamo di utilizzare il minor numero di plugin possibile.

Fai attenzione agli errori di blocco del rendering

Divi non ha risorse per il blocco del rendering, quindi significa che gli stili e gli script per il blocco del rendering provengono da plug-in. Se ci sono alcuni grandi script che bloccano il rendering che stanno danneggiando le tue velocità, potresti considerare di allontanarti da quei plugin.

#13 Conduci test di velocità

Probabilmente non staresti leggendo questo articolo se non hai fatto almeno un test di velocità sul tuo sito web. E giustamente, è importante sapere quanto velocemente le tue pagine si stanno caricando per i visitatori. Effettuare un test di velocità è una delle cose più facili che puoi fare. Ci sono tonnellate di siti Web che lo faranno per te gratuitamente. E le metriche che forniscono saranno preziose per identificare i modi in cui puoi ottimizzare ulteriormente il tuo sito per prestazioni migliori.

Ecco alcuni ottimi punti di partenza:

• GTMetrics
• Informazioni sulla pagina di Google
• Strumenti di sviluppo di Chrome
• Lighthouse (disponibile per Chrome Dev Tools)

I risultati di questi test sono ciò che spinge molti di noi a iniziare a ottimizzare il nostro sito Divi per tempi di caricamento più rapidi. Forniscono un'utile analisi delle prestazioni della tua pagina web in una varietà di aree. Quindi puoi utilizzare i loro consigli come una lista di controllo per lavorare mentre ottimizzi il tuo sito.

Il modo migliore per utilizzare questi strumenti di test della velocità online per il tuo sito Divi WordPress è eseguire un test su una pagina prima di eseguire qualsiasi ottimizzazione. Quindi puoi usarlo come base per confrontare i test futuri mentre apporti modifiche. Dopo ogni ottimizzazione che fai, puoi vedere se il tuo punteggio migliora.

Ad esempio, potresti notare che l'utilizzo di un plug-in di memorizzazione nella cache funzionerà meglio di un altro. Non aver paura di testare più plugin per ottenere le migliori prestazioni.

Ecco un'utile guida all'ottimizzazione di WordPress di GTMetrix che sarà utile.

Man mano che implementi le ottimizzazioni della velocità sul tuo sito, dovresti notare miglioramenti nelle seguenti aree:

• Tempo al primo byte (TTFB)
• First Contentful Paint (FCP)
• Time to Interactive (TTI) – misura quando la pagina è pronta per l'interazione dell'utente.
• Indice di velocità (SI): misura la velocità con cui la tua pagina è visivamente completa above the fold
• Total Blocking Time (TBT) – Simile al web vitale First Input Delay (FID) di Google, che è la quantità di tempo tra quando un utente interagisce per la prima volta con il tuo sito e quando il suo browser risponde a tale azione
• Largest Contentful Paint: misura quanto tempo impiega l'elemento di contenuto più grande (come un'immagine) a diventare visibile agli utenti.
• Spostamento layout cumulativo: misura lo spostamento (o spostamento) imprevisto del layout quando un utente carica una pagina.

Per ulteriori informazioni, consulta il nostro post su come migliorare il punteggio di velocità della tua pagina Google.

L'obiettivo è la velocità, non la perfezione

Può essere facile impantanarsi testando il tuo sito web e ottimizzandolo alla perfezione. Ma nessun sito web sarà perfetto. Potresti anche scoprire che il miglioramento di determinati livelli di prestazioni del test di velocità può effettivamente rallentare il tempo di caricamento della pagina. Questo perché nemmeno quei test di velocità sono perfetti. Come questo articolo, sono semplicemente una guida per migliorare le prestazioni e la velocità del tuo sito web.

# 14 Considera il nostro progetto di pagina ad alta velocità Divi

In questo sito Web di prova che abbiamo creato, è stato facile creare un sito Web Divi che ha ottenuto 100 su Google PageSpeed ​​Desktop, 99 su Google PageSpeed ​​Mobile e 100% su GTmetrix. Questo progetto del sito Web consente agli sviluppatori di sperimentare in prima persona l'ottimizzazione della velocità integrata di Divi su un sito reale. Può anche servire come un buon esempio di come ottimizzare il contenuto della tua pagina Divi per la velocità.

Questo sito di prova è stato ottimizzato come segue:

• Ospitato su SiteGround
• Utilizzato CloudFlare per la memorizzazione nella cache, CDN, compressione Brotli
• Non sono stati utilizzati plugin aggiuntivi.
• Funzionalità di prestazioni integrate di Divi usate
• Contenuto della pagina ottimizzato
  • Stili intelligenti utilizzati (Divi Presets) per ridurre il CSS dinamico generato per ogni pagina.
  • Ottimizzato above the fold per assicurarsi che il CSS critico fosse snello.
  • Utilizzato un carattere sicuro per il Web (Arial) per evitare di dover scaricare un carattere da un server di terze parti.
  • Immagini compresse usate
  • Non ha utilizzato animazioni o effetti di movimento
  • Limitato l'uso delle icone per caricare un sottoinsieme di caratteri dell'icona più piccolo che includa le icone social necessarie.

Il risultato:

• La dimensione del CSS è stata ridotta del 94%.
• Tutte le risorse di blocco del rendering sono state completamente eliminate e la dimensione JavaScript di Divi è stata dimezzata.
• Non ci sono richieste di risorse non necessarie.
• Il contenuto above the fold viene visualizzato immediatamente.
• Ha ottenuto il 100% su Google PageSpeed ​​Desktop, il 99% su Google PageSpeed ​​Mobile
• Ha ottenuto il 100% su GTmetrix.

Cosa possiamo imparare per il sito di prova?

In definitiva, Divi ti dà il potere di scegliere come vuoi usarlo e quanto veloce vuoi che sia il tuo sito web. Il sito di test mostra che puoi ottenere punteggi di velocità della pagina quasi perfetti immediatamente. Ma solo perché non abbiamo utilizzato tutti i potenti strumenti di progettazione che rendono Divi così eccezionale non significa che devi aver paura di usarli. Se non utilizzi un modulo o una funzionalità in una pagina, Divi non elaborerà e/o caricherà l'elemento o il suo CSS inutilmente. Ma se decidi di includere un modulo o una funzionalità, Divi farà attenzione a elaborare e/o caricare solo gli elementi e il CSS necessari e niente di più. Questo ti dà un framework leggero su cui basarti, senza doversi preoccupare del web gonfio quando decidi di liberare la potenza di Divi per costruire il tuo sito.

Altri suggerimenti

Abbiamo praticamente coperto tutti i principali fattori che contribuiscono a siti Web Divi/WordPress più veloci. Ma ci sono molte altre cose da considerare che potrebbero migliorare ulteriormente la tua velocità.

• Avere una corretta configurazione del tema figlio Divi
• Modifica dell'URL di accesso di WordPress per impedire a quei bot di sovraccaricare il tuo server. Questa sarebbe una buona occasione per creare una pagina di accesso personalizzata con Divi.
• Evitando chiamate non necessarie a Servizi esterni. Alcuni plug-in e incorporamenti richiedono l'utilizzo di file ospitati sui loro server. Queste chiamate aggiuntive rallenteranno il caricamento della pagina.
• Incorpora il caricamento lento per immagini e video per una migliore velocità di caricamento della pagina.

Utilizzo di Divi e altri plug-in per le prestazioni di terze parti

Le ottimizzazioni delle prestazioni integrate di Divi accelereranno ogni sito Divi perché eliminano il gonfiore che non può essere eliminato con alcun plug-in per le prestazioni. Detto questo, puoi utilizzare plug-in di prestazioni di terze parti aggiuntivi per aumentare la velocità del tuo sito oltre alle ottimizzazioni integrate di Divi. I miglioramenti delle prestazioni Divi si applicano solo a Divi e non ai plug-in di terze parti, quindi i plug-in delle prestazioni potrebbero avvantaggiarti in altre aree al di fuori di Divi. Ad esempio, puoi comunque trarre vantaggio dalla memorizzazione nella cache del tuo sito Web e dall'utilizzo di un CDN.

Gestire i plug-in con prestazioni in conflitto

Poiché Divi è già ottimizzato, l'utilizzo di un plug-in per le prestazioni di terze parti potrebbe causare un conflitto. Quindi è importante mantenere aggiornato il tema Divi e testare accuratamente tutti i plug-in di terze parti in anticipo. Facciamo del nostro meglio per testare le ottimizzazioni integrate di Divi con altri popolari plugin di ottimizzazione. Ma non c'è modo di valutare tutte le sfumature di un sito Web per dire che funzionerà meglio per tutti o che non si verificheranno conflitti.

Ad esempio, i plug-in di terze parti potrebbero minimizzare o spostare automaticamente i file JavaScript in un modo che potrebbe causare errori/problemi, quindi assicurati di testare accuratamente il tuo sito web.

E se c'è un conflitto, potrebbe essere necessario disabilitare le opzioni integrate di Divi e lasciare che il plug-in di terze parti gestisca le cose. Non esitare a contattare il nostro team di supporto per ricevere assistenza in caso di problemi in cui potresti imbatterti. Siamo lieti di aiutarti a risolverlo.

Pensieri finali

Divi è più veloce che mai. Con gli aggiornamenti delle prestazioni integrati, le tue installazioni Divi standard hanno caricamenti di pagina più veloci sul front-end, un amministratore WordPress più veloce sul back-end e un Divi Builder più veloce per modificare e progettare il tuo sito. Questo è un ottimo inizio, ma c'è molto altro da fare per assicurarti che il tuo sito Divi funzioni il più velocemente possibile. Le ottimizzazioni di velocità e prestazioni incluse in questo articolo aumenteranno sicuramente la velocità del tuo sito. Per la maggior parte, queste ottimizzazioni si applicherebbero a qualsiasi sito/tema WordPress, non solo a Divi. Ed è sorprendente quante cose semplici puoi fare gratuitamente!

Sono sicuro che ci sono un sacco di suggerimenti e risorse là fuori che non sono stati menzionati, quindi sentiti libero di condividerli con noi nei commenti.

Aspetto tue notizie.

Saluti!

Immagine in primo piano tramite Sammby / shutterstock.com