O documento fornece dicas para melhorar o desempenho de projetos em WordPress, abordando tópicos como estruturação de arquivos, otimização de imagens, uso de frameworks, automação de tarefas, navegação Ajax, organização no WordPress e problemas comuns relacionados a plugins. O autor recomenda a utilização de sprites CSS, módulos de frameworks, pré-processadores de CSS, Transients API e avaliação criteriosa antes da instalação de plugins.

1. O Mínimo essencial para o bom desempenho do
seu projeto em WordPress
Sergio Costa

2. Oxe! Quem é esse
aí?
- Formando Sistemas para Internet
- Web Dev na República Interativa
- Amante do WordPress (óbvio)
- Também amante do GruntJS e do
SASS
- Viciado em video-game
- Músico

3. Vamos falar de
que?
- Camadas do
projeto
- Imagens
- Frameworks
- Grunt Tasks
- Navegação Ajax

4. Mas e o WordPress???
- Hierarquia e Particionamento
- Adeus ao desnecessário
- Enfileirando Scripts e Estilos
- Transients API
- Alguns plugins
- Problemas com plugins
- Por que não usam o
CODEX?

5. Por que falar disso?
- Usuário feliz
- Você fez um bom trabalho

6. Só por isso?
SIIIIIM!!!
MAAAS…

7. Isso envolve alguns aspectos
importantes
- Velocidade da internet
- Usuários sem paciência
- Usuários sem tempo
- Tudo se faz pelo celular
- Computador? Só para trabalho

8. Quem nunca se deparou com isso?

9. OU
- Scripts inúteis
- Scripts desnecessários
- Estilos inúteis
- Excesso de tudo
- Código todo “embolado”
- 50 mil $(document).ready
- 10 mil linhas comentadas

10. OK! Vamos lá.
Por onde
começar?

11. As camadas do
projeto
Estrutura Estilo Comportamento

12. NÃÃÃÃÃÃÃÃÃOOOO!!!!!

13. Imagem: Robert Cecil A.K.A. Uncle Bob
Medindo a qualidade do código

14. Por que isso é tão ruim
assim?
Páginas mais
pesadas
Perda de velocidade no
carregamento

15. E quanto à inserção
imagens?
-
Funciona?
- Funciona!
- Ideal?
-
Nããão!

16. O Font Awesome (por exemplo), resolve!
Poupa a requisição de arquivos do servidor
Pode substituir MUITAS imagens do projeto

17. Mas preciso usar MUUITAS imagens!
E não posso substituí-las pelos
ícones…
E agora?

18. SPRITES CSS
!!!

19. IH! Eu uso framework… e agora?

20. Cada situação tem a sua
solução!
- Bons frameworks são
modularizados!
- Bons frameworks te permitem
trabalhar com módulos escolhidos

21. - Frameworks geralmente são construídos, utilizando pré-
processadores
- SIM, você pode usar o código dos pré-processadores!
E AÊ? COMO FAÇO???
Começando pelo CSS!

22. Vamos usar, então!
Mas precisamos de uma forma para compilar o código
do pré-processador…

23. Hora de automatizar esse negócio

24. Com a automação de tarefas, vamos:
- Assistir os arquivos
- Definir quais módulos serão utilizados
- Compilar os arquivos dos pré-processadores
- Remover os seletores não utilizados
- Concatenar e minificar os módulos CSS e JS utilizados
- Otimizar imagens

25. Já fiz isso tudo, aí!!!
Ainda tem o que fazer?

26. MAS É CLARO!!!

27. Pra que carregar conteúdo
repetido em outra página?

28. Como assim?
Você precisa mesmo recarregar o header e o footer?
<= Isso fica
<= Isso fica
<= Isso muda

29. Agora que já falamos um pouquinho
sobre a navegação por ajax...

30. Hora de falar sobre ele:

31. Mas já fiz muita coisa no front-end…
Existem mais coisas pra fazer no próprio
WordPress, para melhorar o meu projeto?

32. HÁ...

34. Como organizar isso tudo no diretório do tema?

35. “actions” desnecessárias? TCHAU!
wp_head(); >>> /wp-includes/default-filters.php

36. Como eu removo isso?

37. Vamos enfileirar estilos e scripts corretamente?

38. Como fazer, então?

39. Transients API
Que bixo é esse?

40. Uma feature linda, do WordPress!
Ela basicamente “cacheia” o resultado da sua query
O que isso traz de bom?
- Não precisa fazer consultas pesadas a cada f5!!!

41. PRECISO DISSO NA MINHA VIDA!!!
COMO FAÇO???

42. Precisamos usá-la na wp_query! Vamos lá!

43. Mas eu estou usando um arquivo de
hierarquia
Como faço para usar a Transients API na query
padrão?

44. Mais uma mágica do WordPress:
Você não precisa!

45. Simples! Sabe a hierarquia?
Te ajuda aqui!

46. E quanto aos plugins de WordPress?

47. Nem sempre são coisas ruins
Basta você saber escolher e usar

48. Quais os problemas mais comuns,
gerados pelos plugins para WordPress?
- Códigos desnecessários
- Códigos nos lugares errados
- Brechas de segurança
- Códigos não minificados
- Às vezes, códigos sujos
- Sobrescrição de código
- Dentre outros...

49. Como vou resolver esse tipo de problema?
Vamos usar um exemplo rápido, do Contact Form 7

50. Porém, há uma excelente alternativa, para
substituir muitos destes bons plugins

51. Plugins também resolvem problemas!

52. Alguns plugins bem interessantes, pra ajudar:

53. E como eu vou saber se devo usar um plugin
ou não, para fazer o que eu quero?

54. Maravilha!
Agora, eu estou pronto pra fazer meu site voar!

55. Mas ainda tem coisa que você precisa saber!

56. AVEMARIA, O QUE É ISSO?

57. Agora, sim! Podemos tocar o projeto em paz!

58. Links interessantes
- http://codex.wordpress.org/
- http://www.escolawp.com/
- http://www.wpbeginner.com/
- http://html5boilerplate.com/
- http://browserdiet.com/pt/
- http://sass-lang.com
- http://gruntjs.com/
- https://www.w3-edge.com/products/w3-total-cache/
- https://wordpress.org/plugins/wp-optimize/
- https://wordpress.org/plugins/ewww-image-optimizer/

59. OBRIGADO! =D