Comparação de velocidade: explorando o extremamente rápido Divi 5 Visual Builder

Publicados: 2024-09-30

Como web designers e desenvolvedores, sabemos que desempenho é tudo. Esperar que um construtor de páginas lento carregue ou renderize as alterações pode interromper o fluxo criativo e prejudicar a produtividade. É por isso que um dos principais objetivos do Divi 5 é revolucionar a velocidade e o desempenho do Visual Builder. Mergulhamos profundamente na estrutura central do Divi e a reconstruímos do zero para criar um construtor extremamente rápido e mais responsivo.

Nesta postagem, abordarei as melhorias de desempenho no Visual Builder que tornam o Divi 5 mais rápido do que qualquer versão anterior. Tudo no Divi 5 Visual Builder foi otimizado para velocidade.

Agora, vamos explorar como isso afetará seu fluxo de trabalho de web design e por que você nunca mais vai querer voltar a usar criadores de páginas mais lentos.

Índice
  • 1 Reescrevendo tudo: o que torna o Divi 5 diferente?
    • 1.1 1. Velocidades aprimoradas de nova renderização do Visual Builder
    • 1.2 2. Tempos de carregamento mais rápidos (leia: Chega de recargas duplas)
    • 1.3 3. Removemos todas as animações de interface
    • 1.4 Para onde vai o Divi 5 a partir daqui?
    • 1.5 O futuro do Divi é rápido

Reescrevendo tudo: o que torna o Divi 5 diferente?

Divi 5 é muito mais do que uma atualização incremental. É uma reescrita completa das principais tecnologias da Divi, reimaginadas com foco no desempenho, estabilidade e escalabilidade. Essa mudança fundamental nos fez repensar como o Visual Builder opera em sua essência, tornando-o significativamente mais rápido e poderoso.

Embora o Divi 4 já fosse uma ferramenta poderosa em milhões de sites, sua arquitetura tinha mais de uma década. Temos melhorado e ultrapassado os seus limites, mas finalmente chegou a hora de construir uma nova base.

A dívida técnica levou a tempos de carregamento mais lentos, atrasos na nova renderização e instabilidade ocasional, especialmente ao trabalhar com layouts complexos. Para resolver isso, a equipe do Divi 5 reconstruiu toda a estrutura do zero, otimizando-a para desempenho e escalabilidade futura. Os resultados falam por si: tudo no Divi 5 acontece mais rápido, desde carregar o construtor até fazer edições e visualizar alterações.

Baixe o Divi 5 Alpha Experimente o relatório de demonstração do Divi 5 Bug do Divi 5

1. Velocidades aprimoradas de nova renderização do Visual Builder

Quando você trabalha com uma ferramenta o dia todo, a velocidade é importante. Mesmo o menor atraso aumenta com o tempo. Nas versões anteriores do Divi, os designers às vezes tinham que esperar uma fração de segundo para que o Visual Builder respondesse ao adicionar novos elementos ou ajustar estilos. Isso foi especialmente perceptível ao trabalhar em documentos longos (com dezenas de seções preenchidas com módulos e estilos personalizados).

Observe a oscilação do estilo em D4 (esquerda), onde o botão leva milissegundos para aplicar totalmente os estilos da seção duplicada. Além de ser mais lento que D5 (direita) para duplicar a seção.

Com o Divi 5, as velocidades de nova renderização foram drasticamente melhoradas, permitindo que você trabalhe sem atrasos. O Visual Builder responde instantaneamente quando você adiciona um novo módulo, alterna modos de visualização ou ajusta estilos. Esse nível de capacidade de resposta faz uma enorme diferença, especialmente quando se trabalha em projetos complexos que exigem muitos ajustes finos.

Mas o que exatamente mudou para tornar o construtor muito mais rápido?

A tecnologia por trás da nova renderização mais rápida

A única maneira de atingir esse nível de melhoria era começar do zero. Pegamos tudo o que aprendemos na última década de desenvolvimento do Divi e criamos um novo aplicativo usando tecnologia moderna, eliminando anos de dívida técnica. Passamos algum tempo auditando diferentes interações e identificando gargalos. Ainda estamos fazendo isso e o Divi 5 está ficando mais rápido a cada atualização.

Afastar-se dos códigos de acesso também ajudou a tornar a passagem por projetos complexos mais eficiente. Na postagem de amanhã, discutiremos por que a estrutura de shortcode teve que ser abandonada e como o Divi 5 está se saindo.

Você consegue identificar a diferença no vídeo de comparação a seguir? Ele destaca outra grande melhoria no Divi 5: desempenho aprimorado ao editar predefinições! No Divi 5, as predefinições são baseadas em classes. Com todos os elementos predefinidos compartilhando a mesma classe, menos re-renderizações são necessárias no construtor e menos CSS no front-end.

