Desenvolvimento de websites de alta performance

download Desenvolvimento de websites de alta performance

If you can't read please download the document

description

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.

Transcript of Desenvolvimento de websites de alta performance

  • 1. DESENVOLVIMENTO DE WEBSITESDE ALTA PERFORMANCE

2. RAPHAEL AGNELITECNLOGO EM SISTEMAS PARA INTERNET 3. 10 20%BACK-END80 90%FRONT-END 4. DIMINUA A QUANTIDADEDE REQUISIESHTTP 5. CSSSPRITE 6. #guarda-chuva {Width: 16px;Height: 16px;Background-image: url(../images/imagem.png);Background-position: -48px -16px;Background-repeat: no-repeat;} 7. SCRIPTS E CSSCOMBINADOS 8. DIMINUA O PESO DE SUASIMAGENS 9. ADOBE PHOTOSHOPCTRL+SHIFT+ALT+S 10. GTMETRIX.COM 11. USE UMA REDEDE DISTRIBUIO DECONTEDO 12. WHY? 13. ADICIONE UMCABEALHOEXPIRES 14. Header set Expires "Sun, 30 Apr 2090 20:00:00 GMT" 15. VANTAGENS EDESVANTAGENS 16. COMPACTE SUASRESPOSTAS HTTP COMG-ZIP 17. COMOFUNCIONA ? 18. REQUISIO HTTP NORMAL 19. REQUISIO HTTP COM GZIP 20. O QUECOMPACTAR ? 21. IIS APACHECONFIGURANDO 22. RESULTADO DA COMPACTAOExemplo Componentes(HTML, CSS, JS)Ganho emtamanhoTempo derespostaGanho detempoSem compactao 177.6K - 1562ms -Compactado com GZIP 46.4K 130.2K (73.8%) 731ms 831ms (53.2%) 23. COLOQUEAS CSSNO COMEO 24. VISUALIZAOPROGRESSIVA 25. TELA BRANCAVAZIA 26. COLOQUEOS SCRIPTSNO FINAL 27. PROBLEMAS COMSCRIPTS 28. HTMLSCRIPTCSSIMGIMGIMGSCRIPT NO INCIOPGINA CARREGADA 29. HTMLCSSIMGIMGIMGSCRIPTSCRIPT NO FINALPGINA CARREGADA 30. MANTENHA SCRIPTS E CSSEM ARQUIVOS EXTERNOS-PARADOXO- 31. MINIMIZE OSSCRIPTS 32. MINIMIZAO VSOFUSCAMENTO 33. Tamanho do Script Normal Minimizado OfuscadoPequeno (50K) 581ms 481ms (17%) 471ms (19%)Grande (377K) 1092ms 761ms (30%) 751ms (31%)TEMPO DE CARREGAMENTO 34. REMOVA SCRIPTSDUPLICADOS 35. POR QUE? 36. DVIDAS? 37. [email protected]