Otimização para sites em Elementor | Visto Marketing
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.
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).
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.
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.
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 */
/* REMOVE A BIBLIOTECA FONT AWESOME */
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.
wp_enqueue_script( 'fontawesome-all', get_stylesheet_directory_uri() . '/inc/fontawesome/js/all.js');
Com estas pequenas modificações conseguimos reduzir o tempo de carregamento de sites feitos em Elementor de 12 segundos para menos de 3 segundos.