Construindo Aplicações com Zero Load Time
2 gostaram315 visualizações
O documento apresenta a importância do tempo de carregamento em aplicações web, destacando que 74% dos usuários móveis não esperam mais que 5 segundos. Sugere várias técnicas para alcançar aplicações com zero tempo de carregamento, como habilitar gzip, minificação de arquivos e armazenamento local. Além disso, enfatiza que a percepção de velocidade pode ser mais crucial do que a velocidade real em si.
Construindo Aplicações com Zero Load Time
- 1. Build Zero load time apps
- 2. João Moura CTO at Palpiteros github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura
- 5. O que mudou? Tempo! A coisa mais valiosa do mundo!
- 6. O que mudou? Tempo! A coisa mais valiosa do mundo!
- 7. O que mudou? Tempo! A coisa mais valiosa do mundo!
- 8. Webapps timeline Action! Action! Load Time Load Time
- 9. 74% dos usuários mobile não esperam mais que 5 segundos para uma página carregar. http://www.strangeloopnetworks.com/resources/infographics/mobile-infographics/mobile-load-time-vs-user- expectations/
- 10. 8 6.4 4.8 3.2 1.6 2000 2006 2009 2012 http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last- year/
- 11. Yahoo!: 400 ms 5 to 9% increase in the number of people who clicked “back” before the page even loaded. (source: Nicole Sullivan, Yahoo!)
- 12. Google: 500 ms 20% fewer searches. (source: Marrissa Mayer, Google)
- 13. Amazon: 100 ms 1% increase in sales. (source: Greg Linden, Amazon)
- 14. Amazon: 100 ms 1% increase in sales. (source: Greg Linden, Amazon) US$ 61.093.000.000,00 (2012)
- 15. Sua Aplicação ?
- 16. Old but Gold! Tempo continua sendo dinheiro! é mais que
- 17. Velocidade x Sucesso Velocidade é mais que uma feature
- 18. O que fazer? Como construir uma aplicação com zero loadtime?
- 20. Habilitar GZIP
- 21. Habilitar GZIP Minify de JS e CSS
- 22. Habilitar GZIP Minify de JS e CSS Compressão de HTML
- 23. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagens
- 24. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagensDiminuir cookies e headers
- 25. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagensDiminuir cookies e headersUtilização de sprites
- 26. Overweight! Problema 1 Grande número de assets e grandes assets.
- 27. Rede! Problema 2 Diferentes conexões, velocidades e sinais
- 28. E agora? E se velocidade não for o segredo?
- 29. Perceived Speed! O usuário não se importa com o que acontece em backstage
- 30. Render in client Técnica 1 Se você consegue bater 50 ms de loadtime sem render in client você tem minha atenção
- 31. Old Browsers Não suportam novas libs JS
- 32. Old Browsers Não suportam novas libs JS
- 36. Store data in client Técnica 2 Capacidade de resposta, Acessibilidade e os Tempos de Carregamento reduzido
- 37. Database Cookies
- 38. Database Cookies X X
- 40. Intelligent Preload Técnica 3 Como predizer a navegação do usuário melhora a experiência e pode lhe poupar Recursos
- 42. 1.000.000.000
- 43. 1.000.000.000
- 44. Make it asynchrony Técnica 4 Separe suas interações com o servidor da sua interface
- 46. Elevator test Se vira nos 30!
- 48. Enriquecer a experiência do futebol!
- 49. Keep it lean!
- 51. RubySource
- 53. Thank you! João Moura CTO at Palpiteros github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura