Sim, sua mamãe gosta de tudo arrumado. Você também deveria gostar de organizar seu código do front-end da melhor maneira possível. Serão apresentadas diversas práticas "maneiras" para tornar seu sistema/site mais leve e bacana, reduzindo o tempo de carregamento, melhorando a navegação do usuário e possibilitando melhores resultados.

1. Globalcode – Open4education
Organizando a casa. O front-end do
jeitinho que a mamãe gosta

2. Globalcode – Open4education
Quem é esse aí que tá falando?
11 anos de estrada.
Coordenador (Um dos) do PHPSC.
Analista de Sistemas (Severino Feelings) atuando
no ramo de Cooperativismo de Crédito.
Formado em Gestão de TI pelo SENAC.
Cursando Sistemas de Informação pela UNISUL.
Chato pra cara%&@!.

3. Globalcode – Open4education
E vocês? O que fazem?
Vamos trocar uma ideia?

4. Globalcode – Open4education
Você também tem problemas de
desempenho?

5. Globalcode – Open4education
Muita calma nessa hora!
Não otimize seu código agora!
Você pode até assumir uma postura
construtiva desde o início, mas guarde
suas forças para a parte final da tarefa
(ou do projeto).

6. Globalcode – Open4education
Porque tenho que otimizar?
Uma otimização decente deixa um site/sistema entre
50% e 90% mais rápido (o front-end).

7. Globalcode – Open4education
Sério? No front-end?
A maioria (entre 80% e 90%) do tempo de
carregamento e problemas de desempenho dos
sites, esta no front-end.

8. Globalcode – Open4education
O que pode afetar o
carregamento?
Imagens (Muitas imagens, imagens pesadas)
Arquivos CSS
Arquivos JavaScript
Lendo o HTML da página
Flash (Sim, alguns sites ainda usam)

9. Globalcode – Open4education
E no servidor?
O que roda no servidor também conta, mas
raramente é a causa do problema.

10. Globalcode – Open4education
O exemplo do Google
Em 2009 o Google fez um experimento onde
expôs a um grupo de usuários uma busca 300ms
mais lenta.
Resultado: Redução de 0.6 no índice de buscas
diários por usuário, dentro do grupo de controle.

11. Globalcode – Open4education
O exemplo do portal Terra
60 segundos no portal terra significam:
- autenticações: 535 mil
- e-mails: 32 mil enviados / 17 mil recebidos
- capa: 150 mil
- hits: 3,6 milhões
- banners: 540 mil exibições
- tráfego de rede: 2,7Tbits (72 DVDs)

12. Globalcode – Open4education
Reduzir 1K na requisição significa:
A cada 60s: 3,6GB
A cada 1 hora: 180GB
A cada um dia 4,2TB
Informações cedidas por Jaydson Gomes - http://www.slideshare.net/jaydson

13. Globalcode – Open4education
Vamos ao o que interessa!
Todas as práticas a seguir são recomendadas, mas
não adote todas de uma vez, agora.
Implemente uma de cada vez, sempre
acompanhando os resultados e comparando-os
com a situação anterior à alteração.

14. Globalcode – Open4education
Antes de começar a
otimizar...
Conheça o Google Analytics Real Time
jsPerf — JavaScript performance playground
http://jsperf.com/
JSLint - The JavaScript Code Quality Tool
http://www.jslint.com/
Instale o Firebug

15. Globalcode – Open4education
Antes de começar a
otimizar...
Avalie o seu site no PageSpeed Insights
Instale o plugin Yslow no
Firefox
Teste a performance do seu site no WebPage Test

16. Globalcode – Open4education
Mínimo possível de requisições.
CSS Image Sprites
Causa um aumento no código CSS e JS, mas
compensa pela redução do tempo de carregamento
da página.

17. Globalcode – Open4education
Otimize a qualidade das imagens carregadas.
No HTML, sempre adicione as dimensões das
imagens que serão exibidas, ajude o navegador a
processar menos.

18. Globalcode – Open4education
Mínimo possível de requisições.
Unifique arquivos JavaScript, CSS e HTML.
Sempre pondere a possibilidade de unificar todos os
arquivos JavaScript e CSS do sistema em apenas
um.
Menos arquivos JavaScript e CSS significa menos
requisições HTTP. O ganho pode chegar a 80%

19. Globalcode – Open4education
Mínimo possível de requisições.
13 arquivos JavaScript Diferentes
729k de tamanho
Tempo de carregamento: 4,46s

20. Globalcode – Open4education
Mínimo possível de requisições.
2 arquivos JavaScript Diferentes
729k de tamanho (Os mesmos)
Tempo de carregamento: 1,87s

21. Globalcode – Open4education
Agilizando o carregamento
CSS e JavaScript sempre em arquivos externos.
Eles podem ser usados em outras partes do sistema
também. Pra que replicar código?
Considere colocar em um arquivo separado e
carregado posteriormente os trechos de códigos
de funções pouco usadas.

22. Globalcode – Open4education
Agilizando o carregamento
CSS no topo do código.
Se necessário, coloque um arquivo com as
instruções para montagem do layout básico da
página. Aquele que dá a cara principal ao site. Assim
você evita o FOUC.

23. Globalcode – Open4education
Agilizando o carregamento
Arquivos JavaScript no fim
Complementa a prática de manter os arquivos CSS
no topo da página.
A não ser que o JavaScript altere o layout da página.
Nesse caso separe o trecho que altera o layout e
coloque-o no início. Após o CSS.

24. Globalcode – Open4education
Agilizando o carregamento
Minifique arquivos JavaScript e CSS.
A redução de tamanho do arquivo é em média de
60%.
Existem inúmeras ferramentas de minificação de código JavaScript
disponíveis. Recomendo: http://fmarcia.info/jsmin/test.html

