Elementor WordPress: Como melhorar a velocidade do seu site

O que é Elementor WordPress?

Elementor WordPress ou como o nome oficial Elementor Page Builder é um construtor de páginas para WordPress que dispensa conhecimento em programação, como ele existem outros como o próprio wordpress gutenberg, Divi Bulider, Visual Composer entre outros.

Uma grande dificuldade desses page builder (construtores de páginas) e que na maioria das vezes eles ficam pesados e demoram para carregar por vários erros cometidos na construção da página.

Como Instalar Elementor WordPress?

Você pode instalar o Elementor pelo próprio menu do WordPress ou se você tem o plugin baixado pode instalar pelo ftp.

Instalar Elementor pelo WordPress:

1. Acesse o painel administrativo do WordPress
2. No menu Plugin > Adicionar Plugin
3. Na tela de instalação de plugin faça uma busca por “elementor”
4. Clique em instalar e depois em ativar plugin
5. Pronto

 

Instalar Elementor pelo FTP:

1. Abra o seu cliente de FTP (Filezilla ou outro)
2. Siga o caminho RAIZDOSITE/wp-content/plugins
3. Com o plugin descompactador arraste ele para a pasta plugins
4. Entre no painel administrativo do WordPress
5. No menu Plugin > Todos os plugins
6. Ative o plugin Elementor Page Builder e Pronto!

Como Otimizar o Elementor WordPress

Antes de otimizar nosso site é bom citamos alguns erros comum que muitos desenvolvedores cometem na criação do site e como podemos solucionar eles. Depois instalamos as ferramentas necessárias que utilizaremos em nosso site, e por fim testar a velocidade do seu site.

1 – Faça testes

Antes de otimizar o seu site, utilize ferramentas para teste de velocidade do site, para poder comparar o antes e depois e até para descobrir alguns erros que o site já tenha.

As ferramentas mais famosas são o próprio Google Insigny ou o mais completo Google lighthouse, e outras como a completa pagespeedtest.org onde você pode até ter uma gravação do carregamento do site, gtmetrix aponta bastante melhores que podem ser feitas e permite criar uma conta para salvar os testes e poder compará-los depois,

2 – Otimize as imagens 

Sempre, sempre otimize as imagens, ícones, svg, vídeo e etc. São os principais consumidores de banda no carregamento da página, você consegue diminuir o tamanho em byte (não dimensão) da imagem sem perder a qualidade, isso é chamado de lossless, tem vários plugins que servem para comprimir as imagens automaticamente na hora do upload, ou serviços online caso não queira instalar um plugin. Com simples otimização de imagem é possível diminuir mais de 80% o tamanho do seu site.

Plugin para comprimir imagens do WordPress

Smush – Otimize as imagens sem perda de qualidade, Lazy Load, Otimização em massa, Detecção de imagem de tamanho incorreta,  redimensione…

Download: https://br.wordpress.org/plugins/wp-smushit/

Sites para otimizar Imagem

Optimizilla – Simples, rápido e grátis, permite o envio em massa de arquivos e o melhor permite ajustar a compressão para obter melhores resultados.

Acesse: https://imagecompressor.com/

TinyPNG – Uma ótima alternativa para compressão, tem um limite para 5mb por imagem, disponibiliza um plugin para wordpress também.

Acesse: https://tinypng.com/

Kraken.io – Permite 2 tipos de compactação, Lossless(sem perda de dados) e Lossy(com perda de dados).

Acesse: https://kraken.io/web-interface/

3 – Plugins

Os plugins que vamos utilizar são, plugin de cache e o próprio Elementor, e se possível o Elementor Pro. 

É comum no desenvolvimento do site alguns desenvolvedores utilizarem um monte de plugins, seja criterioso nos plugin utilizados, tente não usar plugin que comprometa o seu front end. ou seja se for usar uma loja você vai precisar do woocommerce, mas não do plugin que pintar o botão comprar. Tente fazer isso com o próprio Elementor ou html, css, js ou php mesmo.

Vamos utilizar o plugin LiteSpeed Cache que é um plugin de cache como o próprio nome indica, mas ele é muito mais que isso,  confira alguns recursos que ele oferece:

Comprimir e combinar CSS, JavaScript e HTML

