Astra vs Divi. Qual tema é melhor para performance?

3 dez, 2021 | Geral

Tentando descobrir qual é o tema mais rápido entre Divi e Astra? Ambos os temas são opções multiuso incrivelmente populares que são altamente personalizáveis. Você pode usá-los para literalmente qualquer tipo de site WordPress, de um blog a um portfólio, loja de comércio eletrônico, site comercial, loja online e muito mais. Divi vem com seu próprio […]

Tentando descobrir qual é o tema mais rápido entre Divi e Astra?

Ambos os temas são opções multiuso incrivelmente populares que são altamente personalizáveis. Você pode usá-los para literalmente qualquer tipo de site WordPress, de um blog a um portfólio, loja de comércio eletrônico, site comercial, loja online e muito mais.

Divi vem com seu próprio editor visual embutido de arrastar e soltar (Divi Builder). O Astra foi desenvolvido para emparelhar com plugins populares de criação de páginas, como Elementor e Beaver Builder, ou com o editor de bloco WordPress nativo.

Em termos de personalização e flexibilidade, você não vai errar com nenhum dos dois temas. Mas há outra consideração importante para construir seu site – o desempenho.

A rapidez com que seu site carrega afeta tudo, desde a experiência do usuário até SEO, taxas de conversão e muito mais. Como base do seu site, o tema terá um grande papel no desempenho do seu site.

Em nossa comparação de velocidade Divi x Astra, estamos focados em uma única métrica. Ou seja, o Divi ou o Astra proporcionarão um site WordPress de carregamento mais rápido?

Para responder a essa pergunta, faremos nossos próprios testes. Vamos começar falando sobre como testaremos esses dois temas e, em seguida, compartilharemos os dados e as conclusões que você pode tirar deles.

Observação – originalmente testamos esses temas e escrevemos essa comparação em março de 2021. No entanto, em agosto de 2021, Elegant Themes lançou uma grande atualização de desempenho de front-end para Divi na versão 4.10, que reduziu muito o peso do Divi. Por esse motivo, nós refizemos completamente nossos testes de desempenho Divi vs Astra em novembro de 2021 para dar conta dessas mudanças. 

Como vamos testar o desempenho do tema Divi vs Astra

Para testar o desempenho do Astra vs Divi, executaremos quatro testes separados para cada tema em dois cenários básicos.

Cenário nº 1 : Testaremos apenas os próprios temas em seus estados prontos para uso. Ou seja, antes de adicionar algum conteúdo ou fazer alguma alteração, qual tema é mais otimizado? Ativamos cada tema em uma nova instalação do WordPress e executamos o teste imediatamente.

Este cenário não é realista para um site real, mas dá uma boa ideia da otimização da linha de base de cada tema.

Cenário 2 : construiremos uma página simples com o construtor de cada tema. Para Divi, usaremos o Divi Builder incluído. Para o Astra, instalaremos e usaremos o Elementor.

Embora você possa usar o Astra com o editor de bloco nativo, a maioria dos sites iniciais do Astra são construídos com o Elementor, então achamos que é a escolha mais justa. É também a única maneira de fazer com que o Astra corresponda totalmente ao design visual de arrastar e soltar do Divi, então é mais justo dessa perspectiva também.

Com isso dito, se você está preocupado com o desempenho, obterá melhores resultados com o Astra se aderir ao editor de bloco nativo. Claro, você não terá a experiência completa de design visual se fizer isso – sempre há compensações.

Finalmente, dentro dos dois cenários acima, vamos executar dois testes:

  1. Apenas o tema sem otimização de desempenho.
  2. Com o plugin WP Rocket instalado e otimização de arquivos / mídia habilitada.

Isso lhe dará uma ideia de que tipo de desempenho você pode esperar se implementar as práticas recomendadas de desempenho do WordPress com um plugin como o WP Rocket. Além de cache e outros recursos de otimização geral, WP Rocket introduziu um novo recurso e um aprimoramento na versão 3.9 que faz um ótimo trabalho de otimização de Divi e Astra:

Para referência, nosso site de teste está hospedado no droplet DigitalOcean mais barato de $ 5 por mês, gerenciado e alimentado por RunCloud e uma pilha totalmente Nginx.

Além disso, aqui estão os números exatos da versão dos temas / plugins que estamos testando:

  • Divi theme versão 4.13.0.
  • Tema Astra versão 3.7.5.
  • Plugin Elementor versão 3.4.7 ( para o segundo cenário de teste ).

Para executar os próprios testes de velocidade , usaremos o WebPageTest com uma abordagem de teste móvel e com foco em métricas de desempenho do Core Web Vitals , como Largest Contentful Paint:

  • Dispositivo de teste – iPhone 8
  • Velocidade de conexão – conexão LTE acelerada (12 Mbps, 70 ms RTT) para simular a navegação do usuário em trânsito. No mundo real, as velocidades provavelmente seriam maiores se um usuário móvel estivesse conectado a Wifi, 5G ou outro tipo de conexão mais rápida.
  • Número de testes – para eliminar a variabilidade de um único teste, faremos o WebPageTest executar nove testes separados e obter os valores medianos.

Testes de velocidade Divi vs Astra

Agora, vamos aos dados!

Cenário # 1: apenas os temas

