SlideShare uma empresa Scribd logo
processo de
otimização
de sites wordpresS
M E T O D O L O G I A P A R A O T I M I Z A Ç Ã O
D E S I T E S D E F O R M A Á G I L .
P O R D A N I E L P A Z
Me chamo Daniel Paz e sou especialista
WordPress com ênfase em Performance.
Iniciei minha carreira em 2008 e desde
então produzi centenas de sites para
clientes pessoais ou de agências.
Trabalhei e continuo trabalhando para
clientes do Brasil, Africa do Sul,
Alemanha, Estados Unidos, Portugal e
Austrália.
Atuei em projetos como Globo, Record,
Controle Público do Governo Federal,
Shell entre outros.
Atualmente sou Head WordPress no
Estratégia Concursos e criador da
WebOption Hospedagem
WordPress de Alta Performance.
1
SOBRE O AUTOR
Sou idealizador do curso WP LIGHT uma
formação completa de otimização de
sites baseado nos 4 fatores do Core Web
Vitals do Google.
A formação de otimização WordPress
mais completa do mercado onde eu
mostro a solução para os principais
problemas de performance e
usabilidade.
2
SOBRE O AUTOR
3
Primeiro de tudo quero te agradecer por
baixar esse e-book, isso significa que
você está preocupado(a) com a
experiência que seus clientes tem ao
visitar o seu site.
Neste e-book eu vou te guiar em um
passo a passo que eu utilizo nos meus
processos de otimização de sites
WordPress.
Este e-book é exclusivo sobre Otimização
de performance, apenas 1 dos 4 fatores
do Core Web Vitals do Google.
Caso o seu objetivo seja otimizar o seu
site nos 4 fatores do Core Web Vitals, e
aproveitando essa nova mudança do
Google para destacar o seu site dos seus
concorrentes, no final do E-book eu vou
te apresentar a minha formação
completa de otimização de sites.
4
SUMÁRIO
Backup
Teste de desempenho
Remoção de plugins
Identifique o servidor
Otimização de imagens
Limpeza de scripts de temas e Plugins
Hospedar fontes do Google Localmente
Substituir bibliotecas de icones
Minificação de conteúdo e scripts
Pré-carregamento de requisições
Lazy load
Camada de Cache
Configuração de CDN
Teste de desempenho
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
5
BACKUP
1.
Antes de iniciar o processo de
otimização realize um backup total do
seu projeto, é comum que durante este
processo de otimização ocorra erros e
seu site pode ficar totalmente
desconfigurado.
Como a otimização é um processo longo,
pode ser que você fique perdido em qual
parte ocorreu o problema e seja um
pouco complicado reverter.
Neste caso recomendo reverter o
backup e reiniciar o processo, errar é
humano, é comum e é o que nos faz
aprender.
2. TESTE DE DESEMPENHO
Após realizar o backup, vamos dar inicio
a uma bateria de testes para que
possamos comparar os resultados de
cada etapa do processo de otimização.
Para estes testes recomendo utilizar 5
ferramentas.
Google Page Speed Insights
Web.dev
GTMetrix
WebPagetest
Fast or Slow
1.
2.
3.
4.
5.
Guarde o resultado de cada um dos
testes para fins de comparação entre
cada etapa do processo.
6
É comum utilizarmos diversos plugins
em nossos sites WordPress e é mais
comum ainda pararmos de utilizar um
ou outro e simplesmente desativá-los.
O problema que muitos Plugins são
construídos de forma errada e fazem
injeções de códigos até mesmo em
páginas onde o Plugin não
está presente.
Como parte do processo vamos
remover todos os Plugins que
estiverem desativados ou que não
estejam sendo utilizados.
3. REMOÇÃO DE PLUGINS
7
Nesta etapa você precisa identificar em
que tipo de servidor Web o seu site está
hospedado.
Os principais são: Apache, Nginx e
Litespeed.
Para isso vá até o menu Ferramentas do
seu WordPress e clique na opção
diagnóstico.
Na aba servidor você irá encontrar as
informações necessárias.
Caso o seu servidor seja Apache ou
Litespeed você não precisará configurar
nada à nivel de servidor.
4. IDENTIFIQUE O SERVIDOR
8
É importante verificar também a versão
do PHP do seu servidor, o recomendado
é a versão 7.4 ou superior, pois o ganho
de performance na troca de versão do
PHP pode ser de até 30%.
Além disso verifique também qual banco
de dados está sendo utilizado e caso seja
o Mysql 5.7 opte por uma versão mais
recente ou então utilize o Maria DB.
Ainda nesta etapa precisamos identificar
se o servidor possui gZip, Brotli e HTTP2.
Para fazer estas verificações recomendo
as ferramentas abaixo:
HTTP2:
https://http2.pro/
GZIP:
https://sitechecker.pro/gzip-test/
4. IDENTIFIQUE O SERVIDOR
9
Na minha experiência o principal
problema que encontro em sites que
otimizo é o peso das imagens, é comum
encontrar sites com imagens de mais de
2mb de tamanho físico e isso impacta
diretamente no tempo de carregamento.
Seja qual for o software de edição que
você utilize, você precisa seguir boas
práticas na exportação de imagens.
Não utilize resolução acima de 72DPI.
Não é necessário utilizar mais que
72 DPI de resolução para websites, pois
resoluções maiores que isso são apenas
recomendadas para impressão.
Além disso, opte sempre por imagens
JPG com 80% de qualidade, utilize PNG
caso precise utilizar transparências e
sombras.
5. OTIMIZAÇÃO DE IMAGENS
10
Caso a sua imagem seja um vetor sem
sombras e/ou transparências opte por
SVG.
Para utilizar SVG em seu site WordPress
instale o plugin Safe SVG.
Após otimizar a sua imagem em
softwares de edição como Adobe XD,
Photoshop, Illustrator e etc.
Otimize também em serviços online
como:
Ting PNG
Sqoosh App
Compress PNG
5. OTIMIZAÇÃO DE IMAGENS
11
Antes de prosseguir no processo de
otimização, certifique-se de remover
todos os arquivos de folha de estilo e
scripts não utilizados com o plugin de
sua preferência.
É importante desativar Plugins não
utilizados para evitar o carregamento
desnecessário de código.
Para esta tarefa eu recomendo 2 plugins:
Asset Clean Up e Perf Matters
Muito cuidado nesta etapa e certifique-
se de testar o seu site em computadores
e celulares a cada remoção, pois um
recurso removido pode ser necessário
para alguma funcionalidade do seu site.
6. LIMPEZA DE SCRIPTS DE
TEMAS E PLUGINS
12
Outro problema muito comum que
encontro em sites é o uso exagerado de
fontes do Google.
A minha recomendação é utilizar
apenas uma família de fonte e apenas
4 pesos.
Além disso, recomendo baixar as fontes
e utiliza-las de forma local. O motivo
disso são as requisições externas.
Para cada fonte externa no seu site é
realizado uma requisição para o Google
e isso impacta diretamente no tempo de
carregamento do seu site.
Minha recomendação de plugin para
lidar com fontes externas é o OMGF
7. HOSPEDAR FONTES DO
GOOGLE LOCALMENTE
13
Esta parte é extremamente técnica e eu
só recomendo fazer caso tenha um
conhecimento avançado no WordPress.
O problema: a maioria dos temas e
construtores de template utilizam
bibliotecas de icones como
FontAwesome e LineAwesome.
Quando você utiliza um ou 10 icones no
seu site, independente da quantidade,
TODOS OS ICONES são carregados.
Na minha formação completa WP LIGHT
eu ensino como resolver este problema,
mas envolve um pouco de código, pois
precisamos substituir a bibliteca de
fontes de icones por uma biblioteca
javascript de SVGS.
8. SUBSTITUIR BIBLIOTECAS
DE ICONES
14
Desta forma somente os ícones
utilizados no site serão carregados e
melhor em formato SVG.
Caso você queira entender melhor como
funciona esta técnica aqui embaixo está
o link da biblioteca Javascript de SVGS do
FontAwesome.
https://fontawesome.com/how-to-
use/on-the-web/setup/hosting-font-
awesome-yourself
A troca da biblioteca comum de fontes
CSS por esta biblioteca otimizada de JS
de SVGS pode diminuir em até 2
segundos o tempo de carregamento do
seu site.
8. SUBSTITUIR BIBLIOTECAS
DE ÍCONES
15
Litespeed Cache
WP Rocket
WP Fastest Cache
Autoptimize
A minificação é um processo que junta
todos os códigos e remove espaços em
branco tornando assim o peso dos
arquivos menores.
Além de minificar arquivos JS e CSS você
pode também minificar o HTML
tornando assim o carregamento do seu
site mais rápido.
Os plugins que recomendo para esta
tarefa são:
9. MINIFICAÇÃO DE
CONTEÚDO E SCRIPTS
16
Pré-conecte às origens necessárias
Pré-carregue as principais
solicitações
Utilizando o Page Speed Insights,
verifique quais são os recursos
necessários na primeira dobra do seu
site.
Você pode encontrar estas
recomendações em 2 seções do relatório
do Google Page Speed Insights:
1.
2.
Após identificar quais são os recursos,
você pode utilizar um Plugin para
automatizar esta tarefa ou fazer
manualmente adicionando o
rel="preload" nos recursos necessários.
10. PRÉ-CARREGAMENTO DE
REQUISIÇÕES
17
Esta etapa é bastante técnica, mas pode
ser resolvida facilmente com o auxilio de
um Plugin WordPress.
Pre* Party Resource Hints
Dica: não coloque todos os scripts e
folhas de estilo como preload pois isso
pode ter impacto negativo no seu
processo de otimização.
Existem projetos nos quais, eu nem
preciso pré-carregar as principais
solicitações devido a um trabalho
árduo de otimização de folhas de
estilo e scripts.
10. PRÉ-CARREGAMENTO DE
REQUISIÇÕES
18
Você já deve ter se deparado com este
problema na listagem de correções do
Page Speed Insights do Google.
Adie imagens fora da tela
Esta recomendação é muito válida e se
deve a uma técnica chamada
carregamento preguiçoso.
O google considera essencial tudo aquilo
que é mostrado na primeira parte do
site, mas o que só será mostrado após
rolar a página é visto como não
essencial. Então a recomendação do
Google é que todo conteúdo após a
primeira dobra seja adiado.
11. LAZY LOAD
19
Litespeed Cache
WP Rocket
A3 Lazy Load
Lazy Load by WP Rocket
Para esta função você pode utilizar
vários Plugins entre eles posso citar:
Sendo que de todos os que citei acima
apenas o WP Rocket é pago.
Dica: Lembre-se de utilizar um plugin
que deixe uma marcação onde cada
imagem será carregada, do contrário
esta otimização vai causar um outro
problema do Core Web Vitals chamado
CLS.
11. LAZY LOAD
20
Em um processo de otimização é
essencial armazenar os dados em cache,
pois não há nada mais rápido que
arquivos estáticos.
Sim! Não existe nada mais rápido que
HTML puro e CSS.
E o cache é basicamente isso, uma
versão salva do seu site com todos os
recursos necessários para o seu
funcionamento.
O cache pode ser em diferentes
camadas e é preciso configurar cada
uma delas para diversos objetivos.
12. CAMADA DE CACHE
21
Podemos separar o cache de servidor
em 2 camadas.
Cache de recursos estáticos
Nesta camada é salvo arquivos estáticos
como fontes, imagens, arquivos CSS e JS
e HTML.
Cache de recursos dinâmicos
Já na camada de cache de recursos
dinâmicos é salvo o conteúdo advindo
de consultas ao banco de dados, todas
essas consultas podem ser armazenadas
em uma camada de cache.
12. CAMADA DE CACHE
22
Para gerenciar o cache no WordPress
precisamos de algum plugin.
Entre eles podemos citar os mais
famosos e vão depender do seu servidor
Web.
Para Litespeed Enterprise ou Open Lite
Speed: Litespeed Cache
Para Apache: WP Rocket, W3 Total
Cache ou WP Fastest Cache.
Para Nginx: WP Rocket ou W3 Total
Cache.
12. CAMADA DE CACHE
23
A CDN é primordial para obter
performance caso a sua hospedagem
não seja no Brasil.
CDN é uma sigla para central de
direcionamento de conteúdo, ou seja
são servidores espalhados pelo mundo
para entregar uma versão em cache do
seu site na localização mais próxima de
quem está acessando.
O CDN implica diretamente em uma
métrica chamada TTFB ou tempo até o
primeiro Byte.
Assim como os plugins existem
diversos CDN e há versões pagas e
gratuitas.
13. CONFIGURAÇÃO DE CDN
24
A minha recomendação de CDN e que
abordo muito no meu curso de
otimização WordPress é o CloudFlare.
Pois além de performance o Cloudflare
também auxilia na segurança do seu
site.
Como recomendação, caso você esteja
utilizando o CDN Cloudflare, instale o
plugin:
WP Cloudflare Super Page Cache
Este plugin devidamente configurado vai
fazer o seu site voar, Pois para uma CDN
funcionar você precisaria que pelo
menos 2 usuários acessassem a versão
em cache do seu site e este plugin
realiza esta função de navegar em todas
as páginas do site, gerando assim o
cache do seu site à nivel de CDN.
13. CONFIGURAÇÃO DE CDN
25
Após todo este processo, é bom realizar
os testes novamente e comparar os
resultados.
Na minha experiência os impactos em
um processo de otimização são gigantes,
um grande exemplo disso era um
projeto que tinha como tempo de
carregamento +30 segundos e após um
processo de otimização passou a
carregar todo o conteúdo em menos de
2 segundos.
14. TESTE DE DESEMPENHO
26
Se você gostou deste conteúdo mas tem
algumas dúvidas sobre partes do
processo ou de como realizar de forma
mais produtiva evitando erros e
potencializando o seu processo de
otimização.
Eu te apresento o WP LIGHT.
No curso WP LIGHT eu ensino passo a
passo cada etapa do processo com
embasamento teórico e prático de cada
ação que será realizada.
Além disso a formação WP LIGHT possui
um grupo privado de alunos para
esclarecimento de dúvidas e dicas em
um processo de otimização.
FORMAÇÃO WP LIGHT
27

