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