O documento discute a evolução da web entre 1996 e 2015, destacando o crescimento exponencial no número de usuários e sites, além das melhorias tecnológicas como HTML 5 e browsers modernos. Também apresenta métricas de desempenho de sites como UOL e NYTimes ao longo dos anos e estratégias para otimizar o desempenho como CDNs, HTTP/2, cache e compactação gzip.

1. 1 milhão de usuários simultâneos?
Fernando ike

2. Fernando Ike

4. Clientes Latam

5. 1.000.000

8. 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)

11. 1996

13. 1996
● Netscape 2.0

14. 1996

15. 1996

16. 1996

17. 1996

18. 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

19. 1996
UOL:
● Página Inicial: 140KB
● Elementos: 26 objetos
NYTIMES:
● Página Inicial: 144KB
● Elementos: 18 objetos

20. 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

21. 2014
UOL:
● Página Inicial: 1,5 MB
● Elementos: 187 objetos
NYTIMES:
● Página Inicial: 2,03MB
● Elementos: 191 objetos

23. 2014

24. 2014

25. 2014

26. 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

27. 2015

28. Crescimento / Home

29. Crescimento / Home - 2015
Tamanho Total - Objetos
UOL 1,047 Mbytes 115
NYTIMES 4,593 Mbytes 261

30. Quem é mais rápido?
UOL
X
Nytimes

31. Segundos Onload - Requests
UOL 11,246 86
NYTIMES 3.757 73

33. State of the Union: Ecommerce Page
Speed & Web Performance

34. Ilusão da felicidade web

35. State of the Union: Ecommerce Page
Speed & Web Performance

36. Walmart
● Cada 1 segundo de melhoria => aumentou conversão
de vendas em 2%
● 100 ms de melhoria => aumentou a receita em 1%

37. Amazon
● Cada 1 segundo de piora no desempenho (para o usuário)
representa $ 1.600.000.000/ano

38. UX e desempenho
Fonte: web performance today

39. 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

40. 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

41. http://www.webpagetest.org/result/150709_7Q_H1Z/1/details/

42. 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)

43. 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

44. HTTPS

46. HTTPS
● Acresce 200ms à 1s a toda conexão
● Aumento do volume total de tráfego
● Aumento do processamento de CPU

47. HTTPS
● Aumento do uso de memória
● Aumento da complexidade de arquitetura
● Aumento do tempo total de rede

48. HTTPS
Nunca use HTTPS no
servidor(es) de aplicação

49. HTTPS - TLS
● Não use SSLv2/SSLv3
● HTTPS é parte das boas práticas de SEO

50. 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

51. http://chimera.labs.oreilly.com/books/1230000000545/ch04.html#TLS_HANDSHAKE

52. 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

53. http://www.fernandoike.com/2014/12/23/configuracao-de-compressao-gzip-para-sites-e-ranking-de-cdn/

54. Não use em arquivos PDF, imagens,
videos, etc.
Não faça compactação no servidor de
aplicação

56. 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...

57. http://www.webpagetest.org/result/150709_HH_H31/1/details/

58. 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

59. 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

60. Javascript
● Use defer
● Cuidado com js de 3rd party
● Quando possível, carregue javascript dinamicamente
● Carregue-os assincronamente

67. 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

68. 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

69. 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

70. http://www.fernandoike.com/2014/12/23/configuracao-de-compressao-gzip-para-sites-e-ranking-de-cdn/

71. 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">

72. Progressive Images
Fonte: http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/

73. Otimize o uso de imagens
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

74. Fonte: http://upload.wikimedia.org/wikipedia/commons/1/1f/Responsive-web-design-devices.jpg

75. CDN

76. CDN

77. 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.)

78. http://thehackernews.com/2015/02/http2-fast-websites.html

79. HTTP/2
- HTTP 1.1 - liberado em 1999 (RFC 2616)
- HTTP/2 - 05/2015 (RFC 7540 e 7541)

80. HTTP/2
● Header compression
● Multiplexing
● TLS - Criptografia
● Priorização e dependências
● Server Push

81. Multiplexação

82. HTTP 1.1 HTTP/2

83. Priorização e Dependências

85. ● Minify de CSS e javascripts
● Consolidação de Javascripts
● Priorização dos objetos

86. Browsers compatíveis
● Chrome
● Firefox
● Internet Explorer
● Safari
● Opera

88. Quem usa
● Twitter
● Google
● Akamai
● Facebook

90. 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

93. 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

94. ● fernando.ike at gmail.com
● http://www.fernandoike.com
● http://twitter.com/fernandoike
● http://linkedin.com/in/fernandoike
Fernando Ike