5 suggerimenti per creare siti Web più veloci in Divi 5 (Public Alpha)

Divi 5 è il risultato di anni di sforzi per creare la migliore esperienza WordPress. L'ottimizzazione di ogni interazione e aspetto del Visual Builder e del front-end è stata una parte importante di questo. Alla fine, potrai goderti questi miglioramenti, ma ci sono modi in cui puoi basarti su Divi 5 per ottenere i migliori risultati.

Questo articolo esplorerà i vantaggi prestazionali integrati in Divi 5 e come utilizzare appieno queste ottimizzazioni per creare siti Web più veloci possibili.

Scopri di più su Divi 5 Public Alpha e su come scaricarlo.

Scarica Divi 5 Alpha Prova la demo di Divi 5 Diventa un bug tester di Divi 5

Divi 5 è progettato per essere veloce

Divi 5 è stato completamente riscritto, dando la massima priorità alle prestazioni. A differenza di Divi 4, che è stato realizzato con codici brevi, Divi 5 utilizza una struttura più moderna e basata su blocchi. Questo cambiamento da solo ha ridotto drasticamente il tempo impiegato nell’elaborazione dei contenuti e nel caricamento delle pagine. Questo nuovo framework ci ha anche permesso di ridurre significativamente l'HTML caricato, il che significa che le tue pagine si caricano più velocemente, soprattutto su layout lunghi e complessi.

Inoltre, Divi 5 include una struttura di file JavaScript molto più piccola ed efficiente. Tutti gli script sono astratti e accodati solo quando necessario, il che significa che il codice non necessario non rallenta le prestazioni del tuo sito web. Scopri di più sui miglioramenti delle prestazioni di Divi 5.

Tutti questi miglioramenti rendono Divi 5 più veloce fin da subito, ma ci sono diversi passaggi che puoi eseguire per rendere i tuoi siti ancora più veloci.

5 suggerimenti per creare siti Web Divi 5 più veloci

Creare un sito web incredibilmente veloce con Divi ora sta diventando più semplice. Tutto ciò è dovuto ai notevoli aumenti delle prestazioni di Divi 5 e alle funzionalità integrate che semplificano la creazione di siti Web performanti. Siamo fiduciosi che stiamo prendendo il meglio di Divi e riconquistando terreno.

1. Ridurre il numero di tipi di moduli su una pagina

Uno dei maggiori vantaggi della ricostruzione di Divi 5 è che non carica inutilmente risorse che non sono necessarie. Ciò si nota in particolare con i moduli Divi, in cui ogni modulo aggiunge i propri stili e script unici a una pagina. Quanto più diversificato è l'utilizzo dei tipi di moduli, tanto maggiori saranno le risorse necessarie per eseguire il rendering della pagina. Ora, questo non è un grosso problema, ma se sei attento alle prestazioni, questo è qualcosa di importante da ricordare (questo vale per qualsiasi sito Web o generatore di pagine).

Visualizzazione del modulo di inserimento di Divi 5

Per ottimizzare le risorse e velocizzare il tuo sito, concentrati sull'utilizzo di un numero limitato di tipi di moduli principali su una determinata pagina. Un ottimo modo per implementare questa strategia è utilizzare la Libreria Divi e Divi Cloud. Puoi riutilizzare facilmente elementi predefiniti salvando singoli moduli, sezioni e layout. Ciò garantisce che gli stessi stili e moduli vengano applicati in modo coerente, riducendo la possibilità di gonfiare la pagina con variazioni non necessarie.

Il salvataggio di righe/sezioni/moduli ti consente di riutilizzare facilmente tali elementi (con le stesse impostazioni di stile) altrove nella tua pagina o sito web.

Ricordare quali moduli hai già utilizzato su una pagina sembra che possa limitarti, ma esiste più di un modo per progettare una pagina. L'esempio seguente mostra due modi per creare la stessa cosa con diverse disposizioni dei moduli. A seconda che il modulo Blurb sia già utilizzato nella pagina o meno, puoi scegliere di progettare questa parte della pagina con esso o suddividendola.

Utilizzando 3 moduli separati (a sinistra) o un modulo Blurb (a destra). Quale scegliere potrebbe dipendere da quali moduli hai già utilizzato.

