FAÇA O SEU SITE EM ELEMENTOR CARREGAR EM

MENOS DE 2
SEGUNDOS
AUMENTE OS SEUS LEADS COM TÉCNICAS
DE OTIMIZAÇÃO EXCLUSIVAS

DANIEL PAZ
Desenvolvedor
Wordpress Senior
PORQUE DECIDI CRIAR ESTE E-BOOK ?

PERFORMANCE
MATTERS
TENHO VISTO A POPULARIZAÇÃO DO
ELEMENTOR EM GRUPOS DO FACEBOOK E
WHATSAPP, E TENHO ENTENDIMENTO SOBRE A
FACILIDADE DE USO E PRATICIDADE NO DIA A
DIA COM O USO DO PLUGIN, MAS ME PREOCUPO
MUITO COM A EXPERIÊNCIA DE USUÁRIO.

DE NADA ADIANTA UM SITE BEM ORGANIZADO E

COM DESIGN ARROJADO SE A TAXA DE
REJEIÇÃO É ALTA, SE O SEU CLIENTE PRECISA
ESPERAR, 4,5 OU ATÉ 12 SEGUNDOS PARA O
SITE TERMINAR DE CARREGAR.

CRIEI ESTE E-BOOK PARA VOCÊ AGREGAR

VALOR AO SEU TRABALHO, FAZER SITES
MELHORES E ENTREGAR MELHORES
RESULTADOS AO SEU CLIENTE IMPACTANDO
ASSIM DIRETAMENTE OS LEADS DO SEU
CLIENTE.
NÚMEROS NO BRASIL

97% DAS PESSOAS

UTILIZAM INTERNET
ATRÁVES DO
CELULAR
UM ESTUDO REALIZADO PELA
TELEBRASIL EM AGOSTO DE 2019
IDENTIFICOU QUE OS SMARTPHONES
CONTINUAM SENDO O PRINCIPAL MEIO DE
ACESSO À REDE: 97% DO PÚBLICO
NAVEGA NA INTERNET UTILIZANDO UM
APARELHO CELULAR (CERCA DE 71
MILHÕES DE PESSOAS). JÁ OS
NOTEBOOKS SÃO USADOS POR 43% DOS
ENTREVISTADOS, ENQUANTO O
COMPUTADOR POR 30% E O VIDEOGAME
POR 9%.

Fonte:
https://www.consumidormoderno.com.br/2019/08/28/brasileiros-
internet-smartphone/
O1
QUAIS SÃO OS FATORES QUE TORNAM
UM SITE EM ELEMENTOR LENTO ?

O2
FERRAMENTAS PARA IDENTIFICAR DE
ONDE VEM A LENTIDÃO

O3
UTILIZAR OU NÃO CACHE, QUAIS AS
VANTAGENS ?

O4
MELHORES PLUGINS PARA
ÍNDICE

OTIMIZAR O SEU SITE

O5
SUBSTITUINDO OU REMOVENDO
SCRIPTS E FOLHAS DE ESTILO

O6
WP ASSETS CLEANUP

O7
O QUE É HTTP2 E COMO SABER SE O
SEU SERVIDOR TEM SUPORTE

O8
O QUE É CDN E QUAIS AS
ÍNDICE

VANTAGENS DE UTILIZAR
EM SEU SITE
O9
CACHE A NÍVEL DE SERVIDOR
COM PHP OPCACHE E REDIS

10
DEFER E ASYNC EM SCRIPTS
JAVASCRIPT

11
OTIMIZAÇÃO NA NUVEM
COM NITROPACK

12
DICAS DE ACESSIBILIDADE
ÍNDICE

E USABILIDADE
O1

QUAIS SÃO OS
FATORES QUE TORNAM
UM SITE CRIADO EM
ELEMENTOR LENTO ?
1. IMAGENS
Um dos principais fatores que impactam o tempo
de carregamento do seu site são as imagens, é
importante manter imagens em tamanhos
adequados, comprimidas e em formato de última
geração.
QUAL O TAMANHO ADEQUADO PARA IMAGENS ?
O ideal é utilizar o tamanho máximo de 1920 pixels
de largura e 1080 pixels de altura (Full HD).

Importante salientar que na exportação da