Mais conteúdo relacionado

Mais procurados

Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Celso Fernandes
 
IBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticasIBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticas
rodrigoareis
 

Mais procurados (20)

GUTENBERG EM PRODUÇÃO: QUALIDADES, DESAFIOS
GUTENBERG EM PRODUÇÃO: QUALIDADES, DESAFIOSGUTENBERG EM PRODUÇÃO: QUALIDADES, DESAFIOS
GUTENBERG EM PRODUÇÃO: QUALIDADES, DESAFIOS
 
Top Plugins Wordpress
Top Plugins WordpressTop Plugins Wordpress
Top Plugins Wordpress
 
Melhorando o desempenho do seu WordPress
Melhorando o desempenho do seu WordPressMelhorando o desempenho do seu WordPress
Melhorando o desempenho do seu WordPress
 
WordCamp SP 2014 - SEO para Desenvolvedores WordPress
WordCamp SP 2014 - SEO para Desenvolvedores WordPressWordCamp SP 2014 - SEO para Desenvolvedores WordPress
WordCamp SP 2014 - SEO para Desenvolvedores WordPress
 
Boas práticas Magento 2
Boas práticas Magento 2Boas práticas Magento 2
Boas práticas Magento 2
 
Magento: Mitos vs Vantagens
Magento: Mitos vs VantagensMagento: Mitos vs Vantagens
Magento: Mitos vs Vantagens
 