Ora, non preoccuparti troppo di questo. Se la tua pagina richiede un determinato elemento, devi costruirlo. Ma quando hai più modi per costruire qualcosa, potresti facilmente utilizzare i moduli già utilizzati nella pagina in modo da non caricare risorse aggiuntive.

2. Utilizza le preimpostazioni globali per ridurre i CSS

Uno dei modi più efficaci per migliorare le prestazioni del tuo sito web in Divi 5 è utilizzare i preset. Quando applichi le preimpostazioni a un elemento, Divi 5 genera meno CSS perché utilizza un sistema basato su classi che condivide gli stili tra più elementi. Quando più elementi utilizzano gli stessi stili, la tua pagina produce meno CSS per lo stesso livello di design.

La creazione di preimpostazioni globali per i moduli utilizzati di frequente, come pulsanti, intestazioni e sezioni, elimina la necessità di regolare manualmente gli stili per ogni nuova istanza. Ciò riduce significativamente la quantità totale di CSS personalizzati generati, per non parlare del tempo necessario per modellare il tuo sito web.

Ecco alcune idee su come iniziare a utilizzare le preimpostazioni nel flusso di progettazione:

• Preimpostazione di riga : puoi aggiungere impostazioni come struttura delle colonne, larghezza del margine interno, riempimento e stili di sfondo a una preimpostazione di riga. Ciò aiuta a mantenere la spaziatura e gli stili visivi coerenti per le righe in tutto il sito.
• Preimpostazione della sezione : le preimpostazioni della sezione consentono di definire colori di sfondo, sfumature o immagini, riempimento e spaziatura e impostazioni di visibilità come condizioni di visualizzazione o CSS personalizzati per dispositivi specifici.
• Preimpostazione del modulo (ad es. Modulo pulsanti) : una preimpostazione del modulo consente di aggiungere impostazioni come stili di testo dei pulsanti, colori, effetti al passaggio del mouse, raggio del bordo, ombre e allineamento. Ciò garantisce che i pulsanti del tuo sito web abbiano un aspetto coerente e corrispondano al tema del tuo design. Puoi creare diverse varianti, ma l'utilizzo delle stesse preimpostazioni su una singola pagina aumenterà il risparmio di stile.

3. Evita i contenuti Divi 4 per migliorare le prestazioni

Se desideri le migliori prestazioni da Divi 5, avrai bisogno che ogni pagina venga completamente migrata. Da quando abbiamo lanciato Divi 5 come Public Alpha, mancano alcune funzionalità che saranno disponibili a breve (anche se la maggior parte di ciò che ti aspetteresti è già disponibile). Se la tua pagina utilizza un elemento che Divi 5 non supporta ancora, non è possibile eseguire la migrazione completa di quella pagina a D5. In questi eventi, il framework Divi 4 viene caricato per quelle pagine (per compatibilità con le versioni precedenti), il che significa che la pagina funziona ancora ma non gode dei vantaggi della velocità della pagina di Divi 5.

Esempio di Divi 5 Migrator che rileva contenuti D4 non supportati

Per sfruttare appieno le ottimizzazioni di Divi 5, utilizza lo strumento di migrazione integrato per scansionare il tuo sito Web alla ricerca di contenuti Divi 4. Il programma di migrazione evidenzierà tutti i moduli, modelli o plug-in che non sono ancora supportati in Divi 5.

Se desideri utilizzare appieno Divi 5 in questo momento, dovresti convertire o sostituire questi elementi con quelli compatibili con Divi 5. Se non hai fretta, puoi attendere i successivi aggiornamenti di Divi 5 Public Alpha, che potrebbero portare maggiore compatibilità per gli elementi attualmente indicati come non supportati. Scopri di più sulla migrazione a Divi 5.

4. Limita le animazioni e gli effetti, soprattutto Above the Fold

Le animazioni e gli effetti possono migliorare il design di un sito web, ma aggiungeranno sicuramente ulteriore tempo di caricamento, soprattutto per i contenuti sopra la piega. Quest'area è fondamentale per la prestazione percepita poiché è la prima cosa che vedono gli utenti. Tempi di caricamento più lenti in questo caso possono avere un impatto negativo sia sull'esperienza dell'utente che sui principali parametri web del tuo sito web, in particolare su parametri come Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS).