Neste primeiro teste, estamos testando apenas os próprios temas. Basicamente, criamos uma nova instalação do WordPress, ativamos os temas e, em seguida, executamos os testes. 

Mais especificamente, estamos testando a página inicial principal, que mostra a lista de blogs por padrão ( que é apenas a postagem padrão “Hello World” ).

Veja como os temas funcionaram sozinhos ( sem WP Rocket ):

LCP TTFB Solicitações HTTP Tamanho do arquivo
Divi 0,953 s 0,424 s 15 206 KB
Astra 0,558 s 0,396 s 7 41 KB

No geral, você pode ver que o Astra é mais rápido que o Divi por si só. Os tempos de carregamento e o tamanho da página são significativamente mais baixos com o Astra do que com Divi.

Lembre-se – este não é um teste realista para um site completo ( especialmente se você planeja emparelhar o Astra com um plugin de construtor de páginas ), mas mostra que a base do Astra é um pouco mais leve do que a base do Divi.

No entanto, se você adicionar WP Rocket à mistura, os números ficam muito mais próximos:

LCP TTFB Solicitações HTTP Tamanho do arquivo
Divi + WP Rocket 0,424 s 0,368 s 9 93
Astra + WP Rocket 0,409 s 0,353 s 4 19 KB

Em primeiro lugar, você pode ver que Divi e Astra agora têm tempos de maior conteúdo de pintura bastante idênticos com WP Rocket habilitado, enquanto o tempo de LCP do Astra era notavelmente melhor sem WP Rocket.

Além do mais, o WP Rocket foi capaz de reduzir significativamente as solicitações HTTP e o tamanho da página de Divi e Astra. A diferença é mais dramática com Divi, onde o tamanho da página caiu de 206 KB para apenas 93 KB. Porém, em termos de porcentagem, ambos os temas tiveram o tamanho da página reduzido em pouco mais de 50%.

Cenário 2: com construtores

Neste segundo teste de desempenho, veremos as seguintes páginas de teste:

  • Tema Divi + uma página simples construída com o Divi Builder
  • Tema Astra + uma página simples construída com o construtor de páginas Elementor.

Estamos usando módulos idênticos em cada construtor para manter as coisas justas – apenas um único botão e um cronômetro de contagem regressiva.

Veja como essas páginas de teste executaram por si mesmas ( sem WP Rocket ):

LCP TTFB Solicitações HTTP Tamanho do arquivo
Divi 0,971 s 0,453 s 14 204 KB
Astra + Elementor 1.320 s 0,397 s 29 243 KB

Agora, você pode ver que a comparação mudou na outra direção ao combinar Astra e Elementor vs Divi. O criador da página do Divi é um minúsculo pouco mais leve do que a página inicial, o que é uma prova de bom trabalho a temas da equipe elegante em reduzir o inchaço do Divi e só carregar os ativos mínimos necessários.

No entanto, quando você adiciona WP Rocket à mistura, Divi e “Astra + Elementor” são praticamente idênticos:

LCP TTFB Solicitações HTTP Tamanho do arquivo
Divi + WP Rocket 0,407 s 0,242 s 9 92 KB
Astra + Elementor + WP Rocket 🚀 0,453 s 0,340 s 9 93 KB

Você pode ver que o WP Rocket foi capaz de reduzir bastante o tamanho do arquivo de ambos os temas, diminuindo-os para 92 KB e 93 KB, respectivamente.

Mais importante, os tempos de impressão com maior conteúdo também caíram, com “Astra + Elementor” tendo a maior queda de 1,320 segundos para 0,453 segundos. Isso é praticamente igual aos 0,407 segundos que Divi alcançou com o WP Rocket.

O Astra é mais rápido que o Divi? Conclusão

No geral, se você está olhando apenas para o tema Astra em vez de apenas para o tema Divi, o Astra é o vencedor claro. Tema versus tema, o Astra é notavelmente mais leve do que o Divi.

No entanto, essa não é necessariamente uma comparação justa com base em quantas pessoas usarão o tema Astra. 

Embora você certamente possa usar o editor de bloco nativo com o Astra ( que é sua melhor opção de uma perspectiva de desempenho ), você precisará emparelhar o Astra com um construtor de páginas como o Elementor se quiser obter o mesmo tipo de visual, arrastar e – projeto de gota que desbloqueia Divi.

Nesse caso, Divi é um pouco mais leve do que Astra e Elementor emparelhados, embora a diferença não seja tão grande.

No entanto, com a página de estratégias de otimização de velocidade no lugar certo , você deve se sentir confiante de que você pode criar um site de carregamento rápido com ambos Divi e Astra, mesmo se você estiver usando o Astra com um plugin criador da página.

Quer você use Divi ou Astra, o WP Rocket pode fazer uma grande melhoria nos tempos de carregamento e na otimização do desempenho do seu site, como você viu nos dados acima.

Com os dois temas, o WP Rocket foi capaz de cortar os tempos de maior conteúdo de tinta e o tamanho da página em mais da metade, o que significa que você pode alcançar excelentes métricas de desempenho de qualquer maneira.

Artigo original por Colin Newcomer

Fique sempre por dentro

Se inscreva para acompanhar as próximas edições do Radar.

Saiba primeiro sobre novidades e dicas do WordPress