Wordpress basico
Wordpress basicoWordpress basico
Wordpress basico
 
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
Reduzindo Tempo de Resposta do Servidor - WordCamp BH 2014
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
Instalação CakePHP 2.2.3
Instalação CakePHP 2.2.3Instalação CakePHP 2.2.3
Instalação CakePHP 2.2.3
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
 
WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
 
Otimizando seu Site para Alta Performance - ConaSearch
Otimizando seu Site para Alta Performance - ConaSearchOtimizando seu Site para Alta Performance - ConaSearch
Otimizando seu Site para Alta Performance - ConaSearch
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
 
É possível desenvolver com Windows
É possível desenvolver com WindowsÉ possível desenvolver com Windows
É possível desenvolver com Windows
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPress
 
IBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticasIBM Web Content Management - Melhores práticas
IBM Web Content Management - Melhores práticas
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 

Semelhante a Ebook - Processo de Otimização de Sites WordPress

Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
Luiz Tanure
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
Silvio Dias
 

Semelhante a Ebook - Processo de Otimização de Sites WordPress (20)

CORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSCORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESS
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
Wordpress
WordpressWordpress
Wordpress
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
Blogger rapido
Blogger rapidoBlogger rapido
Blogger rapido
 
Como Acessar Ambiente de Treinamento SAP? [COMPLETO]
Como Acessar Ambiente de Treinamento SAP? [COMPLETO]Como Acessar Ambiente de Treinamento SAP? [COMPLETO]
Como Acessar Ambiente de Treinamento SAP? [COMPLETO]
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
TDC2016SP - Versionando sua infraestrutura: Como e porque fazer, baseado em c...
 
