WordCamp Salvador 2014 - O mínimo essencial para o bom desempenho do seu projeto em WordPress

Palestra ministrada no WordCamp Salvador 2014 sobre o mínimo, que considero essencial para que um projeto em WordPress apresente um bom desempenho.

Transcript

1. O Mínimo essencial para o bom desempenho do seu projeto em WordPress Sergio Costa
2. Vish! Quem é esse aí? - Formando em Sistemas para Internet - Desenvolvedor web na Equilibra Digital - Amante do WordPress (óbvio) - Também amante do GruntJS e do SASS - Degustador de cervejas (MWA HA HA) - Músico e gordo new school
3. Vamos falar de que? -  Camadas do projeto -  Imagens -  Frameworks -  Grunt Tasks -  Navegação Ajax
4. Mas e o WordPress??? -  Particionamento -  Adeus ao desnecessário -  Enfileirando Scripts e Estilos -  Transients API -  Alguns plugins -  Problemas com plugins -  AAAAHHH!!! 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 outros aspectos importantes -  Velocidade da internet -  Internet móvel -  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? HTML mais pesado 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 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. Não 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. Plugins também resolvem problemas!
51. Alguns plugins bem interessantes, pra ajudar:
52. E como eu vou saber se devo usar um plugin ou não, para fazer o que eu quero?
53. Maravilha! Agora, eu estou pronto pra fazer meu site voar!
54. Mas ainda tem coisa que você precisa saber!
55. AVEMARIA, O QUE É ISSO?
56. O tão desprezado...
57. E o que eu vou fazer com ele? -  Gerenciar o cache (Expires Headers)
58. E vamos fazer assim:
59. Agora, sim! Podemos começar o projeto em paz!
60. Links interessantes -  http://codex.wordpress.org/ -  http://html5boilerplate.com/ -  http://browserdiet.com/pt/ -  http://sass-lang.com -  http://gruntjs.com/ -  http://www.escolawp.com/ -  https://www.w3-edge.com/products/w3-total-cache/ -  https://wordpress.org/plugins/wp-optimize/screenshots/ -  https://wordpress.org/plugins/ewww-image-optimizer/
61. OBRIGADO! =D