WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em WordPress

4,411 views

Published on

Palestra que apresentei no WordCamp Belo Horizonte 2015, sobre o mínimo essencial para o bom desempenho do seu projeto em WordPress.

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,411
On SlideShare
0
From Embeds
0
Number of Embeds
2,996
Actions
Shares
0
Downloads
25
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em WordPress

  1. 1. O Mínimo essencial para o bom desempenho do seu projeto em WordPress Sergio Costa
  2. 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. 3. Vamos falar de que? - Camadas do projeto - Imagens - Frameworks - Grunt Tasks - Navegação Ajax
  4. 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. 5. Por que falar disso? - Usuário feliz - Você fez um bom trabalho
  6. 6. Só por isso? SIIIIIM!!! MAAAS…
  7. 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. 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. Imagem: Robert Cecil A.K.A. Uncle Bob Medindo a qualidade do código
  14. 14. Por que isso é tão ruim assim? Páginas mais pesadas 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. - 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. 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 fica <= Isso muda
  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 pesadas 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. Nem sempre 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. Porém, há uma excelente alternativa, para substituir muitos destes bons plugins
  50. 50. Plugins também resolvem problemas!
  51. 51. Alguns plugins bem interessantes, pra ajudar:
  52. 52. E como eu vou saber se devo usar um plugin ou não, para fazer o que eu quero?
  53. 53. Maravilha! Agora, eu estou pronto pra fazer meu site voar!
  54. 54. Mas ainda tem coisa que você precisa saber!
  55. 55. AVEMARIA, O QUE É ISSO?
  56. 56. Agora, sim! Podemos tocar o projeto em paz!
  57. 57. 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/
  58. 58. OBRIGADO! =D

×