O Mínimo essencial para o bom desempenho do 
seu projeto em WordPress 
Sergio Costa
Vish! Quem é esse aí? 
- Formando em Sistemas para Internet 
- Desenvolvedor web na Equilibra Digital 
- Amante do WordPre...
Vamos falar de que? 
- Camadas do projeto 
- Imagens 
- Frameworks 
- Grunt Tasks 
- Navegação Ajax
Mas e o WordPress??? 
- Particionamento 
- Adeus ao desnecessário 
- Enfileirando Scripts e Estilos 
- Transients API 
- A...
Por que falar disso? 
- Usuário feliz 
- Você fez um bom trabalho
Só por isso? 
SIIIIIM!!! 
MAAAS…
Isso envolve outros aspectos importantes 
- Velocidade da internet 
- Internet móvel 
- Usuários sem paciência 
- Usuários...
Quem nunca se deparou com isso?
OU 
- Scripts inúteis 
- Scripts desnecessários 
- Estilos inúteis 
- Excesso de tudo 
- Código todo “embolado” 
- 50 mil ...
OK! Vamos lá. 
Por onde começar?
As camadas do projeto 
Estrutura Estilo Comportamento
NÃÃÃÃÃÃÃÃÃOOOO!!!!!
Medindo a qualidade do código 
Imagem: Robert Cecil A.K.A. Uncle Bob
Por que isso é tão ruim assim? 
HTML mais pesado Perda de velocidade no carregamento
E quanto à inserção imagens? 
- Funciona? 
- Funciona! 
- Ideal? 
- Nããão!
O Font Awesome (por exemplo), resolve! 
Poupa a requisição de arquivos do servidor 
Pode substituir MUITAS imagens do proj...
Mas preciso usar MUUITAS imagens! 
E não posso substituí-las pelos ícones… 
E agora?
SPRITES CSS 
!!!
IH! Eu uso framework… e 
agora?
Cada situação tem a sua solução! 
- Bons frameworks são 
modularizados! 
- Bons frameworks te permitem 
trabalhar com módu...
Começando pelo CSS! 
- Frameworks geralmente são construídos, utilizando pré-processadores 
- SIM, você pode usar o código...
Vamos usar, então! 
Mas precisamos de uma forma para compilar o código do pré-processador…
Hora de automatizar esse negócio...
Com a automação de tarefas, vamos: 
- Assistir os arquivos 
- Definir quais módulos serão utilizados 
- Compilar os arquiv...
Já fiz isso tudo, aí!!! 
Ainda tem o que fazer?
MAS É CLARO!!!
Pra que carregar conteúdo 
repetido em outra página?
Como assim? 
- Você precisa mesmo recarregar o header e o footer? 
<= Isso fica 
<= Isso muda 
<= Isso fica
Agora que já falamos um pouquinho 
sobre a navegação por ajax...
Hora de falar sobre ele:
Mas já fiz muita coisa no front-end… 
Existem mais coisas pra fazer no próprio 
WordPress, para melhorar o meu projeto?
HÁ...
Como organizar isso tudo no diretório do tema?
“actions” desnecessárias? TCHAU! 
wp_head(); >>> /wp-includes/default-filters.php
Como eu removo isso?
Vamos enfileirar estilos e scripts corretamente?
Como fazer, então?
Transients API 
Que bixo é esse?
Uma feature linda, do WordPress! 
Ela basicamente “cacheia” o resultado da sua query 
O que isso traz de bom? 
- Não preci...
PRECISO DISSO NA MINHA VIDA!!! 
COMO FAÇO???
Precisamos usá-la na wp_query! Vamos lá!
Mas eu estou usando um arquivo de hierarquia 
Como faço para usar a Transients API na query padrão?
Mais uma mágica do WordPress: 
Você não precisa!
Simples! Sabe a hierarquia? 
Te ajuda aqui!
E quanto aos plugins de WordPress?
Não são coisas ruins 
Basta você saber escolher e usar
Quais os problemas mais comuns, 
gerados pelos plugins para WordPress? 
- Códigos desnecessários 
- Códigos nos lugares er...
Como vou resolver esse tipo de problema? 
Vamos usar um exemplo rápido, do Contact Form 7
Plugins também resolvem problemas!
Alguns plugins bem interessantes, pra ajudar:
E como eu vou saber se devo usar um plugin 
ou não, para fazer o que eu quero?
Maravilha! 
Agora, eu estou pronto pra fazer meu site voar!
Mas ainda tem coisa que você precisa saber!
AVEMARIA, O QUE É ISSO?
O tão desprezado...
E o que eu vou fazer com ele? 
- Gerenciar o cache (Expires Headers)
E vamos fazer assim:
Agora, sim! Podemos começar o projeto em paz!
Links interessantes 
- http://codex.wordpress.org/ 
- http://html5boilerplate.com/ 
- http://browserdiet.com/pt/ 
- http:/...
OBRIGADO! =D
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em WordPress - Sergio Costa
Próximos SlideShares
Carregando em…5
×

WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em WordPress - Sergio Costa

945 visualizações

Publicada em

Palestra de Sergio Costa no WordCamp Salvador 2014, sobre "O essencial para o bom desempenho do seu projeto em WordPress"

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
945
No SlideShare
0
A partir de incorporações
0
Número de incorporações
108
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em WordPress - Sergio Costa

  1. 1. O Mínimo essencial para o bom desempenho do seu projeto em WordPress Sergio Costa
  2. 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. 3. Vamos falar de que? - Camadas do projeto - Imagens - Frameworks - Grunt Tasks - Navegação Ajax
  4. 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. 5. Por que falar disso? - Usuário feliz - Você fez um bom trabalho
  6. 6. Só por isso? SIIIIIM!!! MAAAS…
  7. 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. 8. Quem nunca se deparou com isso?
  9. 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. 10. OK! Vamos lá. Por onde começar?
  11. 11. As camadas do projeto Estrutura Estilo Comportamento
  12. 12. NÃÃÃÃÃÃÃÃÃOOOO!!!!!
  13. 13. Medindo a qualidade do código Imagem: Robert Cecil A.K.A. Uncle Bob
  14. 14. Por que isso é tão ruim assim? HTML mais pesado Perda de velocidade no carregamento
  15. 15. E quanto à inserção imagens? - Funciona? - Funciona! - Ideal? - Nããão!
  16. 16. O Font Awesome (por exemplo), resolve! Poupa a requisição de arquivos do servidor Pode substituir MUITAS imagens do projeto
  17. 17. Mas preciso usar MUUITAS imagens! E não posso substituí-las pelos ícones… E agora?
  18. 18. SPRITES CSS !!!
  19. 19. IH! Eu uso framework… e agora?
  20. 20. Cada situação tem a sua solução! - Bons frameworks são modularizados! - Bons frameworks te permitem trabalhar com módulos escolhidos
  21. 21. Começando pelo CSS! - Frameworks geralmente são construídos, utilizando pré-processadores - SIM, você pode usar o código dos pré-processadores! E AÊ? COMO FAÇO???
  22. 22. Vamos usar, então! Mas precisamos de uma forma para compilar o código do pré-processador…
  23. 23. Hora de automatizar esse negócio...
  24. 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. 25. Já fiz isso tudo, aí!!! Ainda tem o que fazer?
  26. 26. MAS É CLARO!!!
  27. 27. Pra que carregar conteúdo repetido em outra página?
  28. 28. Como assim? - Você precisa mesmo recarregar o header e o footer? <= Isso fica <= Isso muda <= Isso fica
  29. 29. Agora que já falamos um pouquinho sobre a navegação por ajax...
  30. 30. Hora de falar sobre ele:
  31. 31. Mas já fiz muita coisa no front-end… Existem mais coisas pra fazer no próprio WordPress, para melhorar o meu projeto?
  32. 32. HÁ...
  33. 33. Como organizar isso tudo no diretório do tema?
  34. 34. “actions” desnecessárias? TCHAU! wp_head(); >>> /wp-includes/default-filters.php
  35. 35. Como eu removo isso?
  36. 36. Vamos enfileirar estilos e scripts corretamente?
  37. 37. Como fazer, então?
  38. 38. Transients API Que bixo é esse?
  39. 39. 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!!!
  40. 40. PRECISO DISSO NA MINHA VIDA!!! COMO FAÇO???
  41. 41. Precisamos usá-la na wp_query! Vamos lá!
  42. 42. Mas eu estou usando um arquivo de hierarquia Como faço para usar a Transients API na query padrão?
  43. 43. Mais uma mágica do WordPress: Você não precisa!
  44. 44. Simples! Sabe a hierarquia? Te ajuda aqui!
  45. 45. E quanto aos plugins de WordPress?
  46. 46. Não são coisas ruins Basta você saber escolher e usar
  47. 47. 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...
  48. 48. Como vou resolver esse tipo de problema? Vamos usar um exemplo rápido, do Contact Form 7
  49. 49. Plugins também resolvem problemas!
  50. 50. Alguns plugins bem interessantes, pra ajudar:
  51. 51. E como eu vou saber se devo usar um plugin ou não, para fazer o que eu quero?
  52. 52. Maravilha! Agora, eu estou pronto pra fazer meu site voar!
  53. 53. Mas ainda tem coisa que você precisa saber!
  54. 54. AVEMARIA, O QUE É ISSO?
  55. 55. O tão desprezado...
  56. 56. E o que eu vou fazer com ele? - Gerenciar o cache (Expires Headers)
  57. 57. E vamos fazer assim:
  58. 58. Agora, sim! Podemos começar o projeto em paz!
  59. 59. 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/
  60. 60. OBRIGADO! =D

×