imagem em seu editor de imagens preferido, opte
por 80% de qualidade e cores em RGB.
COMO OTIMIZAR IMAGENS ?
Existem diversas ferramentas de compressão de
imagens disponíveis na internet, neste E-book
vamos abordar a ferramenta mais popular.

TINYPNG.COM
Esta ferramenta é incrível e com ela você pode
compactar até 20 imagens por vez, após envia-las
para o site estará disponível uma nova versão da
imagem compactada para baixar.
PLUGIN TINYPNG PARA WORDPRESS
Com o plugin TinyPng você pode comprimir
automaticamente até 500 imagens por mês.

https://br.wordpress.org/plugins/tiny-compress-
images/

Dica de ouro: o Plugin contabiliza cada tamanho de

imagem como um credito na API, utilize apenas a
imagem em tamanho real e após isso use outro plugin
para gerar novas miniaturas das imagens otimizadas.

PLUGIN WEBP EXPRESS

Caso você queira ter boas notas no Google Page

Speed, é essencial que você utilize imagens em
formato de ultima geração, para esta necessidade
recomendamos o uso do plugin webpExpress.

COM ESSA DICA VOCÊ

CONSEGUE REDUZIR EM
ATÉ 90% O TAMANHO DE
SUAS IMAGENS
2.FONTES
FONTES DIFERENTES SÃO LEGAIS

E TRAZEM VIDA
AO SEU SITE
mas em termos de performance,
quanto mais fontes PIOR FICA.

Procure escolher uma única fonte com algumas

variações de peso e estilo e utilize em seu site.

Utilizar mais de uma família de fonte, impacta no

carregamento, pois mais arquivos de folha de
estilo precisam ser carregados e novas
requisições precisam ser feitas.

O QUE É LATÊNCIA E COMO ELA IMPACTA

NO CARREGAMENTO DE FONTES ?

Cada vez que o seu site precisa de uma fonte do

Google por exemplo, ele precisa buscar o arquivo
de folha de estilos CSS e o arquivo da fonte no
servidor do Google, isso implica no tempo de
busca e resposta somado ao tempo de baixar os
arquivos no navegador.
COMO UTILIZAR FONTES DO GOOGLE SEM
LATÊNCIA ?

Para não ter o impacto da latência no

carregamento das fontes do seu site, você
precisa hospeda-las em seu servidor.

Para obter as fontes necessárias e armazena-las

em seu servidor, você pode optar em usar plugins

CAOS | HOST GOOGLE ANALYTICS LOCALLY

EASY FONTS

COM ESSA DICA VOCÊ CONSEGUE

REDUZIR EM ATÉ 0.2 SEGUNDOS O
TEMPO DE CARREGAMENTO
DE CADA FONTE NO SEU SITE
3.FONTAWESOME
Um dos principais fatores na lentidão de sites
criados com Elementor é a Biblioteca
FontAwesome, Suponhamos que você criou um
site onde utiliza os icones para redes sociais e
outros icones para serviços, no total são 10
icones.

NA PRÁTICA, VOCÊ SABE

QUANTOS ICONES ESTÃO SENDO
CARREGADOS ?
O Elementor, carrega a biblioteca inteira de
icones, independente de quantos icones estão
sendo utilizados. Ou seja você está carregando
+1600 icones e utilizando apenas 20.

OK, MAS COMO EU POSSO

CARREGAR APENAS OS
ICONES NECESSARIOS ?
Infelizmente para carregar apenas os icones
utilizados, será necessário modificar códigos em
seu tema do Wordpress.

OK, COMO EU FAÇO ?

No arquivo functions.php do seu tema, você irá
precisar incluir algumas funções.

/* REMOVE A BIBLIOTECA FONT AWESOME */

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
if(!is_admin()){
wp_deregister_style('font-awesome');
wp_deregister_style('elementor-icons-fa-regular');
wp_deregister_style('elementor-icons-fa-solid');
wp_deregister_style('elementor-icons-shared-0');
wp_deregister_style('elementor-icons');
}
}

Utilizando a função wp_deregister_style(),

removemos todos os arquivos referentes à
Biblioteca FontAwesome no Elementor.

MEUS ICONES SUMIRAM E AGORA ?

AGORA VAMOS CARREGAR A
BIBLIOTECA FONTAWESOME
DO JEITO CERTO.
PRA COMEÇAR, VAMOS BAIXAR A
BIBLIOTECA FONTAWESOME E
HOSPEDAR LOCALMENTE
EM NOSSO TEMA
https://fontawesome.com/how-to-use/on-the-
web/setup/hosting-font-awesome-yourself

