Construindo Aplicações com Zero Load Time

98195776df79590269541395c699f816?s=47 João Moura
December 13, 2013

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.

98195776df79590269541395c699f816?s=128

João Moura

December 13, 2013
Tweet

Transcript

  1. Build Zero load time apps

  2. João Moura github.com/joaomdmoura twitter.com/joaomdmoura speakerdeck.com/joaomdmoura CTO at Palpiteros

  3. None
  4. None
  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?

  19. None
  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

  33. None
  34. None
  35. None
  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
  41. None
  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
  45. None
  46. Elevator test Se vira nos 30!

  47. None
  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!