2. Tempos de carregamento mais rápidos (leia: Chega de recargas duplas)

Um problema significativo nas versões mais antigas do Divi era a recarga dupla ao iniciar o Visual Builder, ocorrendo quando módulos e plug-ins de terceiros injetavam por engano dados dinâmicos no cache do Visual Builder. Esse erro foi tão difundido que a recarga dupla se tornou um problema comum.

O Divi 5 “corrige” esse problema sendo tão rápido que não precisa de cache! Como não estamos armazenando nada em cache, não há oportunidade de o cache ser invalidado e você nunca mais experimentará a recarga dupla.

Os tempos de carregamento foram melhorados em todos os aspectos. Veja como o Divi 5 carrega rápido em comparação com o Divi 4. Ele carregou tão rápido no meu teste que você nem teve a chance de ver nossa nova animação sofisticada do pré-carregador.

Esta melhoria é especialmente perceptível para designers que trabalham em projetos maiores. Anteriormente, abrir um projeto grande no Visual Builder poderia levar vários segundos para carregar completamente.

3. Removemos todas as animações de interface

Uma das mudanças mais notáveis ​​na nova interface do Divi 5 (além de seu redesenho moderno) é a remoção de todas as animações.

Nas versões anteriores, as animações forneciam feedback visual ao interagir com o construtor (por exemplo, adicionar novos módulos ou alternar modos de visualização). Embora essas animações acrescentassem um certo nível de diversão, elas também introduziam pequenos atrasos no processo de design, especialmente em sistemas mais lentos.

A filosofia de design do Divi 5 é diferente. A interface está aí para atendê-lo, nada mais. É mínimo. Isso não atrapalha seu caminho. Não compete com o seu design. Não se importa em parecer legal. Sua UI/UX está enraizada na velocidade e eficiência.

Você percebe todas aquelas animações sutis (fade-ins-outs, slide-ins-outs e similares) que o Divi 4 usa? Isso desnecessariamente faz com que a IU pareça mais lenta e menos responsiva. No Divi 5, adotamos uma abordagem de estilo acelerado. Removemos essas animações para acelerar o construtor e torná-lo mais responsivo. O foco agora está inteiramente na funcionalidade, garantindo que cada ação realizada no construtor aconteça o mais rápido possível.

Para onde vai o Divi 5 a partir daqui?

O Alfa Público é lançado oficialmente. Em primeiro lugar, gostaríamos de agradecer sua paciência enquanto trabalhamos diligentemente nos últimos meses para lançar o Alfa Público do Divi 5. Não foi uma tarefa fácil – e nosso trabalho está apenas começando.

Divi 5 Alfa

Como Nick discutiu na quinta-feira, passaremos cerca de um mês corrigindo bugs conhecidos em nosso backlog e muitos bugs que vocês, a comunidade, estão encontrando agora. O Public Alpha do Divi 5 é basicamente um Alpha, mas estamos trabalhando incansavelmente para deixá-lo pronto para produção. Você pode ajudar dando uma olhada no Divi 5 em seus sites locais e de teste, encontrando todos os bugs que puder e relatando-os à nossa equipe de suporte. Faremos a triagem de cada bug encontrado e trabalharemos nos mais urgentes à medida que surgirem.

Baixe o relatório Divi 5 Alpha Bug do Divi 5

Se você não tiver um site local ou de teste para testar, ainda poderá começar a usar a versão demo do Divi 5. Esta é uma ótima maneira de se acostumar com o novo design e layout do construtor. É uma mudança e tanto, mas muito necessária.

Experimente a demonstração do Divi 5

O futuro do Divi é rápido

Divi 5 representa um salto significativo em termos de velocidade e desempenho. Divi agora é mais poderoso e responsivo, com nova renderização extremamente rápida, tempos de carregamento mais rápidos e um construtor redesenhado que prioriza a utilidade em vez do estilo. Quer você seja um web designer solo ou parte de uma equipe de desenvolvimento maior, essas melhorias tornarão seu fluxo de trabalho mais rápido, mais suave e mais eficiente.

Se você estiver usando o Divi 4, ficará surpreso com a rapidez com que o Divi 5 é. A melhor parte? Este é apenas o começo. À medida que otimizamos e expandimos a estrutura do Divi 5, o construtor ficará cada vez mais rápido e poderoso. O futuro do web design com Divi está em alta velocidade - e estamos apenas começando.

Nos próximos dias, falaremos sobre o que significa o fato de o Divi 5 estar se afastando dos códigos de acesso, se aprofundando no sistema de migração de sites e em uma vantagem relacionada ao desenvolvedor. Não se esqueça de seguir e se inscrever para receber essas atualizações e muito mais.