Um milhao de usuários simultâneos

10,099 views
10,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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,099
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Apresentação Biografia
  • Mais, mais, mais usuários Mais e mais recurso Como suportar além do limite?
  • De volta ao passado como as coisas funcionavam no passado
  • Jogos sensação da época
  • Projeto de pesquisa que deu origem ao Google
  • How 36 works part 4,1
  • Waterfall Para que serve?
  • Exemplo de waterfall
  • Erros comuns. Exemplo de tipos
  • Proxy reverso para fazer compactação
  • Time to First Byte
  • http://jscompress.com/
  • Mapa de todas fibras submarinas Como as distâncias interferem na performance
  • Exemplo de traceroute para o japão
  • Cache / Clones
  • Como funciona uma CDN
  • 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

    ×