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?

SPRITES CSS

!!!

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?

MAS É CLARO!!!

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?

HÁ...

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/

OBRIGADO! =D