O documento discute como otimizar a performance de um site web. Ele explica que otimização de performance web (WPO) é aumentar a velocidade com que as páginas são carregadas no navegador do usuário. Em seguida, destaca a importância da WPO ao citar estatísticas sobre usuários abandonando sites lentos e perda de vendas e tráfego. Por fim, fornece dicas para otimizar o frontend com HTML, CSS e JavaScript e o backend e servidor.

1. Como tornar seu Projeto Web em
um Boeing 747
@paolo_almeida

2. @paolo_almeida

3. O que é WPO?

4. Otimização Web performance, WPO, ou otimização de site é o
campo de conhecimento sobre o aumento da velocidade em
que as páginas da web são baixados e exibidos no navegador
do usuário.
Fonte: en.wikipedia.org/wiki/Web_performance_optimization
O que é WPO?

5. Qual a importância?

6. "Usuários esperam páginas carregarem em dois segundos.
Depois do terceiro, até 40% dos usuários abandonam o site."
"A Amazon notou que cada 100 milissegundos de espera
representam um declínio de 1% nas vendas."
O Google perdeu 20% de lucratividade e tráfego de usuários
por causa de um aumento de meio segundo no tempo de
carregamento de suas páginas de resultados.

7. "80% do tempo de resposta ao usuário é
gasta no Front-end."

8. Como otimizar?

9. Frontend: HTML / CSS / JS
< 1 >
Evite código inline ou incorporado

10. Frontend: HTML / CSS / JS
< 2 >
Coloque o CSS no topo da página

11. Frontend: HTML / CSS / JS
< 3 >
Coloque o Javascript no rodapé da página

12. Frontend: HTML / CSS / JS
< 4 >
Faça menos requisições, combine arquivos em um só!
ERRADO :(

13. Frontend: HTML / CSS / JS
< 4 >
Faça menos requisições, combine arquivos em um só!
CERTO :)

14. Frontend: HTML / CSS / JS
< 5 >
Comprima seu CSS

15. Frontend: HTML / CSS / JS
< 5 >
http://cssminifier.com/

16. Frontend: HTML / CSS / JS
< 6 >
Comprima seu JS

17. Frontend: HTML / CSS / JS
< 6 >
http://yui.github.io/yuicompressor/

18. Frontend: HTML / CSS / JS
< 7 >
Otimize suas imagens
http://imgopt.com/

19. Backend / Server
< 1 >
Habilite cache dos arquivos no browser
.htaccess

20. Backend / Server
< 2 >
Habilite compactação com Gzip/Deflate
.htaccess

21. Backend / Server
< 3 >
Utilize CDN pra disponibilizar arquivos
http://aws.amazon.com/pt/cloudfront/

22. Ferramentas de Análise
São ferramentas que testam a performance do site
https://developers.google.com/speed/pagespeed/

23. Ferramentas de Análise
São ferramentas que testam a performance do site
https://developers.google.com/speed/pagespeed/

24. Obrigado! ;)
http://paoloalmeida.com
https://twitter.com/paolo_almeida
https://github.com/paoloalmeida
https://www.linkedin.com/in/paoloalmeida