Banco de dúvidas
Dicas para otimizar seu Page Builder no WordPress
Plugins construtores de sites ("page builders") do WordPress, como Elementor, Divi, Beaver Builder, entre outros, costumam acrescentar referências adicionais a arquivos CSS, JavaScript e elementos DOM ao seu site.
Como o desempenho do site é afetado pela quantidade de CSS e JavaScript, é tentador buscar alternativas mais leves aos construtores. Se não quiser ou não puder remover o seu construtor de sites completamente, é possível otimizá-lo, por exemplo, com o uso de opções embutidas que podem remover um pouco do "inchaço" do construtor (para o Elementor, veja mais em Elementor Experiments e, para o Divi, as opções de desempenho do Divi, ambos artigos em inglês).
Se está usando um construtor de sites, veja quantas vezes a referência ao construtor aparece no código fonte da sua página.
Segue uma lista de dicas e fatos importantes sobre construtores de sites:
- Divi, Elementor e a maioria dos construtores de sites atrasam o carregamento do seu site;
- A maioria dos "addons" (plugins) de construtores de sites atrasam o carregamento ainda mais;
- Oxygen, GeneratePress e Kadence são alternativas mais leves, mas pagas;
- Gutenberg, o Genesis Framework e o tema Elementor Hello são outras alternativas;
- Use o Perfmatters ou o Asset CleanUp para remover recursos não usados do construtor;
- Se estiver usando Astra Starter Sites, use um modelo feito no Gutenberg (ao invés do Elementor);
- O personalizador de temas do Elementor apresenta opções para hospedar fontes localmente e precarregá-las;
- O plugin Divi Rocket apresenta desempenho medíocre, é preferível usar plugins de cache (WP Fastest Cache ou WP Rocket);
- O Divi tem opções embutidas para minificar e combinar arquivos CSS e JavaScript. Essas opções fazem um serviço até melhor do que plugins de cache, mas teste seu impacto com ferramentas de desempenho.
Page Builder | Acessos | Tamanho da página (KB) | Tempo para carregar (s) | JS | CSS | Fontes |
---|---|---|---|---|---|---|
Gutenberg | 29,5 | 204,5 | 1,55 | 5,5 | 6 | 0 |
Elementor | 39 | 320 | 2,2 | 12 | 10,5 | 2,5 |
Divi Theme | 35 | 467,5 | 2,7 | 10 | 8 | 4 |
Divi Plugin | 36,5 | 378,5 | 2,6 | 10 | 9,5 | 0,5 |
Fonte: gutenberghub.com
As informações dessa página foram compiladas por Tom Dupuis, veja mais no artigo sobre como melhorar o desempenho do WordPress).