Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,443 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.

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

×