Build Zero load time apps
João Moura 
CTO at Palpiteros 
github.com/joaomdmoura 
twitter.com/joaomdmoura 
speakerdeck.com/joaomdmoura
O que mudou? 
Tempo! A coisa mais valiosa 
do mundo!
O que mudou? 
Tempo! A coisa mais valiosa 
do mundo!
O que mudou? 
Tempo! A coisa mais valiosa 
do mundo!
Webapps timeline 
Action! Action! 
Load Time Load Time
74% dos usuários mobile 
não esperam mais que 5 segundos 
para uma página carregar. 
http://www.strangeloopnetworks.com/re...
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-t...
Yahoo!: 400 ms 
5 to 9% increase in the number of people 
who clicked “back” before the page even loaded. 
(source: Nicole...
Google: 500 ms 
20% fewer searches. 
(source: Marrissa Mayer, Google)
Amazon: 100 ms 
1% increase in sales. 
(source: Greg Linden, Amazon)
Amazon: 100 ms 
1% increase in sales. 
(source: Greg Linden, Amazon) 
US$ 61.093.000.000,00 
(2012)
Sua Aplicação 
?
Old but Gold! 
Tempo continua sendo dinheiro! 
é mais que
Velocidade x Sucesso 
Velocidade é mais que 
uma feature
O que fazer? 
Como construir uma aplicação 
com zero loadtime?
Habilitar GZIP
Habilitar GZIP Minify de JS e CSS
Habilitar GZIP Minify de JS e CSS Compressão de HTML
Habilitar GZIP Minify de JS e CSS Compressão de HTML 
Otimização de imagens
Habilitar GZIP Minify de JS e CSS Compressão de HTML 
Otimização de imagensDiminuir cookies e headers
Habilitar GZIP Minify de JS e CSS Compressão de HTML 
Otimização de imagensDiminuir cookies e headersUtilização de sprites
Overweight! 
Problema 1 
Grande número de assets 
e grandes assets.
Rede! 
Problema 2 
Diferentes conexões, velocidades 
e sinais
E agora? 
E se velocidade não for o segredo?
Perceived Speed! 
O usuário não se importa com o 
que acontece em backstage
Render in client 
Técnica 1 
Se você consegue bater 50 ms 
de loadtime sem render in client 
você tem minha atenção
Old Browsers 
Não suportam novas libs JS
Old Browsers 
Não suportam novas libs JS
Store data in client 
Técnica 2 
Capacidade de resposta, Acessibilidade 
e os Tempos de Carregamento reduzido
Database Cookies
Database Cookies X X
Local Storage 
FTW!
Intelligent Preload 
Técnica 3 
Como predizer a navegação do usuário 
melhora a experiência e pode lhe poupar 
Recursos
1.000.000.000
1.000.000.000
Make it asynchrony 
Técnica 4 
Separe suas interações com o servidor 
da sua interface
Elevator test 
Se vira nos 30!
Enriquecer a 
experiência do futebol!
Keep it lean!
Estamos contratando 
jmoura@palpiteros.com
RubySource
github.com/joaomdmoura/gioco
Thank you! 
João Moura 
CTO at Palpiteros 
github.com/joaomdmoura 
twitter.com/joaomdmoura 
speakerdeck.com/joaomdmoura
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Construindo Aplicações com Zero Load Time
Próximos SlideShares
Carregando em…5
×

Construindo Aplicações com Zero Load Time

250 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
250
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Construindo Aplicações com Zero Load Time

  1. 1. Build Zero load time apps
  2. 2. João Moura CTO at Palpiteros github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura
  3. 3. O que mudou? Tempo! A coisa mais valiosa do mundo!
  4. 4. O que mudou? Tempo! A coisa mais valiosa do mundo!
  5. 5. O que mudou? Tempo! A coisa mais valiosa do mundo!
  6. 6. Webapps timeline Action! Action! Load Time Load Time
  7. 7. 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/
  8. 8. 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/
  9. 9. Yahoo!: 400 ms 5 to 9% increase in the number of people who clicked “back” before the page even loaded. (source: Nicole Sullivan, Yahoo!)
  10. 10. Google: 500 ms 20% fewer searches. (source: Marrissa Mayer, Google)
  11. 11. Amazon: 100 ms 1% increase in sales. (source: Greg Linden, Amazon)
  12. 12. Amazon: 100 ms 1% increase in sales. (source: Greg Linden, Amazon) US$ 61.093.000.000,00 (2012)
  13. 13. Sua Aplicação ?
  14. 14. Old but Gold! Tempo continua sendo dinheiro! é mais que
  15. 15. Velocidade x Sucesso Velocidade é mais que uma feature
  16. 16. O que fazer? Como construir uma aplicação com zero loadtime?
  17. 17. Habilitar GZIP
  18. 18. Habilitar GZIP Minify de JS e CSS
  19. 19. Habilitar GZIP Minify de JS e CSS Compressão de HTML
  20. 20. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagens
  21. 21. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagensDiminuir cookies e headers
  22. 22. Habilitar GZIP Minify de JS e CSS Compressão de HTML Otimização de imagensDiminuir cookies e headersUtilização de sprites
  23. 23. Overweight! Problema 1 Grande número de assets e grandes assets.
  24. 24. Rede! Problema 2 Diferentes conexões, velocidades e sinais
  25. 25. E agora? E se velocidade não for o segredo?
  26. 26. Perceived Speed! O usuário não se importa com o que acontece em backstage
  27. 27. Render in client Técnica 1 Se você consegue bater 50 ms de loadtime sem render in client você tem minha atenção
  28. 28. Old Browsers Não suportam novas libs JS
  29. 29. Old Browsers Não suportam novas libs JS
  30. 30. Store data in client Técnica 2 Capacidade de resposta, Acessibilidade e os Tempos de Carregamento reduzido
  31. 31. Database Cookies
  32. 32. Database Cookies X X
  33. 33. Local Storage FTW!
  34. 34. Intelligent Preload Técnica 3 Como predizer a navegação do usuário melhora a experiência e pode lhe poupar Recursos
  35. 35. 1.000.000.000
  36. 36. 1.000.000.000
  37. 37. Make it asynchrony Técnica 4 Separe suas interações com o servidor da sua interface
  38. 38. Elevator test Se vira nos 30!
  39. 39. Enriquecer a experiência do futebol!
  40. 40. Keep it lean!
  41. 41. Estamos contratando jmoura@palpiteros.com
  42. 42. RubySource
  43. 43. github.com/joaomdmoura/gioco
  44. 44. Thank you! João Moura CTO at Palpiteros github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura

×