Formado em Sistemas de Informação pela Universidade Paranaense - UNIPAR. Sou desenvolver web com 8 (oito) anos de experiencia e á 3 (três) trabalhando com Wordpress. Atualmente trabalho na InCuca como programador. Breve descrição sobre a apresentação: A apresentação será um estudo de caso baseado em monitoramento de performance. Basicamente será apresentado um plugin desenvolvido para WordPress com acesso ao GTmetrix via API. Com o plugin o usuário poderá realizar testes de performance e armazenar os resultado em tabelas do banco de dados do site para consultas posteriores.

1. Monitoramento de performance no WordPress:
Um estudo de caso utilizando plugin e API
WordCamp Floripa - 2019

2. Vagner Luis Soletti
Programador na InCuca.
vagnersoletti@gmail.com
Olá!
WordCamp Floripa - 2019

3. Performance
WordCamp Floripa - 2019

4. Performance?
"Ato ou processo de realizar algo; atuação,
desempenho: O menino teve uma performance
excelente na prova de natação."
http://michaelis.uol.com.br/busca?r=0&f=0&t=0&palavra=performance
Poderia ser substituído por: Meu site teve uma performance
excelente quando meu cliente acessou.
WordCamp Floripa - 2019

5. Em resumo!
Performance é termo utilizado para verificar
como o seu site pode lidar com o tráfego.
WordCamp Floripa - 2019

6. Meu site pode lidar com tráfego?
Calma jovem não se assuste, não é nada ilegal..
Lembre-se estamos em um dia de estudo :)
WordCamp Floripa - 2019

7. Vamos considerar
Tráfego
com o fluxo de usuários/visitantes
navegando/acessando
seu site.
WordCamp Floripa - 2019

8. Legal, entendemos o que é, agora vamos
descobrir:
Qual importância da performance em
nossos projetos?
WordCamp Floripa - 2019

9. Qual importância da performance em nossos projetos?
● Os problemas de performance podem eliminar completamente o sistema,
levando a perda completa de renda ($), experiência ruim com público (PR
Negative) e perda de negócios a longo prazo e má reputação.
● Problemas de desempenho podem levar a uma necessidade de uma nova
arquitetura completa. Isso pode significar o desenvolvimento de componentes
adicionais, mudar para uma nova plataforma, comprar ferramentas e serviços de
terceiros, ou até mesmo uma reescrever completamente o sistema.
● As notícias relacionadas aos fracassos nos últimos anos dos produtos digitais
muito poucos estão relacionados a problemas de funcionalidade, quase todos se
relacionam com performance.
WordCamp Floripa - 2019

10. Vamos iniciar...
● Resposta: quanto tempo o servidor demora para responder às interações
do usuário com o site.
● Estabilidade: se o site se mantém estável e acessível 24 horas por dia.
● Escalabilidade: se o site aguenta receber mais usuários de forma repentina
sem sair do ar.
● Confiabilidade: se o site é seguro e passa confiança ao usuário.
● Velocidade: quanto tempo o site demora para carregar as
informações por completo para o usuário.
WordCamp Floripa - 2019

11. Velocidade...
A velocidade do site influência nos resultados?
- Sim, em 2010 o Google anunciou que o tempo de
carregamento passou a ser incorporado em seus fatores de
rankeamento.
Lista dos 200 fatores de rankeamentos do Google.
https://backlinko.com/google-ranking-factors
WordCamp Floripa - 2019

12. Tempo...
Qual o tempo de carregamento ideal para o meu
site?
Um estudo realizado por Geoff Kenyon, em 2011, apontou o seguinte:
- Se o seu site for carregado em 5 segundos, será mais rápido que aproximadamente 25%
- Se o seu site for carregado em 2,9 segundos, será mais rápido que aproximadamente 50%
- Se o seu site for carregado em 1,7 segundos, será mais rápido que aproximadamente 75%
- Se o seu site for carregado em 0,8 segundos, será mais rápido do que aproximadamente 94%
-
https://moz.com/blog/site-speed-are-you-fast-does-it-matter
WordCamp Floripa - 2019

13. Infográfico...
Para cada 1 segundo de atraso:
1. Diminui a satisfação dos clientes em até 16%;
2. Cai em até 11% as visualizações das páginas;
3. Taxa de conversão pode cair para até 7%;
http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/

14. Ainda sobre o tempo...
Segundo o Google, o ideal é que o seu site carregue entre 0,5
e 2 segundos.
Segue abaixo o link do vídeo feito pelo Google onde Maile
Ohye explica a importância do carregamento rápido na web.
Canal do Google Webmasters
https://www.youtube.com/watch?v=OpMfx_Zie2g
WordCamp Floripa - 2019

15. Fica esperto...
Uma pesquisa feita pela Akamai, juntamente com a
Forrester Consulting, concluiu que 40% dos consumidores
não esperam mais do que 3 segundos pelo carregamento de
uma página. Depois disso, eles abandonam o site.
WordCamp Floripa - 2019

16. Testar...
Como testar a velocidade do meu site?
Existem várias ferramentas gratuitas para testar seus projetos, seguem
algumas:
1. Google PageSpeed Insights
(https://developers.google.com/speed/pagespeed/insights/?hl=pt-br)
2. GTmetrix (https://gtmetrix.com/)
3. Pingdom (https://tools.pingdom.com/)
4. Webpagetest (https://www.webpagetest.org/)
5. E mais inúmeras delas.
WordCamp Floripa - 2019

18. Sobre o resultado obtido:
1. PageSpeed: Nesta guia você encontra um relatório completo com todos os pontos avaliados
pela ferramenta, ordenados por prioridade. E a nota que foi dada em cada critérios avaliado.
2. Yslow: Guia semelhante ao relatório anterior organizado por prioridade, porém é baseado nos
critérios definidos pela Yslow.
3. Waterfall: Nesta guia o relatório é em cascata que apresenta visualmente toda a sequência de
requisições efetuadas para o carregamento da página.
4. Timings: Nesta guia é a apresentação de uma linha do tempo do carregamento da página, com o
tempo que cada uma das etapas levou para finalizar seu carregamento.
5. Video: Nesta guia é necessário ativar o video e realizar o teste novamente pra ver em video o
carregamento da página.
6. History: Nesta guia temos os gráficos que acompanham o histórico de desempenho da página
em relação aos dados apresentados anteriormente
WordCamp Floripa - 2019

19. PageSpeed
WordCamp Floripa - 2019

20. Sobre o resultado obtido:
1. PageSpeed: Nesta guia você encontra um relatório completo com todos os pontos avaliados
pela ferramenta, ordenados por prioridade. E a nota que foi dada em cada critérios avaliado.
2. Yslow: Guia semelhante ao relatório anterior organizado por prioridade, porém é baseado nos
critérios definidos pela Yslow.
3. Waterfall: Nesta guia o relatório é em cascata que apresenta visualmente toda a sequência de
requisições efetuadas para o carregamento da página.
4. Timings: Nesta guia é a apresentação de uma linha do tempo do carregamento da página, com o
tempo que cada uma das etapas levou para finalizar seu carregamento.
5. Video: Nesta guia é necessário ativar o video e realizar o teste novamente pra ver em video o
carregamento da página.
6. History: Nesta guia temos os gráficos que acompanham o histórico de desempenho da página
em relação aos dados apresentados anteriormente
WordCamp Floripa - 2019

21. YSlow
WordCamp Floripa - 2019

22. Sobre o resultado obtido:
1. PageSpeed: Nesta guia você encontra um relatório completo com todos os pontos avaliados
pela ferramenta, ordenados por prioridade. E a nota que foi dada em cada critérios avaliado.
2. Yslow: Guia semelhante ao relatório anterior organizado por prioridade, porém é baseado nos
critérios definidos pela Yslow.
3. Waterfall: Nesta guia o relatório é em cascata que apresenta visualmente toda a sequência de
requisições efetuadas para o carregamento da página.
4. Timings: Nesta guia é a apresentação de uma linha do tempo do carregamento da página, com o
tempo que cada uma das etapas levou para finalizar seu carregamento.
5. Video: Nesta guia é necessário ativar o video e realizar o teste novamente pra ver em video o
carregamento da página.
6. History: Nesta guia temos os gráficos que acompanham o histórico de desempenho da página
em relação aos dados apresentados anteriormente
WordCamp Floripa - 2019

23. Waterfall
WordCamp Floripa - 2019

24. Sobre o resultado obtido:
1. PageSpeed: Nesta guia você encontra um relatório completo com todos os pontos avaliados
pela ferramenta, ordenados por prioridade. E a nota que foi dada em cada critérios avaliado.
2. Yslow: Guia semelhante ao relatório anterior organizado por prioridade, porém é baseado nos
critérios definidos pela Yslow.
3. Waterfall: Nesta guia o relatório é em cascata que apresenta visualmente toda a sequência de
requisições efetuadas para o carregamento da página.
4. Timings: Nesta guia é a apresentação de uma linha do tempo do carregamento da página, com o
tempo que cada uma das etapas levou para finalizar seu carregamento.
5. Video: Nesta guia é necessário ativar o video e realizar o teste novamente pra ver em video o
carregamento da página.
6. History: Nesta guia temos os gráficos que acompanham o histórico de desempenho da página
em relação aos dados apresentados anteriormente
WordCamp Floripa - 2019

25. Dicas para otimizar seu projeto
1. Otimizar imagens (https://tinypng.com/ ou Plugin ewww)
2. Reduzir o número de plug-ins no site: P3 - Plugin Performance Profiler (
https://br.wordpress.org/plugins/p3-profiler/)
3. Minifique CSS, Javascript e HTML (alguns plugin de cache já fazem isso)
4. Instale algum plugin de cache (W3 Total Cache, WP Fastest Cache ...)
5. Reduza o número de redirecionamento (301)
6. Ative a compactação gzip
7. Use uma CDN's
8. Em caso de dúvida consulte um profissional.
WordCamp Floripa - 2019

26. Estudo de caso
WordCamp Floripa - 2019

27. Estudo de caso
Por que desenvolver algo do zero?
Já não existe um plugin que faça isso?
Tem certeza que é o melhor caminho?
Vai ficar disponível para a comunidade?
WordCamp Floripa - 2019

28. Estudo Caso - Criar conta no GTmetrix

29. Estudo Caso - Criar conta no GTmetrix

30. Estudo Caso - Buscar chave de acesso

31. Estudo Caso - Contas

32. Estudo Caso - Instalar e ativar o plugin Performance with GTmetrix in WordPress

33. Estudo Caso - Conectar o plugin com a API do GTmetrix

34. Estudo Caso - Realizar teste

35. Estudo Caso - Histórico de teste realizados

36. Estudo Caso - Histórico de dados do servidor

37. Estudo Caso - Gráficos na dashboad

38. Alguns teste obtidos no GTmetrix
WordCamp Floripa - 2019

39. https://gtmetrix.com/top1000.html

40. Link do projeto - GTmetrix
Link do plugin no GitHub
https://github.com/vagnersoletti/performance-with-gtmetrix-in-wordpress
WordCamp Floripa - 2019

41. Perguntas?
Dúvidas podem ser enviadas para:
vagnersoletti@gmail.com
Obrigado!
WordCamp Floripa - 2019