Elementor: 11 truques de otimização para sites WordPress

Se você está utilizando o Elementor como construtor de sites para a sua empresa, você já deu um passo importante na direção certa! 

O Elementor é uma ferramenta poderosa para criar websites visualmente impressionantes, mas para garantir que o seu site ofereça a melhor experiência aos visitantes e seja bem classificado nos motores de busca, é crucial otimizá-lo. 

Neste artigo, vamos explorar como otimizar seu site Elementor com as funções do plugin, fazendo ajustes de LazyLoad, saída otimizada de DOM e carregamento otimizado de recursos, além de mencionar outras boas práticas que contribuem para a otimização do site. Então, leia até o fim! 

Preparação

Antes de continuar, as configurações a seguir estão contidas quase todas no mesmo lugar. Então, para te ajudar a se localizar melhor, vamos explicar o caminho até elas!

Para ativar as configurações que usaremos, vamos navegar pelo nosso WP Admin, passando por nosso plugin Elementor e navegando pelas configurações, até a área de “Recursos”.

LazyLoad com Elementor

Uma das maneiras mais eficazes de otimizar o carregamento de um site Elementor é através do uso do LazyLoad, uma forma de manipular o carregamento de recursos de mídia na página. 

O LazyLoad é um recurso que atrasa o carregamento de imagens e vídeos (e até iframes, dependendo da configuração) até que o visitante role a página e esteja prestes a visualizar o conteúdo. Isso economiza largura de banda e melhora significativamente o tempo de carregamento da página. Aqui estão algumas dicas para aproveitar ao máximo o LazyLoad no Elementor: 

Como habilitar LazyLoad no Elementor

Para que a configuração seja ativada e funcione da melhor forma, o ideal é ativar duas opções, ao marcá-las como “Ativo”. Essas opções são: “Imagens de fundo com carregamento lento” e “Otimizar o carregamento de imagens“.

Com ambas ativas, nosso Elementor será capaz de atrasar de forma inteligente o carregamento do conteúdo que não estiver no campo de visão do usuário, prática que é muito bem vista pelos motores de busca e validação de desempenho.

Use imagens otimizadas

Mesmo com o LazyLoad, é importante que as imagens que você carrega no seu site sejam otimizadas para a web. Isso significa comprimi-las sem comprometer a qualidade visual.
Existem várias ferramentas online e plugins que podem ajudar nesse processo, como o Imagifye o WebpExpress (o queridinho da redação que vos escreve).

Defina prioridades

Você pode escolher quais elementos específicos devem ser carregados primeiro, garantindo que o conteúdo essencial seja exibido rapidamente. Elementos como cabeçalhos e informações críticas devem ser priorizados. 

Saída otimizada de DOM: Menos é Mais 

A saída otimizada do Document Object Model (DOM) é uma prática que envolve a simplificação do código HTML gerado pelo Elementor. 

Um DOM mais limpo e eficiente resulta em tempos de carregamento mais rápidos e uma melhor experiência para o usuário. Aqui estão algumas dicas para otimizar a saída de DOM do Elementor: 

1. Reduza o Uso de Widgets Desnecessários: Elementor oferece uma variedade de widgets para adicionar funcionalidades ao seu site. Certifique-se de que você está usando apenas aqueles que são realmente necessários para evitar a geração de código HTML desnecessário. 

2. Evite Aninhar Widgets em Excesso: Aninhar widgets dentro de widgets pode criar uma estrutura complexa e inchada. Mantenha a estrutura do seu site o mais plana possível. 

3. Use Códigos Personalizados com Cuidado: Às vezes, pode ser necessário adicionar código personalizado ao seu site. Certifique-se de que esse código seja eficiente e bem otimizado. 

Ativando a saída de DOM otimizada no Elementor

Assim como o lazyload, é muito simples ativar essa configuração, bastando marcar como ativo na caixinha de “Saída DOM otimizada“.

Carregamento Otimizado de Recursos: Minimize as Solicitações 

Outra parte fundamental da otimização do site é o carregamento otimizado de recursos, como arquivos CSS e JavaScript. Quanto menos solicitações forem feitas ao servidor, mais rápido o site carregará. 

Por isso, aqui estão algumas práticas importantes:

• Minimize arquivos CSS e JavaScript: Reduza a quantidade de CSS e JavaScript não essencial. Use ferramentas para unir e minificar esses arquivos, reduzindo o número de solicitações. 
• Habilitar o armazenamento em cache: Use técnicas de cache para armazenar arquivos estáticos nos navegadores dos visitantes. Isso reduzirá a necessidade de recarregar esses arquivos a cada visita. 
• Considere o carregamento assíncrono: Quando apropriado, configure recursos para carregar de forma assíncrona, permitindo que outros elementos da página sejam exibidos mais rapidamente. 

Essas e outras configurações podem ser feitas através de plugins de otimização como o WP Rocket e LiteSpeed Cache, os quais temos artigos especiais ensinando a configurá-los, basta clicar em seus nomes aqui mesmo no texto. 

Ativando o carregamento otimizado de recursos do Elementor

Para ativar a configuração de “Carregamento de Ativos melhorado”, vamos habilitar também a “Carregamento de CSS melhorado”, para um resultado mais acentuado.

Dessa forma, teremos o código PHP/JavaScript e o CSS carregando de forma mais eficiente, o que nos ajuda a atingir um desempenho ainda melhor.

Outras boas práticas para otimização de sites 

Além das técnicas específicas mencionadas acima, existem várias outras boas práticas que podem contribuir para a otimização geral do seu site Elementor: 

• Garanta Responsividade: Certifique-se de que seu site é responsivo e se adapta a diferentes dispositivos e tamanhos de tela, pois o Google prioriza sites que oferecem uma boa experiência móvel. 
• Minimize o Uso de Plugins em Excesso: Embora plugins sejam úteis, o uso excessivo deles pode afetar o desempenho do seu site. Mantenha apenas os plugins necessários e mantenha-os atualizados. 
• Otimize as Imagens para a Web: Como mencionado anteriormente, otimize suas imagens para a web para reduzir o tempo de carregamento da página. Isso pode ser feito, dentre outras formas, convertendo-as para WEBP. 
• Mantenha o Conteúdo Atualizado: Sites com conteúdo atualizado e recorrência nas publicações tendem a ter melhor classificação nos motores de busca.
• Use um Serviço de Hospedagem de Qualidade: A escolha do serviço de hospedagem é fundamental. Por isso, dê preferência a provedores de hospedagem confiáveis e com recursos otimizados para WordPress, como fazemos aqui na Kangaroo.

Conclusão

Em suma, utilizar o Elementor como construtor de sites é um excelente ponto de partida para criar um site visualmente atraente e funcional.

Contudo, para maximizar o desempenho e garantir uma experiência de usuário de alta qualidade, é essencial otimizar o site implementando técnicas como LazyLoad, saída otimizada de DOM e carregamento otimizado de recursos.

Ademais, a adoção de boas práticas adicionais, como garantir a responsividade do site, minimizar o uso excessivo de plugins, otimizar imagens e escolher uma hospedagem de qualidade são passos fundamentais para que seu site não só alcance, mas mantenha uma boa posição nos motores de busca, proporcionando, assim, um alcance e engajamento maior para sua empresa.

Portanto, dedicar tempo e recursos para a otimização do seu site Elementor é um investimento valioso que trará benefícios significativos a longo prazo.