Slides do primeiro Meetup realizado no grupo Wordcamp Florianópolis

1. Performance e
otimização no
wordpress
Daniel Paz
www.vistomarketing.com.br

2. Daniel Paz
Idade: 28 Anos
Formação: Marketing Digital
Atuo com webdesign desde 2008.
Trabalho com clientes de SP, MG, RS, SC, Africa do Sul, Estados Unidos e Portugal.
Atuo como desenvolvedor e designer freelancer desde 2014.
Atendi empresas como:
Shell, Endeavor, Patrulha do Consumidor
Controle Publico, Vivo Energy, XEPA, DJ Paulo Pringles, Exército da Salvação,
Globo, Cardano, Guarant Co, Caprisun entre outros.

3. Por que falar em
Performance ?
O Google considera o tempo de carregamento como
um dos seus fatores de rankeamento, atualmente sites
que demoram mais de 2,5 segundos para carregar são
considerados lentos, sendo que o recomendado é
abaixo de 2 segundos.

4. - Ferramentas de análise
- Servidor
- Plugins
- Imagens
- Icones
- Recursos externos
- Cache
- Page Builders
Pontos a
levar em
consideração

5. Ferramentas de análise
Há diversas ferramentas disponíveis no mercado, mas vamos nos limitar a
3 ferramentas especificas.
- Google Page Speed
- GT Metrix
- Light House

6. Google Page Speed
Sendo o Google o principal buscador, é
imprescindível ter o seu site bem avaliado por
sua ferramenta, o Google Page Speed utiliza o
Light House para fazer análises de
desempenho.
Os fatores para obter uma boa nota são
vários, entre eles podemos destacar:
- Usabilidade
- Legibilidade
- SEO
- Performance
Os principais fatores de performance são:
- Tempo de resposta do servidor
- Recursos que impedem a renderização
- Tamanho e formato adequado de imagens
- Adiar imagens fora da tela
- Redirecionamentos de página
- CSS e Javascript não utilizado
- Códigos de terceiros
- Trabalho da thread principal
- Recursos estáticos com política de cache
- Tempo de execução do Javascript
Entre outros ...

7. GT Metrix
- O Google Page Speed nos dá uma nota
devido a performance e nos mostra
alguns pontos de melhoria mas não de
forma precisa. Para isso precisamos de
uma ferramenta mais avançada.
- O GTMetrix permite analisar cada
request realizado em seu site.
- Para iniciar um trabalho de otimização é
necessário primeiro analisar onde está a
demora no carregamento para assim agir de
forma precisa.

8. SERVIDOR
Um dos principais fatores de
otimização é onde o site está
hospedado, qual servidor está
utilizando, versão do PHP, Cache
entre outros fatores.

9. Apache, Nginx, Lite Speed, Open Lite Speed
A escolha de um bom servidor web é fator imprescindível para uma boa
performance. Geralmente designers e programadores optam por servidores
compartilhados devido ao baixo custo e o auto-gerenciamento.
Existem várias opções de hospedagens compartilhadas e cada uma delas utiliza
servidores web diferentes, mas em sua grande maioria utilizam Apache.
Caso você queira obter a melhor performance, prefira entre um Dedicado ou VPS
e utilize Lite Speed, Open Lite Speed ou Nginx.

10. Depende do tamanho do projeto e
do orçamento, Hoje o servidor mais
otimizado para wordpress é o Lite
Speed Enterprise e em segundo
lugar o Open Lite Speed.
A grande diferença entre a versão
paga e gratuita está no poder do
cache e na leitura de arquivos
.htaccess.
Lite Speed ou
Open Lite Speed

11. Plugins
Em termos de performance a
recomendação é a menor
quantidade de plugins possível.
Pois a máxima é, quanto mais
plugins, mais requisições e mais
tempo de carregamento.
A recomendação é utilizar:
- Tema leve ou Builder leve
- Plugin de Cache
- Plugin de segurança
- Plugin de Backup
- Plugin de LGPD
- Plugin de Otimização de
imagens

12. Imagens
Um dos principais fatores de lentidão
nos websites são a qualidade,
quantidade e o tamanho das imagens.
Utilizar imagens leves e em formatos
de última geração como o .webp são
recomendações do Google para obter
a melhor performance.
A recomendação para otimização de
imagens é o plugin Tiny PNG em
conjunto com o plugin webpExpress.

