Desenvolvimento de websites de alta performance

396 views

Published on

Slide da minha apresentação sobre "Desenvolvimento de websites de alta performance" feita durante a 25ª Semana de Computação e Informática da Faculdade de Informática de Presidente Prudente / Universidade do Oeste Paulista.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
396
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvimento de websites de alta performance

  1. 1. DESENVOLVIMENTO DE WEBSITESDE ALTA PERFORMANCE
  2. 2. RAPHAEL AGNELITECNÓLOGO EM SISTEMAS PARA INTERNET
  3. 3. 10 – 20%BACK-END80 – 90%FRONT-END
  4. 4. DIMINUA A QUANTIDADEDE REQUISIÇÕESHTTP
  5. 5. CSSSPRITE
  6. 6. #guarda-chuva {Width: 16px;Height: 16px;Background-image: url(“../images/imagem.png”);Background-position: -48px -16px;Background-repeat: no-repeat;}
  7. 7. SCRIPTS E CSSCOMBINADOS
  8. 8. DIMINUA O PESO DE SUASIMAGENS
  9. 9. ADOBE PHOTOSHOPCTRL+SHIFT+ALT+S
  10. 10. GTMETRIX.COM
  11. 11. USE UMA REDEDE DISTRIBUIÇÃO DECONTEÚDO
  12. 12. WHY?
  13. 13. ADICIONE UMCABEÇALHOEXPIRES
  14. 14. <filesMatch ".( ico | jpg | jpeg | png | gif | swf | css | js )$">Header set Expires "Sun, 30 Apr 2090 20:00:00 GMT"</filesMatch>
  15. 15. VANTAGENS EDESVANTAGENS
  16. 16. COMPACTE SUASRESPOSTAS HTTP COMG-ZIP
  17. 17. COMOFUNCIONA ?
  18. 18. REQUISIÇÃO HTTP NORMAL
  19. 19. REQUISIÇÃO HTTP COM GZIP
  20. 20. O QUECOMPACTAR ?
  21. 21. IIS APACHECONFIGURANDO
  22. 22. RESULTADO DA COMPACTAÇÃOExemplo Componentes(HTML, CSS, JS)Ganho emtamanhoTempo derespostaGanho detempoSem compactação 177.6K - 1562ms -Compactado com GZIP 46.4K 130.2K (73.8%) 731ms 831ms (53.2%)
  23. 23. COLOQUEAS CSSNO COMEÇO
  24. 24. VISUALIZAÇÃOPROGRESSIVA
  25. 25. TELA BRANCAVAZIA
  26. 26. COLOQUEOS SCRIPTSNO FINAL
  27. 27. PROBLEMAS COMSCRIPTS
  28. 28. HTMLSCRIPTCSSIMGIMGIMGSCRIPT NO INÍCIO↑PÁGINA CARREGADA
  29. 29. HTMLCSSIMGIMGIMGSCRIPTSCRIPT NO FINAL↑PÁGINA CARREGADA
  30. 30. MANTENHA SCRIPTS E CSSEM ARQUIVOS EXTERNOS-PARADOXO-
  31. 31. MINIMIZE OSSCRIPTS
  32. 32. MINIMIZAÇÃO VSOFUSCAMENTO
  33. 33. Tamanho do Script Normal Minimizado OfuscadoPequeno (50K) 581ms 481ms (17%) 471ms (19%)Grande (377K) 1092ms 761ms (30%) 751ms (31%)TEMPO DE CARREGAMENTO
  34. 34. REMOVA SCRIPTSDUPLICADOS
  35. 35. POR QUE?
  36. 36. DÚVIDAS?
  37. 37. OBRIGADO!raphael_agneli@hotmail.com

×