Upload
fellyph-cintra
View
421
Download
2
Tags:
Embed Size (px)
Citation preview
FELLYPH CINTRA
Front-End Engineer Elo7
Instrutor WordPress DRC
Trabalha com WordPress
since 2008
@fellyph
AGENDA
• Trabalhando com WordPress
• Carregando o JavaScript de maneira correta
• Required JS
• Otimização no JavaScript
• Organização de código
• Performance
• Extra
COM QUE ROUPA EU VOU
Escolher o arquivo certo para cada situação agiliza o desenvolvimento e manutenção do seu tema
ESCOLHA O SEU CAMINHO
post_class()
body_class()
is_category()
is_single(40)
is_home()
is_page(“about”)
• Em 2013 o WordPress passou a utilizar o Require JS como gerenciador de dependências do JavaScript
• Ele é baseado no padrão AMD
AMD
• Asynchronous Module Definition (AMD) é uma especificação para carregamento de Scripts em módulos.
• Em uma estrutura que suas dependências possam ser carregadas de forma assíncrona.
ESPECIFICAÇÕES DO AMD
• Iniciar o método define com os seguintes parâmetros :
• identificador
• dependências
• factory
REFLOW
Reflow é o processo pelo qual a engine responsável por exibir o layout calcula os pontos de todos os elementos na DOM.
OTIMIZAÇÃO NO FRONT
• Evite níveis desnecessário em seu DOM(HTML)
• Minimize as regras do seu CSS, remova regras não utilizadas
• Caso necessite de animações complexas utilize, position: absolute ou fixed para seus elementos.
OTIMIZAÇÃO NO FRONT
• Minimizar o total de requests
• Paralelizar requests
• Compactação e otimização de conteúdo(JS, CSS e imagens)
TESTE… TESTE… TESTE…
http://bit.ly/18oQqhi http://bit.ly/1coabV3
PageSpeed GTmetrix
QUER SABER MAIS
http://browserdiet.com/pt/developers.google.com/speed/
ODIN + GRUNT + SASS
Utilizando Odin + Grunt :
https://github.com/wpbrasil/odin/wiki/Usando-o-GruntJS
Utilizando Odin + SASS/Compass
https://github.com/wpbrasil/odin/wiki/Usando-SASS-e-Compass
REFERÊNCIAS
http://www.slideshare.net/erikatakahara7/otimizao-front-end-38703726
http://developers.google.com/speed/
http://browserdiet.com/pt/