No link acima você pode encontrar a versão mais

recente da biblioteca para download.

Após baixa-la, crie uma pasta no seu tema com o

nome font-awesome e então extraia os arquivos
da pasta compactada e coloque os arquivos
dentro desta pasta.

Para concluir, no arquivo functions.php do seu

tema, você irá precisar incluir esta função.

/* ADICIONA A BIBLIOTECA FONTAWESOME JS */

function font_awesome() {
wp_enqueue_script( 'fontawesome-all',
get_stylesheet_directory_uri() . '/font-
awesome/js/all.js');
}
add_action( 'wp_enqueue_scripts',
'font_awesome' );
4. WORDPRESS BLOAT
RECURSOS QUE PROVAVELMENTE VOCÊ NÃO USA.

EMOJIS
A grande maioria dos usuários nem faz ideia de
que existem emojis feitos especialmente para o
wordpress e que isso é carregado em todos os
sites, a boa notícia é que caso você não esteja
usando este recurso, você pode desativa-lo com
auxilio de plugins ou via código fonte.

HEARTBEAT
Sem dúvidas um recurso interessante do
wordpress mas que pode deixar o seu site lento, o
heartbeat é o plugin nativo do wordpress que
analisa seu site e monitora quando o seu site sai
fora do ar ou tem erros, COm tudo este plugin fica
executando sempre, o que pode aumentar o
processamento do seu site na hospedagem
causando assim lentidão.

LINKS QUEBRADOS OU IMAGENS FALTANDO

Outro fator de lentidão são os famosos erros 404,
muitas vezes removemos uma foto ou link e não
nos atentamos de colocar o novo link.
Pois saiba que quando o seu site está carregando,
caso não seja encontrado algum link ou arquivo, o
navegador tentará encontrar este arquivo ou link
por um determinado periódo o que irá aumentar o
tempo de carregamento.

Observação: Na experiência de otimizar + de 100 sites ao

longo da carreira, percebi que isso é relativamente
comum.
O2

CONHEÇA AS
MELHORES
FERRAMENTAS PARA
ANÁLISE DE
PERFORMANCE
1. GOOGLE PAGE SPEED
Sem dúvidas a principal ferramenta de análise de
performance, usabilidade e acessibilidade disponível
na internet.

O Google analisa o seu site em diversos fatores,

trazendo dicas de como solucionar os problemas
encontrados.

Você pode acessar a ferramenta de forma 100%

gratuita no link abaixo:

https://developers.google.com/speed/pagespeed/in
sights/?hl=pt-BR

Após analisar o seu site você irá receber 2 notas de 0

a 100, uma para o seu desempenho em celulares e
outra em computadores.
2. GTMETRIX
Na minha humilde opinião, a ferramenta mais
completa para análise de performance do mercado,
provavelmente a mais popular.

Com esta ferramenta é possível analisar cada

requisição realizada em seu site, qual o tamanho das
imagens que estão sendo carregadas, qual o peso dos
arquivos de folha de estilo e scripts.

Você pode acessar a ferramenta de forma 100%

gratuita no link abaixo:

https://gtmetrix.com/

Após analisar o seu site você irá receber uma nota de

A à F sendo A a melhor avaliação e F a pior.

Estudar essa ferramenta e entender o peso de cada

elemento do seu site é crucial para ter uma boa
performance, indico que estude muito sobre a aba
Waterfall ou Cachoeira em Português, pois nela irá
encontrar toda a informação necessária para otimizar
o seu site.
O3

O QUE É CACHE E POR

QUE É TÃO IMPORTANTE
PARA A PERFORMANCE
DO SEU SITE ?
VAMOS COMEÇAR ENTENDENDO O
QUE É E COMO FUNCIONA
O cache ou memória cache é uma espécie de
biblioteca que existe dentro de computadores e
dispositivos móveis.

Ele funciona para guardar dados, informações e

processos temporários acessados com frequência.

Resumindo, armazenando dados em cache, torna

mais rápido o carregamento do seu site após o
primeiro acesso.

No primeiro acesso os dados são baixados, no

segundo acesso estes dados já estão carregados,
tornando assim o carregamento muito mais rápido.
PARA UTILIZAR O
PODER DO CACHE
EM SEU SITE
WORDPRESS SERÁ
NECESSÁRIO UM
PLUGIN, VAMOS
ABORDAR SOBRE
OS MELHORES
PLUGINS DE
CACHE NO
PRÓXIMO
TÓPICO.
O4

PRINCIPAIS PLUGINS
PARA OTIMIZAR O SEU
SITE CRIADO EM
ELEMENTOR
A ESCOLHA DO PLUGIN DE
CACHE DEPENDE DO
SERVIDOR WEB ONDE ESTA
HOSPEDADO O SEU SITE
COMO DESCOBRIR QUE TIPO DE SERVIDOR
WEB ESTÁ HOSPEDADO O MEU SITE ?

Parece uma tarefa díficil descobrir se o Site

utiliza servidor Apache, Nginx ou Litespeed,
mas na verdade é simples e rápido, Os sites
construídos em Wordpress possuem uma
ferramenta chamada Health Check, esta
ferramenta fornece informações detalhadas de
segurança, permissões de pastas, versão do
PHP, tipo de servidor web entre outras
informações.

Para acessar,
basta ir em
Ferramentas
na Opção
Diagnóstico e
clicar na Aba
Informação.
ENTÃO NAVEGAMOS ATÉ A
ABA SERVIDOR
Nesta aba estão todas as informações
necessárias para a escolha de plugin de cache,
e também outras informações relevantes como
configurações do PHP e versão do mesmo.
SERVIDOR APACHE2
Sem dúvidas o tipo mais comum de servidor
Web para Linux é o Apache2, seu grande
diferencial em relação ao Nginx por exemplo é
que o Apache2 funciona com arquivos
.htaccess, para configurações de
redirecionamentos e cache é uma opção muito
simples e prática.

Dica: Caso o seu site esteja em um ambiente

com Apache2, tenha certeza de que você está
usando o protocolo HTTP2.

PLUGINS RECOMENDADOS

Gratuitos
WP Fastest Cache
JCH Optimize
W3 Total Cache

Pagos
WP Rocket
SERVIDOR NGINX
Não tão comum mas com um diferencial de +
100% de performance adicional em relação ao
Apache temos o Nginx, servidor web que utiliza
o Varnish Cache.

A grande dificuldade em relação ao Nginx é que

este servidor não suporta arquivos .htaccess,
técnica utilizada para configurar cache e
redirecionamentos na maioria dos plugins de
cache no mercado, o que torna a utilização do
Nginx restrita a alguns plugins de cache.

PLUGINS RECOMENDADOS

Gratuitos
Varnish/Nginx Proxy Caching
W3 Total Cache
WP Supercache
Nginx Cache

Pagos
WP Rocket
SERVIDOR LITESPEED
O mais novo servidor Web voltado à
performance no Wordpress é o LiteSpeed, seu
grande diferencial é em relação à performance,
podendo ser até 200% mais performático do
que o Apache2, ainda possuimos o grande
diferencial que é desfrutar do Lite Speed Cache
junto com o HTTP3 exclusivo neste servidor.

Outro grande diferencial é que diferente do

Nginx, o Litespeed permite a utilização de
arquivos .htaccess tornando mais fácil a
configuração de cache e redirecionamentos.

PLUGINS RECOMENDADOS

Gratuitos
Lite Speed Cache

Pagos
WP Rocket
5: SUBSTITUINDO OU
REMOVENDO SCRIPTS
PARA REMOVERMOS RECURSOS EXTERNOS
EM NOSSO SITE, PRECISAMOS PRIMEIRO
IDENTIFICA-LOS, PARA ISSO PODEMOS
USAR AS FERRAMENTAS QUE CITAMOS
NESTE E-BOOK COMO O GTMETRIX, OU
NAVEGARMOS NO CÓDIGO FONTE DO SITE.

É importante enterdemos como o wordpress lida

com os scripts encontrados em nosso site, para
depois de uma análise substituirmos ou
removermos os arquivos desnecessários, tendo
assim um considerável ganho de performance.
PARA TODO SCRIPT NO WORDPRESS É
UTILIZADO UM IDENTIFICADOR,
SEGUIDO PELA EXTENSÃO DO TIPO DE
SCRIPT, CHAMAMOS ESTE
IDENTIFICADOR DE ID.

AO VISUALIZARMOS O CÓDIGO FONTE DE NOSSO

SITE, PODEMOS IDENTIFICA-LOS FACILMENTE,
VOCÊ PODE PRESSIONAR O BOTÃO DIREITO DO
MOUSE E CLICAR EM VER FONTE DA PÁGINA.
OU PRESSIONAR JUNTO AS TECLAS CTRL + U.

<link rel='stylesheet' id='dashicons-css' href='https://possible-

batfish.jurassic.ninja/wp-includes/css/dashicons.min.css?
ver=5.6' media='all' />

No exemplo acima, podemos identificar que o ID é

dashicons-css

Esta é uma biblioteca muito comum em sites wordpress e

muito utilizada na parte administrativa do site, mas
geralmente não utilizada na construção do site.

O segredo de uma boa otimização é manter somente o

necessário, remover tudo o que é desnecessário e depois
disso utilizar um plugin de cache e otimização.
POR QUE FAZER AS COISAS NESTA ORDEM ?

TUDO O QUE COMPÔE O SEU SITE, HTML, ARQUIVOS DE

ESTILO CSS E SCRIPTS JS FAZEM PARTE DO DOM,
SEGUNDO A DEVMIDIA O DOCUMENT OBJECT MODEL OU
SIMPLESMENTE DOM É UTILIZADO PELO NAVEGADOR
WEB PARA REPRESENTAR A SUA PÁGINA WEB.

Ou seja quanto mais informações no seu site, maior

quantidade de scripts e arquivos de folha de estilo,
maior será o dom e maior será o tempo de
carregamento do seu site.

Felizmente com um pouco de programação podemos

remover os recursos desnecessários de nosso site,
para isso basta sabermos o seu ID e aplicarmos um
pouco de código no arquivo functions.php do nosso
template.

function removerDashIcons(){
if(is_admin()) { wp_deregister_script('dashicons-css'); }
}
add_action('wp_footer', 'removerDashIcons');

No exemplo acima, vamos utilizar a função

wp_deregister_scrip('id') para remover o DashIcons de
nosso tema, mantendo o seu carregamento no painel
administrativo utilizando o método is_admin para
garantir o funcionamento no painel administrativo.
PODEMOS UTILIZAR ESTA ESTRATÉGIA
TAMBÉM PARA RECURSOS EXTERNOS.

Você pode baixar os recursos externos, colocar na sua

hospedagem, remover o carregamento dos arquivos
externos e em seguida carregar os seus arquivos
locais.

Por que fazer isso ? Em primeiro lugar, não é possível

manipular, modificar e adicionar no cache, recursos
que não estejam locais. Ou seja todos os recursos
externos não vão fazer parte do cache do seu site.

Exemplos de recursos externos: Scripts do Google

como Tag Manager, Analytics, Adwords, Fonts, Folhas
de estilo CSS de plugins, scripts de chatbot, pixel do
facebook entre outros.

Você pode utilizar a técnica da página anterior para

remove-los do DOM, mas será necessário substitui-los,
para manter o funcionamento do seu site.
VAMOS VER NA PRÁTICA COMO ISSO
FUNCIONA.
6: O QUE É HTTP2 E
COMO SABER SE O SEU
SERVIDOR TEM SUPORTE

O HTTP2 é uma tecnologia que surgiu em

decorrência de um projeto anterior, o
protocolo experimental SPDY desenvolvido
pelo Google. O objetivo era diminuir a latência
de carregamento das páginas web através da
redução dos principais problemas
encontrados no HTTP/1.1

Com HTTP/2, o servidor poderá mandar esses

elementos antes do seu navegador pedi-los.
Dessa forma, assim que seu navegador
solicitar nosso index.html, o servidor poderá
responder com o index.html, o style.css, o
tb.css, o jquery.js e o favicon.png. Quando seu
navegador se der conta de que precisa usar
esses arquivos para renderizar a página, eles
já estarão no seu computador, prontinhos
para uso. Isso é mais eficiente e todo mundo
fica feliz.
8: CACHE A NÍVEL DE
SERVIDOR COM PHP
OPCACHE E REDIS
BÔNUS

O PLUGIN DE
OTIMIZAÇÃO
QUEBROU O
MEU SITE E
AGORA ?