O documento apresenta uma introdução ao protocolo HTTP/2, descrevendo suas principais características como uso de uma única conexão TCP, compressão de cabeçalhos, multiplexação de streams e server push para reduzir a latência. Também discute os problemas do HTTP 1.1 como head of line blocking e soluções como pipelining e workarounds que são substituídas pelo HTTP/2.

1. HTTP/2
Pedro Araujo / @pedrotcaraujo

2. Pedro Araujo
Desenvolvedor front-end
@pedrotcaraujo

6. QUEM JÁ OUVIU FALAR EM HTTP2?

7. QUEM JÁ OUVIU FALAR EM SPDY?

9. HTTP (OVERVIEW):
● Principal protocolo da Web
● Funciona no modelo de requisição e resposta
● HTTP/1.0 foi desenvolvido em 1996
● Ultima atualização em 1999 com o HTTP/1.1 (RFC 2616)
SIM, 1999!

10. QUEM É NOSSO MAIOR INIMIGO?

11. INTERNET EXPLORER?

12. DIVERSIDADE DE RESOLUÇÕES?

13. OU SERIA A LATÊNCIA?

14. POR QUE A LATÊNCIA É O PROBLEMA?
PORQUE A WEB MUDOU!

15. http://httparchive.org/

16. ● Total transfer size: 720kb para 1900kb por página web
● Total requests: 70 para 100 por página web
Dados de 2011 a 2015
http://httparchive.org/

17. ● 3G no Brasil tem média de 195ms de latência
● 4G no Brasil tem média de 58ms de latência
ESTAMOS NA ERA MÓVEL
http://opensignal.com/

18. MAIS BANDA LARGA NÃO IMPORTA (MUITO)
https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ - Mike Belshe

19. PERFORMANCE É IMPORTANTE
O crescimento rápido do mundo da otimização de performance da Web no
passar dos anos vem da importância da velocidade na experiência do usuário.
● Sites mais rápidos lidam com melhor engajamento do usuário
● Sites mais rápidos lidam com melhor retenção do usuário
● Sites mais rápidos lidam com alta conversão

20. PARA UMA WEB MAIS RÁPIDA!
HTTP/2

21. PREOCUPAÇÕES DO HTTP 1.1?
● Uso inadequado do TCP
● HEAD OF LINE BLOCKING
● Muitos, eu disse MUITOS workaraounds

22. UM POUCO DO TCP:
● Esconde a complexidade da comunicação de rede
● Garante a entrega dos dados idênticos e na mesma ordem
● Precisão e distribuição
● Three-way HANDSHAKE: SYN, SYN ACK e ACK

23. HTTP 1.1 (keep-alive)
4 a 8
conexões

24. FIFO (first in first out)
HTTP 1.1 (pipelining)
HEAD OF LINE
BLOCKING

26. WORKARAOUNDS OPTIMIZAÇÕES̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶

27. SPRITING

28. DATA URIs

29. DOMAIN SHARDING

31. HTTP 2.0
Binário
Header compression (HPACK)
Multiplexing
Server Push

32. HTTP/2 (OVERVIEW):
● Principal objetivo é reduzir a latência
● Usa somente uma conexão TCP
● NÃO modifica a semântica do HTTP (methods, status code, URIs, etc)
● Baseado no SPDY

33. HTTP/2 BINÁRIO
● A camada binária esta no core do HTTP/2
● Messages são separados em vários frames
● Possui sistema de priorização de streams
● Responsável permitir requests e responses multiplexing
● Precisa de uma ferramenta para inspecionar. (Wireshark - http://wireshark.org)

34. HEADER COMPRESSION
● Cada header descreve o recurso a ser transferido e suas propriedades
● Média de 500 – 800 bytes
● GZIP foi registrado como inseguro na versão com SPDY
HPACK

35. MULTIPLEXED STREAMS
● Uma única conexão TCP por host
● Multiplos requests sem bloquear nenhum
● Multiplos responses sem bloquear nenhum
● Remove desnecessários workaraunds

36. SERVER PUSH
Server Push evita um round trip, enviando os assets que
ele acha que o client irá precisar.
Server Hint é um mecanismo onde o servidor pode
notificar o cliente de um recurso que vai ser necessário.

37. HTTP/2 = SPDY

38. SPDY (overview):
● Protocolo experimental feito pelo Google feito em 2009
● Objetivo de diminuir o Page Load Time em 50%
● Minimizar a complexidade de deployment
● Evitar mudanças de infra-estrutura de rede
● Desenvolver um protocolo com a comunidade open-source
● Obter o ganho de performance para (in)validar o protocolo

39. http://blog.chromium.org/2015/02/hello-http2-goodbye-spdy-http-is_9.html

40. https://docs.google.com/presentation/d/1BVyBcR5AE2kwY7akcmM0O3dDJ5TccY3ew0U9Ux7wsQs/pub?slide=id.p

41. SUPORTE

43. https://github.com/http2/http2-spec/wiki/Implementations

44. https://caddyserver.com/

45. http://browserdiet.com/pt/

46. QUER IR ALÉM?

47. MAIS...
● HTTP/2 (IETF HTTP Working Group) - https://http2.github.io/
● High Performance Browser Networking - http://chimera.labs.oreilly.com/books/1230000000545/ch12.html
● HTTP2 for front-end web developers - https://mattwilcox.net/web-development/http2-for-front-end-web-developers
● Need for Speed 2: Improving Front-End Performance - https://jonsuh.com/blog/need-for-speed-2/
● HTTP/2 - Let’s Surf Like It’s 2015 - https://www.linkedin.com/pulse/http2-lets-surf-like-its-2015-rajat-taneja

48. em português...
● SPDY, HTTP2 e por que você deveria conhecê-los -
http://blog.caelum.com.br/spdy-http2-e-por-que-voce-deveria-conhece-los/
● HTTP 2.0 tem sua primeira versão publicada - http://www.infoq.com/br/news/2012/12/http-20-draft-publicado
● As fantásticas novidades do HTTP 2.0 e do SPDY -
http://blog.caelum.com.br/as-fantasticas-novidades-do-http-2-0-e-do-spdy/
● HTTP/2 - Atualização do protocolo base da internet -
http://tableless.com.br/http2-atualizacao-do-protocolo-base-da-internet/
● Simplificando o HTTP 2.0 - http://betomuniz.com/blog/simplificando-o-http-2-0/

49. blog.concretesolutions.com.br
www.concretesolutions.com.br
São Paulo
Rua Sansão Alves dos Santos, 433
4º andar - Brooklin, São Paulo
CEP: 04565-001
Tel.: +55 11 4119-0449
Rio de Janeiro
Rua São José, 90 Sala: 2121
Centro, Rio de Janeiro
CEP: 20010-020
Tel.: +55 21 2240-2030
OBRIGADO!