Limita o elimina le animazioni e gli effetti nella sezione hero e in altri contenuti Above The Fold per migliorare le prestazioni del tuo sito. Concentrati invece sulla fornitura di elementi di pagina statici e leggeri che si caricano rapidamente.

Se devi utilizzare le animazioni, assicurati che siano minime e non interferiscano con il caricamento iniziale della pagina. L'uso delle preimpostazioni dei moduli è un ottimo modo per garantire un utilizzo coerente dell'animazione tra i moduli (e quindi non caricare inutilmente stili di animazione aggiuntivi).

5. Utilizza miniature cliccabili per i video incorporati

Incorporare video direttamente da piattaforme come YouTube può rallentare il tempo di caricamento della tua pagina a causa degli script e delle risorse aggiuntivi richiesti da questi incorporamenti. Invece di incorporare il video direttamente, utilizza una miniatura cliccabile che apra il video in una lightbox o in una nuova scheda. In questo modo, il video e le risorse associate non verranno caricati finché l'utente non interagisce con essi, riducendo il tempo di caricamento iniziale della pagina.

Il modulo video di Divi rende tutto questo davvero semplice. Nella scheda "Contenuto", vedrai un'area di opzioni intitolata " Sovrapposizioni ". Puoi quindi aggiungere un'immagine ottimizzata come sovrapposizione o generarne automaticamente una dal video di YouTube stesso.

Questa tecnica impedisce che vengano effettuate richieste non necessarie al primo caricamento della pagina, aiutando il tuo sito web a funzionare più velocemente. È un modo semplice per migliorare le prestazioni della pagina pur fornendo contenuti video.

Riepilogo: 5 suggerimenti per siti Web Divi 5 più veloci

• Riduci il numero di tipi di moduli: riduci al minimo il numero di moduli diversi su una pagina per semplificare il caricamento delle risorse.
• Utilizza preimpostazioni globali: applica preimpostazioni per ridurre i CSS personalizzati e creare progetti coerenti.
• Migrazione completa a Divi 5: utilizza Divi 5 Migrator per scansionare e sostituire qualsiasi contenuto Divi 4 non supportato.
• Limita le animazioni: riduci le animazioni e gli effetti, soprattutto nella sezione degli eroi, per un caricamento iniziale più rapido.
• Utilizza miniature cliccabili per i video: sostituisci i video incorporati con miniature cliccabili per evitare di caricare script non necessari.

Conclusione

Divi 5 apporta numerosi miglioramenti prestazionali integrati, rendendolo nativamente più veloce rispetto alle versioni precedenti di Divi. L'eliminazione degli shortcode, la realizzazione di tecnologie migliori (più recenti) e funzionalità incentrate sulle prestazioni contribuiscono a un'esperienza utente più fluida e veloce. Dovresti anche utilizzare le migliori pratiche standard come l'ottimizzazione delle immagini, l'utilizzo di un host veloce e affidabile, l'utilizzo di una CDN o la memorizzazione nella cache edge ed l'eliminazione di file/codici inutilizzati.

Per riassumere ciò che abbiamo trattato, puoi migliorare in modo significativo le prestazioni del tuo sito web riducendo il numero di tipi di moduli su ciascuna pagina, sfruttando le preimpostazioni globali, assicurando che i tuoi contenuti vengano completamente migrati da Divi 4, riducendo al minimo le animazioni e utilizzando le miniature delle immagini per i video. Queste piccole modifiche ti aiutano a sfruttare appieno l'architettura ottimizzata di Divi 5, garantendo che i tuoi siti web abbiano un bell'aspetto e si carichino a velocità elevatissime.

Ricorda, anche se Divi 5 è stato progettato pensando alla velocità, il modo in cui costruisci e strutturi le tue pagine gioca ancora un ruolo fondamentale nel massimizzare tale prestazione.

Scarica Divi 5 Alpha Prova la demo di Divi 5

Aiutaci a rendere Divi 5 ancora migliore partecipando al processo di test dei bug! Il tuo feedback ci aiuterà a perfezionare Divi 5 e a risolvere i problemi nelle prime fasi del processo di sviluppo.

Diventa un tester di bug Divi 5