Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 milhão de usuários simultâneos?
Fernando ike
Fernando Ike
Clientes Latam
1.000.000
1.000.000
● Tamanho médio de uma página 3 Mbytes
● São 586 Mbits/s
● 8.000.000 usuários/mês
● 131 petabytes/mês
● 2.747.26...
1996
1996
● Netscape 2.0
1996
1996
1996
1996
1996
● HTML 3.0
● Internet Explorer 3.0
● Netscape 2.02
● Usuários no Mundo: 36 milhões
● +- 100 mil sites
● CPU 200Mhz, R...
1996
UOL:
● Página Inicial: 140KB
● Elementos: 26 objetos
NYTIMES:
● Página Inicial: 144KB
● Elementos: 18 objetos
2014
● HTML 5.0
● Internet Explorer 11
● Firefox 30+
● Chrome 40
● Usuários no Mundo: 2,4 bilhões
● +- 10 bilhões de sites...
2014
UOL:
● Página Inicial: 1,5 MB
● Elementos: 187 objetos
NYTIMES:
● Página Inicial: 2,03MB
● Elementos: 191 objetos
2014
2014
2014
2014
● HTML 5.0
● Internet Explorer 11
● Firefox 31+
● Chrome 36+
● Usuários no Mundo: 3 bilhões
● +- 9,66 bilhões de site...
2015
Crescimento / Home
Crescimento / Home - 2015
Tamanho Total - Objetos
UOL 1,047 Mbytes 115
NYTIMES 4,593 Mbytes 261
Quem é mais rápido?
UOL
X
Nytimes
Segundos Onload - Requests
UOL 11,246 86
NYTIMES 3.757 73
State of the Union: Ecommerce Page
Speed & Web Performance
Ilusão da felicidade web
State of the Union: Ecommerce Page
Speed & Web Performance
Walmart
● Cada 1 segundo de melhoria => aumentou conversão
de vendas em 2%
● 100 ms de melhoria => aumentou a receita em 1%
Amazon
● Cada 1 segundo de piora no desempenho (para o usuário)
representa $ 1.600.000.000/ano
UX e desempenho
Fonte: web performance today
Keep-alive
HTTP/1.1 200 OK
Accept-Ranges: bytes
Connection: close
Content-Encoding: gzip
Content-Length: 17647
Content-Typ...
DNS
● Resolver um DNS para IP leva +- 120 ms à 500 ms
(ou mais...)
● Navegadores tem cache DNS além do Sistema
Operacional...
http://www.webpagetest.org/result/150709_7Q_H1Z/1/details/
DNS
● Navegadores suportam até 6 conexões simultâneas por
domínio
● Navegadores suportam até 32 conexões simultâneas
● Sep...
DNS
● www.oioioi.com.br
● login.oioioi.com.br
● estatico1.oioioi.com.br
● estatico2.oioioi.com.br
● estatico3.oioioi.com.b...
HTTPS
HTTPS
● Acresce 200ms à 1s a toda conexão
● Aumento do volume total de tráfego
● Aumento do processamento de CPU
HTTPS
● Aumento do uso de memória
● Aumento da complexidade de arquitetura
● Aumento do tempo total de rede
HTTPS
Nunca use HTTPS no
servidor(es) de aplicação
HTTPS - TLS
● Não use SSLv2/SSLv3
● HTTPS é parte das boas práticas de SEO
TLS
● Versão 1.2
● Cifras acima de 128 bits
● Atenção para ao implantar TLS (Load
Balance, Overhead CPU/MEM.
● Cuidado com...
http://chimera.labs.oreilly.com/books/1230000000545/ch04.html#TLS_HANDSHAKE
Compactação (gzip)
● Reduz o tamanho das respostas até 70%
● Os navegadores sinalizam o suporte à compressão com
um cabeça...
http://www.fernandoike.com/2014/12/23/configuracao-de-compressao-gzip-para-sites-e-ranking-de-cdn/
Não use em arquivos PDF, imagens,
videos, etc.
Não faça compactação no servidor de
aplicação
Time to First Byte
● Boa métrica para identificar lentidão
● TTFB alto pode ser qualquer coisa: Rede, I/O, Memória,
Servid...
http://www.webpagetest.org/result/150709_HH_H31/1/details/
Requisições HTTP
● Diminuir a quantidade de requisições HTTP:
− Consolide arquivos CSS
− Consolide arquivos de script (jav...
CSS e Javascript
● Remova (Minify) conteúdo considerado desnecessário:
− Caractater vazio
− Comentários de código
● Coloqu...
Javascript
● Use defer
● Cuidado com js de 3rd party
● Quando possível, carregue javascript dinamicamente
● Carregue-os as...
Cache-Control:
● max-age=3600 / tempo em segundos de expiração
● public: os objetos em cache podem ser salvos em caches
in...
HTTP/1.1 200 OK
Server: imagine 0.10.3
Content-Type: image/jpeg
ETag: "1c3382aeb3fc6be9e55bad50d00844c3"
Last-Modified: We...
Cache
● Conteúdo estático com longo tempo de cache
● Use múltiplos domínios para cache
● Tenha áreas comuns para manter os...
http://www.fernandoike.com/2014/12/23/configuracao-de-compressao-gzip-para-sites-e-ranking-de-cdn/
Prebrowsing
<link rel="dns-prefetch" href="fernandoike.com">
<link rel="prefetch" href="http://fernandoike.com/utils.js>
<...
Progressive Images
Fonte: http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/
Otimize o uso de imagens
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-op...
Fonte: http://upload.wikimedia.org/wikipedia/commons/1/1f/Responsive-web-design-devices.jpg
CDN
CDN
Content Delivery Network
● Maior parte do tráfego dos usuários são de download
● CDN estão em diversas regiões
● 80% de um...
http://thehackernews.com/2015/02/http2-fast-websites.html
HTTP/2
- HTTP 1.1 - liberado em 1999 (RFC 2616)
- HTTP/2 - 05/2015 (RFC 7540 e 7541)
HTTP/2
● Header compression
● Multiplexing
● TLS - Criptografia
● Priorização e dependências
● Server Push
Multiplexação
HTTP 1.1 HTTP/2
Priorização e Dependências
● Minify de CSS e javascripts
● Consolidação de Javascripts
● Priorização dos objetos
Browsers compatíveis
● Chrome
● Firefox
● Internet Explorer
● Safari
● Opera
Quem usa
● Twitter
● Google
● Akamai
● Facebook
Arquitetura
● Servidor de aplicação não é servidor de objetos estático!
● Cache, Cache, Cache...
● Pense sempre na experiê...
Referências
● http://calendar.perfplanet.com/
● http://blog.patrickmeenan.com/
● http://www.stevesouders.com/blog/
● http:...
● fernando.ike at gmail.com
● http://www.fernandoike.com
● http://twitter.com/fernandoike
● http://linkedin.com/in/fernand...
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Um milhao de usuários simultâneos
Upcoming SlideShare
Loading in …5
×

Um milhao de usuários simultâneos

11,549 views

Published on

Algum tempo atrás estar preparado para um milhão de usuários simultâneos era somente para as grandes empresas como Google, twitter ou facebook. Mas com a explosão da Web 2.0 isso também é uma preocupação para qualquer que tenha um site de notícias ou mesmo um ecommerce. Somado as atualizações cada vez mais frenéticas (tecnológicas ou de regras denegócio) para fazê-lo sobreviver a concorrência acaba-se desprezando boas práticas para atender a audiência cada vez mais maior. Então, seu site está preparada para um milhão de usuários?

A cada dia surge novas tecnologias para produção de sistemas/site
tornando difícil acompanhar todas elas ou escolher as melhores. Porém
é possível escolher algumas técnicas e práticas importantes para
internet e seu ecossistema. A Web 2.0, expansão do comércio
eletrônico, redes sociais, a "Internet das Coisas" e outros buzzwords
tornam as escolhas tecnológicas cada vez mais difíceis de serem
tomadas pela enormidade de opções. Mas é possível considerar algumas
coisas para que um site/sistema proporcione uma boa experiência para
seu usuário e alguma vida para as equipes de TI.

Published in: Technology
  • Be the first to comment

Um milhao de usuários simultâneos

  1. 1. 1 milhão de usuários simultâneos? Fernando ike
  2. 2. Fernando Ike
  3. 3. Clientes Latam
  4. 4. 1.000.000
  5. 5. 1.000.000 ● Tamanho médio de uma página 3 Mbytes ● São 586 Mbits/s ● 8.000.000 usuários/mês ● 131 petabytes/mês ● 2.747.269,12 obamas (Cloudfront - EUA)
  6. 6. 1996
  7. 7. 1996 ● Netscape 2.0
  8. 8. 1996
  9. 9. 1996
  10. 10. 1996
  11. 11. 1996
  12. 12. 1996 ● HTML 3.0 ● Internet Explorer 3.0 ● Netscape 2.02 ● Usuários no Mundo: 36 milhões ● +- 100 mil sites ● CPU 200Mhz, RAM 8MB e HD 850 MB
  13. 13. 1996 UOL: ● Página Inicial: 140KB ● Elementos: 26 objetos NYTIMES: ● Página Inicial: 144KB ● Elementos: 18 objetos
  14. 14. 2014 ● HTML 5.0 ● Internet Explorer 11 ● Firefox 30+ ● Chrome 40 ● Usuários no Mundo: 2,4 bilhões ● +- 10 bilhões de sites ● CPU 8-Core, RAM 16 GB e HD 1TB
  15. 15. 2014 UOL: ● Página Inicial: 1,5 MB ● Elementos: 187 objetos NYTIMES: ● Página Inicial: 2,03MB ● Elementos: 191 objetos
  16. 16. 2014
  17. 17. 2014
  18. 18. 2014
  19. 19. 2014 ● HTML 5.0 ● Internet Explorer 11 ● Firefox 31+ ● Chrome 36+ ● Usuários no Mundo: 3 bilhões ● +- 9,66 bilhões de sites ● X bilhões de dispositivos IoT
  20. 20. 2015
  21. 21. Crescimento / Home
  22. 22. Crescimento / Home - 2015 Tamanho Total - Objetos UOL 1,047 Mbytes 115 NYTIMES 4,593 Mbytes 261
  23. 23. Quem é mais rápido? UOL X Nytimes
  24. 24. Segundos Onload - Requests UOL 11,246 86 NYTIMES 3.757 73
  25. 25. State of the Union: Ecommerce Page Speed & Web Performance
  26. 26. Ilusão da felicidade web
  27. 27. State of the Union: Ecommerce Page Speed & Web Performance
  28. 28. Walmart ● Cada 1 segundo de melhoria => aumentou conversão de vendas em 2% ● 100 ms de melhoria => aumentou a receita em 1%
  29. 29. Amazon ● Cada 1 segundo de piora no desempenho (para o usuário) representa $ 1.600.000.000/ano
  30. 30. UX e desempenho Fonte: web performance today
  31. 31. Keep-alive HTTP/1.1 200 OK Accept-Ranges: bytes Connection: close Content-Encoding: gzip Content-Length: 17647 Content-Type: text/html Date: Sat, 09 Aug 2014 12:40:40 GMT ETag: "20107-10121-5000cd7484ac0" Last-Modified: Thu, 07 Aug 2014 16:47:15 GMT Server: Apache/2.2.22 Vary: Accept-Encoding
  32. 32. DNS ● Resolver um DNS para IP leva +- 120 ms à 500 ms (ou mais...) ● Navegadores tem cache DNS além do Sistema Operacional ● Evite usar redirecionamentos HTTP
  33. 33. http://www.webpagetest.org/result/150709_7Q_H1Z/1/details/
  34. 34. DNS ● Navegadores suportam até 6 conexões simultâneas por domínio ● Navegadores suportam até 32 conexões simultâneas ● Separe o tráfego SSL em outro(s) domínio(s)
  35. 35. DNS ● www.oioioi.com.br ● login.oioioi.com.br ● estatico1.oioioi.com.br ● estatico2.oioioi.com.br ● estatico3.oioioi.com.br ● estatico4.oioioi.com.br ● estatico5.oioioi.com.br
  36. 36. HTTPS
  37. 37. HTTPS ● Acresce 200ms à 1s a toda conexão ● Aumento do volume total de tráfego ● Aumento do processamento de CPU
  38. 38. HTTPS ● Aumento do uso de memória ● Aumento da complexidade de arquitetura ● Aumento do tempo total de rede
  39. 39. HTTPS Nunca use HTTPS no servidor(es) de aplicação
  40. 40. HTTPS - TLS ● Não use SSLv2/SSLv3 ● HTTPS é parte das boas práticas de SEO
  41. 41. TLS ● Versão 1.2 ● Cifras acima de 128 bits ● Atenção para ao implantar TLS (Load Balance, Overhead CPU/MEM. ● Cuidado com DNS sharding + TLS ● <= SHA256
  42. 42. http://chimera.labs.oreilly.com/books/1230000000545/ch04.html#TLS_HANDSHAKE
  43. 43. Compactação (gzip) ● Reduz o tamanho das respostas até 70% ● Os navegadores sinalizam o suporte à compressão com um cabeçalho HTTP: Accept-Encoding: gzip, deflate ● Os servidores web notificam o navegador cabeçalho HTTP: Content-Encoding: gzip
  44. 44. http://www.fernandoike.com/2014/12/23/configuracao-de-compressao-gzip-para-sites-e-ranking-de-cdn/
  45. 45. Não use em arquivos PDF, imagens, videos, etc. Não faça compactação no servidor de aplicação
  46. 46. Time to First Byte ● Boa métrica para identificar lentidão ● TTFB alto pode ser qualquer coisa: Rede, I/O, Memória, Servidor Web, Aplicação, Banco de dados, plugins, conteúdo de terceiros, etc...
  47. 47. http://www.webpagetest.org/result/150709_HH_H31/1/details/
  48. 48. Requisições HTTP ● Diminuir a quantidade de requisições HTTP: − Consolide arquivos CSS − Consolide arquivos de script (javascript) − Use CSS Sprite para imagens de fundo − e são coisas diferentes ● Cuidado com as respostas HTTP 404
  49. 49. CSS e Javascript ● Remova (Minify) conteúdo considerado desnecessário: − Caractater vazio − Comentários de código ● Coloque o javascript no fim e CSS no início da páginas html. ● Cuidado com funções duplicadas ● Consolide js e CSS
  50. 50. Javascript ● Use defer ● Cuidado com js de 3rd party ● Quando possível, carregue javascript dinamicamente ● Carregue-os assincronamente
  51. 51. Cache-Control: ● max-age=3600 / tempo em segundos de expiração ● public: os objetos em cache podem ser salvos em caches intermediários e que qualquer usuário pode consulta
  52. 52. HTTP/1.1 200 OK Server: imagine 0.10.3 Content-Type: image/jpeg ETag: "1c3382aeb3fc6be9e55bad50d00844c3" Last-Modified: Wed, 08 Jul 2015 20:40:20 GMT Content-Length: 5693 Date: Thu, 09 Jul 2015 08:53:01 GMT X-Varnish: 1076065602 991419582 Age: 43945 Connection: keep-alive Via: cache-varnish Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET, HEAD Keep-Alive: timeout=20, max=15 Cache-Control: max-age=86400 X-Cache: HIT HTTP/1.1 200 OK Server: Apache X-API-Version: 4 Last-Modified: Thu, 09 Jul 2015 02:14:19 GMT Accept-Ranges: bytes Content-Length: 10712 Access-Control-Allow-Origin: * Cneonction: close Content-Type: image/jpeg Cache-Control: private, max-age=668050 Expires: Fri, 17 Jul 2015 02:30:59 GMT Date: Thu, 09 Jul 2015 08:56:49 GMT Connection: keep-alive
  53. 53. Cache ● Conteúdo estático com longo tempo de cache ● Use múltiplos domínios para cache ● Tenha áreas comuns para manter os objetos de uso comuns ● Mude o nome do arquivo para expirar o cache (...com. br/1.gif?v=123) ● Use o content-length no cabeçalho de resposta ● Use cache nas páginas mais acessadas
  54. 54. http://www.fernandoike.com/2014/12/23/configuracao-de-compressao-gzip-para-sites-e-ranking-de-cdn/
  55. 55. Prebrowsing <link rel="dns-prefetch" href="fernandoike.com"> <link rel="prefetch" href="http://fernandoike.com/utils.js> <link rel="prerender" href="http://www.fernandoike.com/about">
  56. 56. Progressive Images Fonte: http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/
  57. 57. Otimize o uso de imagens https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
  58. 58. Fonte: http://upload.wikimedia.org/wikipedia/commons/1/1f/Responsive-web-design-devices.jpg
  59. 59. CDN
  60. 60. CDN
  61. 61. Content Delivery Network ● Maior parte do tráfego dos usuários são de download ● CDN estão em diversas regiões ● 80% de um site é de objetos estático ● Conteúdo “mais próximo” do internauta ● Redução de custo direto na operação (rede, servidores, pessoal, etc.)
  62. 62. http://thehackernews.com/2015/02/http2-fast-websites.html
  63. 63. HTTP/2 - HTTP 1.1 - liberado em 1999 (RFC 2616) - HTTP/2 - 05/2015 (RFC 7540 e 7541)
  64. 64. HTTP/2 ● Header compression ● Multiplexing ● TLS - Criptografia ● Priorização e dependências ● Server Push
  65. 65. Multiplexação
  66. 66. HTTP 1.1 HTTP/2
  67. 67. Priorização e Dependências
  68. 68. ● Minify de CSS e javascripts ● Consolidação de Javascripts ● Priorização dos objetos
  69. 69. Browsers compatíveis ● Chrome ● Firefox ● Internet Explorer ● Safari ● Opera
  70. 70. Quem usa ● Twitter ● Google ● Akamai ● Facebook
  71. 71. Arquitetura ● Servidor de aplicação não é servidor de objetos estático! ● Cache, Cache, Cache... ● Pense sempre na experiência do usuário (receber mais rápido) ● Não tenha pudor, irá reescrever várias partes de código ● Use o que tiver de melhor de cada tecnologia ● Comunicação assíncrona
  72. 72. Referências ● http://calendar.perfplanet.com/ ● http://blog.patrickmeenan.com/ ● http://www.stevesouders.com/blog/ ● http://www.webperformancetoday.com/ ● http://httparchive.org/ ● http://www.webpagetest.org/ ● https://istlsfastyet.com/ ● http://www.forbes.com/sites/johnrampton/2014/08/30/should-i-switch-from-http-to-https-for-seo-reasons/ ● http://perf.fail/ ● https://http2.github.io/ ● http://bigqueri.es/c/http-archive ● http://www.webpagetest.org ● https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency
  73. 73. ● fernando.ike at gmail.com ● http://www.fernandoike.com ● http://twitter.com/fernandoike ● http://linkedin.com/in/fernandoike Fernando Ike

×