13. Icones
É comum utilizarmos ícones em
nossos projetos, seja para melhorar a
usabilidade ou para deixar com um
aspecto mais moderno.
Porém há um erro comum entre a
maioria de designers e
desenvolvedores em utilizar
bibliotecas de ícones inteiras, tais
como Font Awesome, Material Design,
Line Awesome entre outras, quando
se utiliza apenas alguns ícones no
projeto.

14. O que fazer ?
Há diversas situações, o
recomendado é carregar somente os
ícones necessários, para esta tarefa
podemos utilizar o icoMoon.
Em outras situações, por exemplo
caso precisarmos apenas de ícones
de uma única biblioteca, prefira
sempre carregar os arquivos SVG ao
invés de arquivos de fonte.

15. Recursos externos

16. Plugins de Chat, Facebook, Marketing, entre
outros.
É muito comum precisarmos de scripts externos para obter funcionalidades em
nosso site, tais como chat online, recursos de análise, chatbots, integração com
ferramentas de marketing.
O grande problema quando utilizamos recursos externos é que precisamos
carregar suas bibliotecas.
Caso seja possível prefira sempre obter uma cópia dos recursos e carregar
localmente em seu servidor.

17. Bônus: Flying Images e Flying Scripts
Aqui indico 2 plugins que fazem um ótimo trabalho.
Flying scripts: Este plugin funciona diferente dos outros plugins, ao invés de
atrasar o carregamento de um script externo, ele simplesmente ignora
completamente o script por um período definido em sua configuração.
Flying Images: Ao invés de atrasar o carregamento de imagens, este plugin
permite que você defina quais imagens não devem carregar à partir de uma
certa altura da página, eliminando assim requests desnecessários.

18. Cache
Outro fator imprescindível para obter um site rápido é utilizar um recurso
chamado cache, nada mais é que salvar uma cópia do seu conteúdo no servidor
e disponibilizar esta cópia para os usuários ao invés de fazer requisições a cada
acesso.
Existem diversos tipos de cache, podemos citar LS Cache, Varnish, Op Cache.

19. Plugin de Cache
Há diversos plugins disponíveis na comunidade para esta função, os que indico
são:
Servidor Apache: WP Super Cache
Servidor Nginx: WP Rocket ou W3 Total Cache
Servidor Open Lite Speed ou Lite Speed: Litespeed Cache

20. Page Builders
A facilidade que o Wordpress nos traz na criação de sites é um dos fatores que
mais populariza este CMS, a cada dia novos membros entram na comunidade e
começam a criar sites de forma fácil e descomplicada.
Mas a maioria dos Builders ou construtores de Tema, pecam no quesito
performance, os principais problemas é o carregamento desnecessário de
bibliotecas de ícones inteiras, múltiplos arquivos de folha de estilo CSS, diversas
bibliotecas javascript, e fontes externas.

21. Elementor
O construtor de temas mais famoso do mercado, o
construtor que mais tem cursos disponíveis e o
mais fácil sem dúvidas. Além de ser o construtor de
temas com mais templates e widgets da atualidade.
Mas o mais popular tem alguns problemas, fontes
externas, carregamento de biblioteca de icones,
diversos arquivos css, bibliotecas JS. Felizmente
com o uso de plugins é possível obter uma
performance aceitável, tendo o carregamento dentro
dos 3 - 2s.

22. Gutenberg
O editor nativo do Wordpress, poucos recursos e
complexo para edição de estilos, porém para
programadores a melhor alternativa pois priva o
cliente final de modificar o layout/design do projeto.
Na utilização deste builder, o recomendado é criar os
próprios blocos de conteúdo e utilizar campos
personalizados, fornecendo assim apenas
formulários para o cliente final.

23. Oxygen
Um builder novo no mercado e com futuro
promissor onde seu diferencial é a
facilidade de uso e performance, além da
semântica é claro.
Um construtor de tema livre de frameworks,
bibliotecas de icones e requisições
externas.
Com possibilidade de edição de códigos
PHP no próprio construtor.

24. Bonûs Final
O que testamos e realmente funciona, nossa receita de bolo!
- Servidor VPS Contabo (Melhor Custo x Benefício)
- Ambiente Open Lite Speed
- WebpExpress
- Lite Speed Cache
- Flying Scripts
- Flying Images
- Flying Analytics
- CloudFlare

25. Contatos
Linkedin
linkedin.com/in/danielpaz92/
Facebook
facebook.com/vistomkt
Instagram
instagram.com/visto.marketing
WhatsApp | Telegram
(48) 9 9150 - 1047