O Mínimo essencial para o bom desempenho do
seu projeto em WordPressSergio Costa
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
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
- Alguns plugins
- Problemas com plugins
- AAAAHHH!!!
Por que não usam o CODEX?
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 sem tempo
- Tudo se faz pelo celular
- Computador? Só para trabalho
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 $(document).ready
- 10 mil linhas comentadas
OK! Vamos lá.
Por onde começar?
As camadas do projeto
Estrutura Estilo Comportamento
NÃÃÃÃÃÃÃÃÃOOOO!!!!!
Imagem: Robert Cecil A.K.A. Uncle Bob
Medindo a qualidade do código
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 projeto
Mas preciso usar MUUITAS imagens!
E não posso substituí-las pelos ícones…
E agora?
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ódulos escolhidos
- 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!
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 arquivos dos pré-processadores
- Remover os seletores não utilizados
- Concatenar e minificar os módulos CSS e JS utilizados
- Otimizar imagens
Já fiz isso tudo, aí!!!
Ainda tem o que fazer?
Pra que carregar conteúdo
repetido em outra página?
Como assim?- Você precisa mesmo recarregar o header e o footer?
<= Isso fica
<= Isso fica
<= Isso muda
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?
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 precisa fazer consultas a cada f5!!!
PRECISO DISSO NA MINHA VIDA!!!
COMO FAÇO???
Precisamos usá-la na wp_query! Vamos lá!
Mas eu estou usando um arquivo de hierarquiaComo 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 errados
- Brechas de segurança
- Códigos não minificados
- Às vezes, códigos sujos
- Sobrescrição de código
- Dentre outros...
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://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/