25. Globalcode – Open4education
Agilizando o carregamento
Compacte os arquivos JavaScript e CSS.
Habilite o mod_deflate ou o mod_gzip no apache. Ou
peça para que o responsável pelos servidores o
faça.
A redução de tamanho do arquivo é em média de
80%.
O Add-on do Firefox Webmaster Toolbar mostra bem os resultados através de comparativo.

26. Globalcode – Open4education
Agilizando o carregamento
Customize as E-tags
Utilize subdomínios para download de arquivos
JavaScript, para maximizar o número de downloads
paralelos.
Avalie a possibilidade de utilizar uma CDN (Content
Delivery Network)

27. Globalcode – Open4education
Agilizando o carregamento
Utilize um gerenciador de módulos.
Evite Bad Requests.
Quando possível, faça cache de requisições ajax.

28. Globalcode – Open4education
E no código JavaScript?
Os livros indicados contém dezenas de práticas para
agilizar a execução do seu código JavaScript.
É pano pra manga...

29. Globalcode – Open4education
Palavras de quem sabe
Modern web applications have a lot of JavaScript.
Between libraries like jQuery and YUI, and custom
JavaScript that application developers write, it's
now more important than ever to understand what's
executing on your site. JavaScript performance
directly affects the user experience, and as such,
should always be part of a larger performance
strategy.
Nicholas Zakas.

30. Globalcode – Open4education
Se o JavaScript demora para executar, seu
site/sistema demora pra responder. Isso quer dizer
que você tem um problema para resolver!

31. Globalcode – Open4education
Quando o longo é longo demais?
"0.1 segundo (100ms) é o tempo limite para que o
usuário sinta que o sistema esta respondendo
instantâneamente, significa que nada em especial
precisa ser feito além
daexibição do resultado."
Jakob Nielsen

32. Globalcode – Open4education
Compartilhe Conhecimento!
Ferramentas Wiki
Blogs da equipe de desenvolvimento
JavaScript Coding Standards
Projetos Modelo
Compre Livros para sua equipe. Peça para sua empresa
comprar. Mostre o quanto é importante compartilhar conhecimento.
Revisões de código em pares
Peça para um colega de profissão avaliar seu código, apontar erros e
sugerir melhorias. (Alguém em quem você confie muito).

33. Globalcode – Open4education
Tome atitudes e assuma novas posturas

34. Globalcode – Open4education
Obtenha apoio da direção
Seus colegas e superiores imediatos também devem pensar da mesma
forma. (Steve Souders)

35. Globalcode – Open4education
Utilize o vocabulário adequado
A cada setor interessa ouvir os termos relativos à própria área. Evite
jargões técnicos. (Steve Souders)
Quem não é da área não fará outra coisa a não ser ficar confuso e fazer
cara feira.

36. Globalcode – Open4education
Escolha o produto certo
Não escolha o produto mais importante da empresa para começar. Melhor
um produto de importância intermediária. (Steve Souders)
Não aposte todas as fichas na galinha dos ovos de ouro da empresa. E
se alguma otimização não sair como esperado?

37. Globalcode – Open4education
Utilize métricas confiáveis
Não comece a otimizar agora, tenha calma. Estabeleça as métricas
adequadas e separe um tempo para captação de estatísticas. (Steve
Souders)

38. Globalcode – Open4education
Seja apaixonado por performance
Gostar só um pouquinho não fará com que seus colegas (pares e
superiores) se convençam em priorizar a performance (Steve Souders).
Seja apaixonado, mas não seja xiita. Nem sempre a solução mais
performática será a mais adequada para a situação.

39. Globalcode – Open4education
Busque Conhecimento (ET Bilú)
Compareça a eventos.
Faça parte de um grupo de usuários.
Mantenha uma rotina regular de estudos.
Aprenda com os mais experientes.

40. Globalcode – Open4education
Leia!
JavaScript de Alto Desempenho
Nicholas Zakas
O'Reilly Media
http://oreilly.com/catalog/9780596802806/
Padrões JavaScript
Stoyan Stefanov
O'Reilly Media
Even Faster Web Sites: Performance Best Practices for Web Developers
Steve Souders
O'Reilly Media

41. Globalcode – Open4education
Leia!
High Performance Web Sites
Steve Souders
O'Reilly Media
Criando sites com HTML, Construindo Sites com CSS e XHTML,
CSS3 e HTML5
Maurício Samy Silva
Novatec

42. Globalcode – Open4education
Siga!
@cmilfont (Christiano Milfont)
@leobalter (Leo Balter)
@felipenmoura (Felipe Moura)
@slicknet (Nicholas Zakas)
@stoyanstefanov (Stoyan Stefanov)
@thomasfuchs (Thomas Fuchs)
@del_javascript

43. Globalcode – Open4education
Leia mais sobre otimização
https://gist.github.com/djhonyy/5653197

44. Globalcode – Open4education
Perguntas?
Não se acanhe, a sua dúvida também pode ser a
mesma do amiguinho do seu lado.

45. Globalcode – Open4education
Obrigado!
Obrigado pela presença de todos, eu sei que vocês
poderiam estar roubando ou matando, até mesmo
fapeando no redtube, mas estão aqui na humildade.

46. Globalcode – Open4education
Vamos trocar umas ideias?
var myProfile = {
nome: ''Johnathan Cardoso'',
email: ''johnathancardoso@gmail.com'',
blog: ''blog.johnathan.com.br'',
twitter: ''@djhonyy'',
fone: '' (48) 8829-6420''
};