construindo aplicações com zero load time
DESCRIPTION
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
Build Zeroload time apps
João Mouragithub.com/joaomdmoura twitter.com/joaomdmoura
speakerdeck.com/joaomdmoura
CTO at Palpiteros
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!
Action! Action!
Load Time Load Time
Webapps timeline
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/
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
Yahoo!: 400 ms
5 to 9% increase in the number of people
who clicked “back” before the page even loaded. (source: Nicole Sullivan, Yahoo!)
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 SucessoVelocidade é 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 CSSCompressão de HTML
Habilitar GZIP Minify de JS e CSSCompressão de HTMLOtimização de imagens
Habilitar GZIP Minify de JS e CSSCompressão de HTMLOtimização de imagensDiminuir cookies e headers
Habilitar GZIP Minify de JS e CSSCompressão de HTMLOtimização de imagensDiminuir cookies e headersUtilização de sprites
Problema 1Overweight!
Grande número de assets e grandes assets.
Problema 2Rede!
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
Técnica 1Render in client
Se você consegue bater 50 ms de loadtime sem render in client você tem minha atenção
Old BrowsersNão suportam novas libs JS
Old BrowsersNão suportam novas libs JS
Técnica 2Store data in client
Capacidade de resposta, Acessibilidade e os Tempos de Carregamento reduzido
Database Cookies
Database CookiesX X
Local StorageFTW!
Técnica 3Intelligent Preload
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
Técnica 4Make it asynchrony
Separe suas interações com o servidor da sua interface
Elevator testSe vira nos 30!
Enriquecer a experiência do futebol!
Keep it lean!
Estamos contratando [email protected]
RubySource
github.com/joaomdmoura/gioco
João Mouragithub.com/joaomdmoura twitter.com/joaomdmoura
speakerdeck.com/joaomdmoura
CTO at Palpiteros
Thank you!