Gsp313 desafio selo_01
Gsp313 desafio selo_01Gsp313 desafio selo_01
Gsp313 desafio selo_01
 
Nao sensivel
Nao sensivelNao sensivel
Nao sensivel
 
Wordpress - Gerenciamento de Blogs e sites - Aula 1
Wordpress - Gerenciamento de Blogs e sites - Aula 1Wordpress - Gerenciamento de Blogs e sites - Aula 1
Wordpress - Gerenciamento de Blogs e sites - Aula 1
 
Cake Php
Cake PhpCake Php
Cake Php
 
Dando vida ao sketch com Firebase
Dando vida ao sketch com FirebaseDando vida ao sketch com Firebase
Dando vida ao sketch com Firebase
 
Pangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud PlatformPangea - Plataforma digital com Google Cloud Platform
Pangea - Plataforma digital com Google Cloud Platform
 
Como criar um plugin sem ser desenvolvedor
Como criar um plugin sem ser desenvolvedorComo criar um plugin sem ser desenvolvedor
Como criar um plugin sem ser desenvolvedor
 
Instalacao eclipse-servidor-tomcat
Instalacao eclipse-servidor-tomcatInstalacao eclipse-servidor-tomcat
Instalacao eclipse-servidor-tomcat
 
Google app engine para lean startups: the good, the bad and the ugly
Google app engine para lean startups: the good, the bad and the uglyGoogle app engine para lean startups: the good, the bad and the ugly
Google app engine para lean startups: the good, the bad and the ugly
 
