53
Build Zero load time apps

Construindo Aplicações com Zero Load Time

Embed Size (px)

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.

Citation preview

Page 1: Construindo Aplicações com Zero Load Time

Build Zeroload time apps

Page 2: Construindo Aplicações com Zero Load Time

João Mouragithub.com/joaomdmoura twitter.com/joaomdmoura

speakerdeck.com/joaomdmoura

CTO at Palpiteros

Page 3: Construindo Aplicações com Zero Load Time
Page 4: Construindo Aplicações com Zero Load Time
Page 5: Construindo Aplicações com Zero Load Time

O que mudou?Tempo! A coisa mais valiosa do mundo!

Page 6: Construindo Aplicações com Zero Load Time

O que mudou?Tempo! A coisa mais valiosa do mundo!

Page 7: Construindo Aplicações com Zero Load Time

O que mudou?Tempo! A coisa mais valiosa do mundo!

Page 8: Construindo Aplicações com Zero Load Time

Action! Action!

Load Time Load Time

Webapps timeline

Page 9: Construindo Aplicações com Zero Load Time

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/

Page 10: Construindo Aplicações com Zero Load Time

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

Page 11: Construindo Aplicações com Zero Load Time

Yahoo!: 400 ms

5 to 9% increase in the number of people

who clicked “back” before the page even loaded. (source: Nicole Sullivan, Yahoo!)

Page 12: Construindo Aplicações com Zero Load Time

Google: 500 ms

20% fewer searches. (source: Marrissa Mayer, Google)

Page 13: Construindo Aplicações com Zero Load Time

Amazon: 100 ms

1% increase in sales. (source: Greg Linden, Amazon)

Page 14: Construindo Aplicações com Zero Load Time

Amazon: 100 ms

1% increase in sales. (source: Greg Linden, Amazon)

US$ 61.093.000.000,00 (2012)

Page 15: Construindo Aplicações com Zero Load Time

Sua Aplicação

?

Page 16: Construindo Aplicações com Zero Load Time

Old but Gold!Tempo continua sendo dinheiro!

é mais que

Page 17: Construindo Aplicações com Zero Load Time

Velocidade x SucessoVelocidade é mais que uma feature

Page 18: Construindo Aplicações com Zero Load Time

O que fazer?Como construir uma aplicação com zero loadtime?

Page 19: Construindo Aplicações com Zero Load Time
Page 20: Construindo Aplicações com Zero Load Time

Habilitar GZIP

Page 21: Construindo Aplicações com Zero Load Time

Habilitar GZIP Minify de JS e CSS

Page 22: Construindo Aplicações com Zero Load Time

Habilitar GZIP Minify de JS e CSSCompressão de HTML

Page 23: Construindo Aplicações com Zero Load Time

Habilitar GZIP Minify de JS e CSSCompressão de HTMLOtimização de imagens

Page 24: Construindo Aplicações com Zero Load Time

Habilitar GZIP Minify de JS e CSSCompressão de HTMLOtimização de imagensDiminuir cookies e headers

Page 25: Construindo Aplicações com Zero Load Time

Habilitar GZIP Minify de JS e CSSCompressão de HTMLOtimização de imagensDiminuir cookies e headersUtilização de sprites

Page 26: Construindo Aplicações com Zero Load Time

Problema 1Overweight!

Grande número de assets e grandes assets.

Page 27: Construindo Aplicações com Zero Load Time

Problema 2Rede!

Diferentes conexões, velocidades e sinais

Page 28: Construindo Aplicações com Zero Load Time

E agora?E se velocidade não for o segredo?

Page 29: Construindo Aplicações com Zero Load Time

Perceived Speed!O usuário não se importa com o que acontece em backstage

Page 30: Construindo Aplicações com Zero Load Time

Técnica 1Render in client

Se você consegue bater 50 ms de loadtime sem render in client você tem minha atenção

Page 31: Construindo Aplicações com Zero Load Time

Old BrowsersNão suportam novas libs JS

Page 32: Construindo Aplicações com Zero Load Time

Old BrowsersNão suportam novas libs JS

Page 33: Construindo Aplicações com Zero Load Time
Page 34: Construindo Aplicações com Zero Load Time
Page 35: Construindo Aplicações com Zero Load Time
Page 36: Construindo Aplicações com Zero Load Time

Técnica 2Store data in client

Capacidade de resposta, Acessibilidade e os Tempos de Carregamento reduzido

Page 37: Construindo Aplicações com Zero Load Time

Database Cookies

Page 38: Construindo Aplicações com Zero Load Time

Database CookiesX X

Page 39: Construindo Aplicações com Zero Load Time

Local StorageFTW!

Page 40: Construindo Aplicações com Zero Load Time

Técnica 3Intelligent Preload

Como predizer a navegação do usuário melhora a experiência e pode lhe poupar Recursos

Page 41: Construindo Aplicações com Zero Load Time
Page 42: Construindo Aplicações com Zero Load Time

1.000.000.000

Page 43: Construindo Aplicações com Zero Load Time

1.000.000.000

Page 44: Construindo Aplicações com Zero Load Time

Técnica 4Make it asynchrony

Separe suas interações com o servidor da sua interface

Page 45: Construindo Aplicações com Zero Load Time
Page 46: Construindo Aplicações com Zero Load Time

Elevator testSe vira nos 30!

Page 47: Construindo Aplicações com Zero Load Time
Page 48: Construindo Aplicações com Zero Load Time

Enriquecer a experiência do futebol!

Page 49: Construindo Aplicações com Zero Load Time

Keep it lean!

Page 50: Construindo Aplicações com Zero Load Time

Estamos contratando [email protected]

Page 51: Construindo Aplicações com Zero Load Time

RubySource

Page 52: Construindo Aplicações com Zero Load Time

github.com/joaomdmoura/gioco

Page 53: Construindo Aplicações com Zero Load Time

João Mouragithub.com/joaomdmoura twitter.com/joaomdmoura

speakerdeck.com/joaomdmoura

CTO at Palpiteros

Thank you!