Construindo Aplicações com Zero Load Time

Hoje em dia o tempo se tornou o asset mais valioso de todos os tempos, ninguém quer e pode desperdiça-lo, nem desenvolvedores nem usuários. Provas disso estão ao nosso redor todos os dias, e definitivamente não somente dentro desse novo contexto de negócios e Startups permeados por metodologias como Agile, Lean, entre outros. Nenhum usuário quer encarar loadbars e nenhum produto pode se dar ao luxo de não ser performático, escalável e principalmente rápido. Os usuários não demandam mais somente uma boa experiência, ela precisa ser ágil! Atualmente existem muitas tecnologias e técnicas que podemos explorar para nos ajudar a alcançar um processo de desenvolvimento e uma aplicação mais rápida, e esse será o objetivo dessa palestra. Irei abordar algumas dessas técnicas e filosofias que irão habilitar você a de fato construir aplicações com Zero LoadTime.

Transcript

1. Build Zero load time apps
2. João Moura github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura CTO at Palpiteros
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. Action! Action! Load Time Load Time Webapps timeline
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. http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were- last-year/ 1.6 3.2 4.8 6.4 8 2000 2006 2009 2012
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 imagens Diminuir cookies e headers
25. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagens Diminuir cookies e headers Utilização de sprites
26. Problema 1 Overweight! Grande número de assets e grandes assets.
27. Problema 2 Rede! 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. Técnica 1 Render in client 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. Técnica 2 Store data in client Capacidade de resposta, Acessibilidade e os Tempos de Carregamento reduzido
37. Database Cookies
38. Database Cookies X X
39. Local Storage FTW!
40. Técnica 3 Intelligent Preload 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. Técnica 4 Make it asynchrony 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!
50. Estamos contratando jmoura@palpiteros.com
51. RubySource
52. github.com/joaomdmoura/gioco
53. João Moura github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura CTO at Palpiteros Thank you!