Performance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanurePerformance em-front-end-luiz-tanure
Performance em-front-end-luiz-tanure
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
 

Ebook - Processo de Otimização de Sites WordPress

  • 1. processo de otimização de sites wordpresS M E T O D O L O G I A P A R A O T I M I Z A Ç Ã O D E S I T E S D E F O R M A Á G I L . P O R D A N I E L P A Z
  • 2. Me chamo Daniel Paz e sou especialista WordPress com ênfase em Performance. Iniciei minha carreira em 2008 e desde então produzi centenas de sites para clientes pessoais ou de agências. Trabalhei e continuo trabalhando para clientes do Brasil, Africa do Sul, Alemanha, Estados Unidos, Portugal e Austrália. Atuei em projetos como Globo, Record, Controle Público do Governo Federal, Shell entre outros. Atualmente sou Head WordPress no Estratégia Concursos e criador da WebOption Hospedagem WordPress de Alta Performance. 1 SOBRE O AUTOR
  • 3. Sou idealizador do curso WP LIGHT uma formação completa de otimização de sites baseado nos 4 fatores do Core Web Vitals do Google. A formação de otimização WordPress mais completa do mercado onde eu mostro a solução para os principais problemas de performance e usabilidade. 2 SOBRE O AUTOR
  • 4. 3 Primeiro de tudo quero te agradecer por baixar esse e-book, isso significa que você está preocupado(a) com a experiência que seus clientes tem ao visitar o seu site. Neste e-book eu vou te guiar em um passo a passo que eu utilizo nos meus processos de otimização de sites WordPress. Este e-book é exclusivo sobre Otimização de performance, apenas 1 dos 4 fatores do Core Web Vitals do Google. Caso o seu objetivo seja otimizar o seu site nos 4 fatores do Core Web Vitals, e aproveitando essa nova mudança do Google para destacar o seu site dos seus concorrentes, no final do E-book eu vou te apresentar a minha formação completa de otimização de sites.
  • 5. 4 SUMÁRIO Backup Teste de desempenho Remoção de plugins Identifique o servidor Otimização de imagens Limpeza de scripts de temas e Plugins Hospedar fontes do Google Localmente Substituir bibliotecas de icones Minificação de conteúdo e scripts Pré-carregamento de requisições Lazy load Camada de Cache Configuração de CDN Teste de desempenho 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
  • 6. 5 BACKUP 1. Antes de iniciar o processo de otimização realize um backup total do seu projeto, é comum que durante este processo de otimização ocorra erros e seu site pode ficar totalmente desconfigurado. Como a otimização é um processo longo, pode ser que você fique perdido em qual parte ocorreu o problema e seja um pouco complicado reverter. Neste caso recomendo reverter o backup e reiniciar o processo, errar é humano, é comum e é o que nos faz aprender.
  • 7. 2. TESTE DE DESEMPENHO Após realizar o backup, vamos dar inicio a uma bateria de testes para que possamos comparar os resultados de cada etapa do processo de otimização. Para estes testes recomendo utilizar 5 ferramentas. Google Page Speed Insights Web.dev GTMetrix WebPagetest Fast or Slow 1. 2. 3. 4. 5. Guarde o resultado de cada um dos testes para fins de comparação entre cada etapa do processo. 6
  • 8. É comum utilizarmos diversos plugins em nossos sites WordPress e é mais comum ainda pararmos de utilizar um ou outro e simplesmente desativá-los. O problema que muitos Plugins são construídos de forma errada e fazem injeções de códigos até mesmo em páginas onde o Plugin não está presente. Como parte do processo vamos remover todos os Plugins que estiverem desativados ou que não estejam sendo utilizados. 3. REMOÇÃO DE PLUGINS 7
  • 9. Nesta etapa você precisa identificar em que tipo de servidor Web o seu site está hospedado. Os principais são: Apache, Nginx e Litespeed. Para isso vá até o menu Ferramentas do seu WordPress e clique na opção diagnóstico. Na aba servidor você irá encontrar as informações necessárias. Caso o seu servidor seja Apache ou Litespeed você não precisará configurar nada à nivel de servidor. 4. IDENTIFIQUE O SERVIDOR 8
  • 10. É importante verificar também a versão do PHP do seu servidor, o recomendado é a versão 7.4 ou superior, pois o ganho de performance na troca de versão do PHP pode ser de até 30%. Além disso verifique também qual banco de dados está sendo utilizado e caso seja o Mysql 5.7 opte por uma versão mais recente ou então utilize o Maria DB. Ainda nesta etapa precisamos identificar se o servidor possui gZip, Brotli e HTTP2. Para fazer estas verificações recomendo as ferramentas abaixo: HTTP2: https://http2.pro/ GZIP: https://sitechecker.pro/gzip-test/ 4. IDENTIFIQUE O SERVIDOR 9
  • 11. Na minha experiência o principal problema que encontro em sites que otimizo é o peso das imagens, é comum encontrar sites com imagens de mais de 2mb de tamanho físico e isso impacta diretamente no tempo de carregamento. Seja qual for o software de edição que você utilize, você precisa seguir boas práticas na exportação de imagens. Não utilize resolução acima de 72DPI. Não é necessário utilizar mais que 72 DPI de resolução para websites, pois resoluções maiores que isso são apenas recomendadas para impressão. Além disso, opte sempre por imagens JPG com 80% de qualidade, utilize PNG caso precise utilizar transparências e sombras. 5. OTIMIZAÇÃO DE IMAGENS 10
  • 12. Caso a sua imagem seja um vetor sem sombras e/ou transparências opte por SVG. Para utilizar SVG em seu site WordPress instale o plugin Safe SVG. Após otimizar a sua imagem em softwares de edição como Adobe XD, Photoshop, Illustrator e etc. Otimize também em serviços online como: Ting PNG Sqoosh App Compress PNG 5. OTIMIZAÇÃO DE IMAGENS 11
  • 13. Antes de prosseguir no processo de otimização, certifique-se de remover todos os arquivos de folha de estilo e scripts não utilizados com o plugin de sua preferência. É importante desativar Plugins não utilizados para evitar o carregamento desnecessário de código. Para esta tarefa eu recomendo 2 plugins: Asset Clean Up e Perf Matters Muito cuidado nesta etapa e certifique- se de testar o seu site em computadores e celulares a cada remoção, pois um recurso removido pode ser necessário para alguma funcionalidade do seu site. 6. LIMPEZA DE SCRIPTS DE TEMAS E PLUGINS 12
  • 14. Outro problema muito comum que encontro em sites é o uso exagerado de fontes do Google. A minha recomendação é utilizar apenas uma família de fonte e apenas 4 pesos. Além disso, recomendo baixar as fontes e utiliza-las de forma local. O motivo disso são as requisições externas. Para cada fonte externa no seu site é realizado uma requisição para o Google e isso impacta diretamente no tempo de carregamento do seu site. Minha recomendação de plugin para lidar com fontes externas é o OMGF 7. HOSPEDAR FONTES DO GOOGLE LOCALMENTE 13
  • 15. Esta parte é extremamente técnica e eu só recomendo fazer caso tenha um conhecimento avançado no WordPress. O problema: a maioria dos temas e construtores de template utilizam bibliotecas de icones como FontAwesome e LineAwesome. Quando você utiliza um ou 10 icones no seu site, independente da quantidade, TODOS OS ICONES são carregados. Na minha formação completa WP LIGHT eu ensino como resolver este problema, mas envolve um pouco de código, pois precisamos substituir a bibliteca de fontes de icones por uma biblioteca javascript de SVGS. 8. SUBSTITUIR BIBLIOTECAS DE ICONES 14
  • 16. Desta forma somente os ícones utilizados no site serão carregados e melhor em formato SVG. Caso você queira entender melhor como funciona esta técnica aqui embaixo está o link da biblioteca Javascript de SVGS do FontAwesome. https://fontawesome.com/how-to- use/on-the-web/setup/hosting-font- awesome-yourself A troca da biblioteca comum de fontes CSS por esta biblioteca otimizada de JS de SVGS pode diminuir em até 2 segundos o tempo de carregamento do seu site. 8. SUBSTITUIR BIBLIOTECAS DE ÍCONES 15
  • 17. Litespeed Cache WP Rocket WP Fastest Cache Autoptimize A minificação é um processo que junta todos os códigos e remove espaços em branco tornando assim o peso dos arquivos menores. Além de minificar arquivos JS e CSS você pode também minificar o HTML tornando assim o carregamento do seu site mais rápido. Os plugins que recomendo para esta tarefa são: 9. MINIFICAÇÃO DE CONTEÚDO E SCRIPTS 16
  • 18. Pré-conecte às origens necessárias Pré-carregue as principais solicitações Utilizando o Page Speed Insights, verifique quais são os recursos necessários na primeira dobra do seu site. Você pode encontrar estas recomendações em 2 seções do relatório do Google Page Speed Insights: 1. 2. Após identificar quais são os recursos, você pode utilizar um Plugin para automatizar esta tarefa ou fazer manualmente adicionando o rel="preload" nos recursos necessários. 10. PRÉ-CARREGAMENTO DE REQUISIÇÕES 17
  • 19. Esta etapa é bastante técnica, mas pode ser resolvida facilmente com o auxilio de um Plugin WordPress. Pre* Party Resource Hints Dica: não coloque todos os scripts e folhas de estilo como preload pois isso pode ter impacto negativo no seu processo de otimização. Existem projetos nos quais, eu nem preciso pré-carregar as principais solicitações devido a um trabalho árduo de otimização de folhas de estilo e scripts. 10. PRÉ-CARREGAMENTO DE REQUISIÇÕES 18
  • 20. Você já deve ter se deparado com este problema na listagem de correções do Page Speed Insights do Google. Adie imagens fora da tela Esta recomendação é muito válida e se deve a uma técnica chamada carregamento preguiçoso. O google considera essencial tudo aquilo que é mostrado na primeira parte do site, mas o que só será mostrado após rolar a página é visto como não essencial. Então a recomendação do Google é que todo conteúdo após a primeira dobra seja adiado. 11. LAZY LOAD 19
  • 21. Litespeed Cache WP Rocket A3 Lazy Load Lazy Load by WP Rocket Para esta função você pode utilizar vários Plugins entre eles posso citar: Sendo que de todos os que citei acima apenas o WP Rocket é pago. Dica: Lembre-se de utilizar um plugin que deixe uma marcação onde cada imagem será carregada, do contrário esta otimização vai causar um outro problema do Core Web Vitals chamado CLS. 11. LAZY LOAD 20
  • 22. Em um processo de otimização é essencial armazenar os dados em cache, pois não há nada mais rápido que arquivos estáticos. Sim! Não existe nada mais rápido que HTML puro e CSS. E o cache é basicamente isso, uma versão salva do seu site com todos os recursos necessários para o seu funcionamento. O cache pode ser em diferentes camadas e é preciso configurar cada uma delas para diversos objetivos. 12. CAMADA DE CACHE 21
  • 23. Podemos separar o cache de servidor em 2 camadas. Cache de recursos estáticos Nesta camada é salvo arquivos estáticos como fontes, imagens, arquivos CSS e JS e HTML. Cache de recursos dinâmicos Já na camada de cache de recursos dinâmicos é salvo o conteúdo advindo de consultas ao banco de dados, todas essas consultas podem ser armazenadas em uma camada de cache. 12. CAMADA DE CACHE 22
  • 24. Para gerenciar o cache no WordPress precisamos de algum plugin. Entre eles podemos citar os mais famosos e vão depender do seu servidor Web. Para Litespeed Enterprise ou Open Lite Speed: Litespeed Cache Para Apache: WP Rocket, W3 Total Cache ou WP Fastest Cache. Para Nginx: WP Rocket ou W3 Total Cache. 12. CAMADA DE CACHE 23
  • 25. A CDN é primordial para obter performance caso a sua hospedagem não seja no Brasil. CDN é uma sigla para central de direcionamento de conteúdo, ou seja são servidores espalhados pelo mundo para entregar uma versão em cache do seu site na localização mais próxima de quem está acessando. O CDN implica diretamente em uma métrica chamada TTFB ou tempo até o primeiro Byte. Assim como os plugins existem diversos CDN e há versões pagas e gratuitas. 13. CONFIGURAÇÃO DE CDN 24
  • 26. A minha recomendação de CDN e que abordo muito no meu curso de otimização WordPress é o CloudFlare. Pois além de performance o Cloudflare também auxilia na segurança do seu site. Como recomendação, caso você esteja utilizando o CDN Cloudflare, instale o plugin: WP Cloudflare Super Page Cache Este plugin devidamente configurado vai fazer o seu site voar, Pois para uma CDN funcionar você precisaria que pelo menos 2 usuários acessassem a versão em cache do seu site e este plugin realiza esta função de navegar em todas as páginas do site, gerando assim o cache do seu site à nivel de CDN. 13. CONFIGURAÇÃO DE CDN 25
  • 27. Após todo este processo, é bom realizar os testes novamente e comparar os resultados. Na minha experiência os impactos em um processo de otimização são gigantes, um grande exemplo disso era um projeto que tinha como tempo de carregamento +30 segundos e após um processo de otimização passou a carregar todo o conteúdo em menos de 2 segundos. 14. TESTE DE DESEMPENHO 26
  • 28. Se você gostou deste conteúdo mas tem algumas dúvidas sobre partes do processo ou de como realizar de forma mais produtiva evitando erros e potencializando o seu processo de otimização. Eu te apresento o WP LIGHT. No curso WP LIGHT eu ensino passo a passo cada etapa do processo com embasamento teórico e prático de cada ação que será realizada. Além disso a formação WP LIGHT possui um grupo privado de alunos para esclarecimento de dúvidas e dicas em um processo de otimização. FORMAÇÃO WP LIGHT 27