Confronto di velocità: esplorazione del velocissimo visual builder di Divi 5

Come web designer e sviluppatori, sappiamo che le prestazioni sono tutto. Attendere il caricamento di un page builder lento o il rendering delle modifiche può interrompere il flusso creativo e compromettere la produttività. Ecco perché uno degli obiettivi principali di Divi 5 è rivoluzionare la velocità e le prestazioni di Visual Builder. Abbiamo approfondito la struttura principale di Divi e l'abbiamo ricostruita da zero per creare un builder incredibilmente veloce e più reattivo.

In questo post illustrerò i miglioramenti delle prestazioni di Visual Builder che rendono Divi 5 più veloce di qualsiasi versione precedente. Tutto ciò che riguarda Divi 5 Visual Builder è stato ottimizzato per la velocità.

Ora esploriamo l'impatto che ciò avrà sul flusso di lavoro del tuo web design e perché non vorrai mai più tornare a creare pagine più lente.

Riscrivere tutto: cosa rende Divi 5 diverso?

Divi 5 è molto più di un aggiornamento incrementale. Si tratta di una riscrittura completa delle tecnologie principali di Divi, reinventate con particolare attenzione a prestazioni, stabilità e scalabilità. Questo cambiamento fondamentale ci ha portato a riconsiderare il modo in cui Visual Builder funziona nella sua essenza, rendendolo significativamente più veloce e potente.

Sebbene Divi 4 fosse già uno strumento potente su milioni di siti Web, la sua architettura aveva più di dieci anni. Lo abbiamo migliorato e spinto oltre i suoi limiti, ma finalmente è arrivato il momento di costruire nuove fondamenta.

Il debito tecnico ha portato a tempi di caricamento più lenti, ritardi nel re-rendering e instabilità occasionale, soprattutto quando si lavora con layout complessi. Per risolvere questo problema, il team di Divi 5 ha ricostruito l'intero framework da zero, ottimizzandolo per prestazioni e scalabilità futura. I risultati parlano da soli: tutto in Divi 5 avviene più velocemente, dal caricamento del builder alle modifiche e all'anteprima delle modifiche.

Scarica Divi 5 Alpha Prova la demo di Divi 5 Segnala un bug di Divi 5

1. Velocità di re-rendering di Visual Builder migliorate

Quando lavori con uno strumento tutto il giorno, la velocità è importante. Anche il più piccolo ritardo si accumula nel tempo. Nelle versioni precedenti di Divi, i progettisti a volte dovevano attendere una frazione di secondo affinché Visual Builder rispondesse quando aggiungevano nuovi elementi o modificavano gli stili. Ciò era particolarmente evidente quando si lavorava su documenti lunghi (con dozzine di sezioni piene di moduli e stili personalizzati).

Notare lo sfarfallio dello stile su D4 (a sinistra), dove il pulsante impiega millisecondi per applicare completamente gli stili dalla sezione duplicata. Questo è oltre ad essere più lento di D5 (a destra) per duplicare la sezione.

Con Divi 5, le velocità di re-rendering sono state notevolmente migliorate, permettendoti di lavorare senza ritardi. Visual Builder risponde immediatamente quando aggiungi un nuovo modulo, cambi modalità di visualizzazione o modifichi gli stili. Questo livello di reattività fa un'enorme differenza, soprattutto quando si lavora su progetti complessi che richiedono molta messa a punto.

Ma cosa è cambiato esattamente per rendere il costruttore molto più veloce?

La tecnologia alla base del re-rendering più veloce

L’unico modo per raggiungere questo livello di miglioramento era ripartire da zero. Abbiamo preso tutto ciò che abbiamo imparato negli ultimi dieci anni di sviluppo di Divi e abbiamo creato una nuova applicazione utilizzando la tecnologia moderna, eliminando anni di debito tecnico. Abbiamo dedicato del tempo a controllare diverse interazioni e a identificare i colli di bottiglia. Lo stiamo ancora facendo e Divi 5 sta diventando più veloce con ogni aggiornamento.

L’abbandono degli shortcode ha inoltre contribuito a rendere più efficiente l’attraversamento di progetti complessi. Nel post di domani discuteremo del motivo per cui è stato necessario eliminare il framework degli shortcode e di come si sta comportando Divi 5.

Riesci a individuare la differenza nel seguente video comparativo? Evidenzia un altro grande miglioramento in Divi 5: prestazioni migliorate durante la modifica delle preimpostazioni! In Divi 5, le preimpostazioni sono basate sulla classe. Poiché tutti gli elementi preimpostati condividono la stessa classe, sono necessari meno rendering nel builder e meno CSS nel front-end.

2. Tempi di caricamento più rapidi (leggi: niente più doppie ricariche)

Un punto critico significativo nelle versioni precedenti di Divi era il doppio ricaricamento all'avvio di Visual Builder, che si verificava quando moduli e plug-in di terze parti iniettavano erroneamente dati dinamici nella cache di Visual Builder. Questo errore è stato così pervasivo che la doppia ricarica è diventata un punto dolente comune.

Divi 5 "risolve" questo problema essendo così veloce da non aver bisogno della memorizzazione nella cache! Dal momento che non memorizziamo nulla nella cache, non c'è alcuna possibilità che la cache venga invalidata e non sperimenterai mai più la doppia ricarica.

I tempi di caricamento sono stati migliorati su tutta la linea. Scopri la velocità con cui Divi 5 si carica rispetto a Divi 4. Nel mio test si è caricato così velocemente che non hai nemmeno la possibilità di vedere la nostra nuova, fantastica animazione di precaricamento.

Questo miglioramento è particolarmente evidente per i progettisti che lavorano su progetti più grandi. In precedenza, il caricamento completo dell'apertura di un progetto di grandi dimensioni in Visual Builder poteva richiedere diversi secondi.

3. Abbiamo rimosso tutte le animazioni dell'interfaccia

Uno dei cambiamenti più notevoli nella nuova interfaccia di Divi 5 (oltre alla sua riprogettazione moderna) è la rimozione di tutte le animazioni.

Nelle versioni precedenti, le animazioni fornivano feedback visivo durante l'interazione con il builder (ad esempio, aggiungendo nuovi moduli o cambiando modalità di visualizzazione). Anche se queste animazioni aggiungevano un certo livello di giocosità, introducevano anche lievi ritardi nel processo di progettazione, soprattutto sui sistemi più lenti.

La filosofia di design di Divi 5 è diversa. L'interfaccia è lì per servirti, niente di più. È minimo. Non ti intralcia. Non compete con il tuo design. Non gli interessa apparire figo. La sua UI/UX è radicata nella velocità e nell'efficienza.

Noti tutte quelle sottili animazioni (fade-in-out, slide-in-out e simili) utilizzate da Divi 4? Quelli inutilmente rendono l'interfaccia utente più lenta e meno reattiva. In Divi 5 abbiamo adottato un approccio speed-over-style. Abbiamo rimosso queste animazioni per velocizzare il builder e renderlo più reattivo. L'attenzione è ora interamente rivolta alla funzionalità, garantendo che ogni azione intrapresa nel builder avvenga il più rapidamente possibile.

Dove va Divi 5 da qui?

La Public Alpha è ufficialmente lanciata. Innanzitutto, vorremmo ringraziarvi per la pazienza dimostrata mentre abbiamo lavorato diligentemente in questi ultimi mesi per far uscire la Public Alpha di Divi 5. Non è stato un compito da poco e il nostro lavoro è appena iniziato.

Come ha discusso Nick giovedì, dedicheremo circa un mese a correggere i bug noti nel nostro backlog e molti bug che tu, la community, stai riscontrando proprio ora. La Public Alpha di Divi 5 è in gran parte una Alpha, ma stiamo lavorando instancabilmente per portarla in uno stato pronto per la produzione. Puoi aiutare dando un giro a Divi 5 sui tuoi siti locali e di staging, trovando tutti i bug che puoi e segnalandoli al nostro team di supporto. Esamineremo ogni bug individuato e lavoreremo su quelli più urgenti man mano che si presentano.

Scarica Divi 5 Alpha Segnala il bug di Divi 5

Se non disponi di uno stage o di un sito locale con cui testare, puoi comunque bagnarti i piedi con la versione demo di Divi 5. Questo è un ottimo modo per abituarti alla riprogettazione e al layout del nuovo builder. È un cambiamento notevole, ma di cui c'era davvero bisogno.

Prova la demo di Divi 5

Il futuro di Divi è veloce

Divi 5 rappresenta un notevole passo avanti in termini di velocità e prestazioni. Divi è ora più potente e reattivo con un re-rendering incredibilmente veloce, tempi di caricamento più rapidi e un builder riprogettato che dà priorità all'utilità rispetto allo stile. Che tu sia un web designer solista o parte di un team di sviluppo più ampio, questi miglioramenti renderanno il tuo flusso di lavoro più veloce, più fluido e più efficiente.

Se usi Divi 4, rimarrai stupito dalla velocità di Divi 5. La parte migliore? Questo è solo l'inizio. Man mano che ottimizziamo ed espandiamo il framework Divi 5, il builder diventerà sempre più veloce e potente. Il futuro del web design con Divi è velocissimo e siamo appena all'inizio.

Nei prossimi giorni parleremo di cosa significa che Divi 5 si sta allontanando dagli shortcode, approfondendo il sistema di migrazione del sito e un vantaggio relativo agli sviluppatori. Non dimenticare di seguire e iscriverti per ricevere questi aggiornamenti e altro ancora.