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.

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

1,101 views

Published on

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

  • Be the first to comment

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

×