Uma boa prática no desenvolvimento e carregar scripts (arquivos js) no fim do código html, para não bloquear a renderização da página, a não ser que seja essencial para o carregamento inicial. Eu poderia te passar várias técnicas e site para minificar/comprimir, organizar arquivos e etc, mas esse plugin é bem completo e automatiza essas questões. Ele tem opções que permitem comprimir e combinar arquivos tanto html, css e javascript. Além disso podemos limitar qual o tamanho do arquivos para quebrar em partes e também quais arquivos excluir da concatenação, gerar CSS crítico automaticamente ou inline no html, permite carregamento assíncrono 

Placeholder

Placeholder e uma técnica de colocar uma imagem super leve no lugar da sua imagem original, assim ela não bloqueia o carregamento da página. E conforme a exibição do site para o usuário ela é carregada. O LSC também permite utilizar placeholder em iframe e tem suporte ao formato de imagem WebP.

WordPress tweaks

O WordPress traz centenas de ferramentas que às vezes nem utilizamos, então para acelerar o carregamento podemos desabilitar algumas opções como: emoticons , comentários, cron e muitas outras.

4 – Cuidado com as fontes

Fontes e uma das primeiras coisas definida no início de um site, e algumas fontes personalizadas podem ser um pouco grande, caso ela não tenha no Google Fonts, você pode utilizar versões dela em formato woff ou woff2 que são mais leves e hospeda-las localmente no seu servidor.

5 – Servidor

Alguns servidores podem ter configurações muito diferente, alguns utilizam cpanel, outros ferramentas próprias, caso sua hospedagem seja linux e tenha um cpanel, podemos otimizar algumas recursos

Gzip

Gzip e como zipar os arquivos do seu site, sejam eles html, css, js ou outros. Ele entregar um zip do seu site para o usuário, logicamente o tamanho é menor. Algumas hospedagem com cpanel como exemplo Hostgator ou a RapidCloud já tem essa funcionalidades para serem habilitadas.

.htaccess 

Caso tenha alguma particularidade e o Litespeed Cache não funcione pode utilizar também direto no código para forçar o funcionamento do cache.

6 – UX

UX e a sigla de user experience, em português experiencia do usuário, de nada adianta seu site carregar em 1 segundo e aparece uma tela branco com um monte de link azuis bagunçados, então além do seu site ser leve e rápido precisamos passar essa sensação para o usuário. muitos teste utilizam a métrica first print screen que é o tempo que o primeiro conteúdo é apresentado para o usuário, sabendo disso podemos priorizar alguns carregamentos primeiro para como a barra do menu e o banner inicial.

Bônus 

Elementor pro

O elementor pro e a versão paga do elementor, caso possua ela você tem acesso a muitos outros recursos para o seu site, e na minha opinião o mais importante e o css habilitado dele. porque com ele você pode escrever os códigos css separado de cada pagina, no lugar de jogar todo o código no seu style.css do tema.

CDN

CDN é abreviação de Content Delivery Network é uma rede distribuída globalmente de servidores da Web ou Pontos de Presença (PoP) cujo objetivo é fornecer uma entrega de conteúdo mais rápida. Simplificando… imagine que o seu servidor seja em São Paulo, para usuários em São Paulo o acesso está OK, mas para um usuário no Amazonas demore um pouco mais, então um CDN disponibiliza uma cópia do seu site geograficamente mais próximo do usuário. Isso é diferente (e mais eficiente) do que o método tradicional de armazenar conteúdo em apenas um servidor central. Pode ser usado para o site todo, ou uma parte ou só imagens.

Temos várias CDNs confiáveis como Cloudflare, Amazon e o próprio Google, hoje a Cloudflare tem um plano gratuito que vale a pena testar.

Plugin CAOS

CAOS (Complete Analytics Optimization Suite) é um plugin voltado para quem utiliza o Google Analytics, ele hospeda o script (analytics.js/gtag.js/ga.js) localmente no seu servidor e tem um esquema para atualiza-lo periodicamente, como ele armazenado localmente ele pode ser armazenado no cache, evitando o navegador do usuário não precisa fazer uma ida e volta para baixar o arquivo do servidor externo do Google..

Conclusão

Hora do Teste, fez o teste e não tirou 100%, lembre-se que tudo que esta na pagina e essencial no seu site, não tem como tirar, tudo bem, mais lembre do UX e de carregar o site gradualmente, 

Com todas essas ferramentas otimizadas e seu site voando tente tomar essas skills de performance para todo o seu desenvolvimento, crie checklist ou processos para não esquecer.

Não deixe de comentar abaixo se conhecia alguma dessas dicas e se eles te ajudaram de alguma maneira, ou se tiver alguma outra sugestão posso adicionar ao artigo .