Otimização para sites em Elementor

Olá pessoal, tudo bem ? hoje vou falar sobre otimização para sites baseados no Elementor, a facilidade do construtor de temas mais popular para wordpress traz um grande ônus, a performance.

Análise

Para entendermos mais a fundo o problema, precisamos analisar as requisições que o Elementor faz, e são várias, arquivos de font, estilos css, scripts javascript e imagens. O processo de otimização é um pouco demorado e chato, mas os resultados são perceptiveis. Como ferramenta de análise vamos utilizar o Google Page Speed e o GTMetrix.

Servidor e CDN

O principal fator que faz um site ser lento é onde ele está hospedado, geralmente hospedagens compartilhadas são limitadas e com péssima performance, a grande maioria usa versões do PHP e de clientes mysql como Mysql Server e Maria DB.

Como se trata de um servidor compartilhado, muitas vezes não é possível fazer grandes modificações, alguns até permitem mudar a versão, mas só isso não resolve o problema, a grande maioria limita até mesmo o número de acessos. Geralmente quando um site que está em ambiente compartilhado recebe um grande número de acessos ele é bloqueado pela empresa de hospedagem devido o alto consumo de CPU.

O uso de um CDN é necessário, pois torna mais rápido o carregamento do seu site, pois o conteúdo será carregado em um servidor mais próximo do usuário, para isso indicamos o CloudFlare (Free) e o Bunny CDN (Pago).

Plugins

O uso de plugins para corrigir estes problemas é o mais indicado, pois modificar o plugin Elementor é complexo e demorado, abaixo vamos listar todos os plugins que utilizamos e técnica para otimizar sites baseados no Elementor e outros construtores de template.

  • OMGF – Host Google Fonts Locally
    • Este plugin baixa as fontes do Google utilizadas no seu site e armazena na pasta Uploads do seu site, tornando o carregamento das fontes muito mais rápido, além de permitir que a font seja armazenada no cache.
  • CAOS – Host Google Analytics Locally (Google Analytics Local)
    • É incrível mas um dos principais fatores que tornam o seu site lento são os scripts do próprio Google, este plugin baixa os arquivos necessários para instalar o Analytics no seu site e armazena localmente na pasta Uploads, permitindo assim a possibilidade de incluir o Analytics no cache.
  • Lite Speed Cache (Cache) ou WP Rocket
    • Não vou entrar em detalhes de configuração do plugin, pois tomaria o post todo, mas basicamente permite utilizar recursos de otimização como reduzir a quantidade de requests, habilitar o cache do servidor e navegador, mas cuidado estes plugins podem quebrar o seu site, faremos uma abordagem completa em um próximo post.
  • Asset CleanUp: Page Speed Booster (Remover arquivos desnecessários)
    • Um dos plugins mais importantes na otimização avançada, este plugin permite impedir o carregamento de um determinado plugin em determinada página, permite também remover recursos nativos do wordpress não utilizados e que tornam o seu site lento, ficará para um próximo post uma abordagem completa sobre este plugin.
  • Webp Express (Otimização de imagens)
    • Outro fator que faz com que o seu site em Elementor esteja lento são as imagens, é imprescindivel que você coloque imagens no tamanho adequeado (Menor ou igual a1920 x 768 px) e otimize em sites como https://tinypng.com/, o plugin webpExpress faz parte da otimização avançada de imagens, pois ele permite reduzir em até 80% o tamanho físico dos arquivos de imagem, convertendo para o formato webp.
  • ManageWP (Gerenciamento de sites WordPress)
    • Se você possui múltiplos sites em wordpress, esta ferramenta permite gerencia-los de um painel único, além de fornecer otimização de banco de dados, backup e monitoramento de uptime.

Nível Avançado

O uso de ícones é muito comum em sites baseados no Elementor, pois sua interface fácil e descomplicada permite a inclusão de icones da biblioteca FontAwesome, mas dai vem outro problema, digamos que o seu site utilize 10 icones da Biblioteca, de forma nativa o Elementor irá carregar não só os 10 icones, mas todos os icones da biblioteca, causando assim um problema de performance.

Felizmente, podemos remover o FontAwesome do Elementor e inclui-lo em nosso tema, porém esta alteração exige um pouco de conhecimento técnico, o código abaixo remove completamente o Elementor do seu site e deve ser incluido na functions.php do seu tema.

/* REMOVE O CARREGAMENTO DE FONTS DO GOOGLE */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

/* REMOVE A BIBLIOTECA FONT AWESOME */
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

Ok, mas o meu site usa icones e agora eles deixaram de aparecer, problema fácil de ser resolvido, primeiramente precisamos baixar a biblioteca do FontAwesome, para isso basta acessar o site https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself e baixar a versão mais recente do FontAwesome, depois inclua no seu template, indicamos o uso de um tema filho neste caso.

Por padrão nós criamos uma pasta chamada inc dentro de nosso tema filho e incluimos o arquivo zip do FontAwesome nesta pasta, após extraimos seu conteúdo e renomeamos a pasta para FontAwesome.

Depois incluimos o código abaixo para carregar o arquivo javascript que carrega apenas os icones utilizados no site e em formato SVG.

function my_custom_scripts() {
    wp_enqueue_script( 'fontawesome-all', get_stylesheet_directory_uri() . '/inc/fontawesome/js/all.js');
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Com estas pequenas modificações conseguimos reduzir o tempo de carregamento de sites feitos em Elementor de 12 segundos para menos de 3 segundos.

Comente abaixo o que você achou destas dicas e se isso te ajudou. Até breve!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Secured By miniOrange