HTTP/2Pedro Araujo / @pedrotcaraujo

Pedro AraujoDesenvolvedor front-end@pedrotcaraujo

QUEM JÁ OUVIU FALAR EM HTTP2?

QUEM JÁ OUVIU FALAR EM SPDY?

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!

QUEM É NOSSO MAIOR INIMIGO?

INTERNET EXPLORER?

DIVERSIDADE DE RESOLUÇÕES?

OU SERIA A LATÊNCIA?

POR QUE A LATÊNCIA É O PROBLEMA?

PORQUE A WEB MUDOU!

http://httparchive.org/

● 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/

● 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/

MAIS BANDA LARGA NÃO IMPORTA (MUITO)

https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ - Mike Belshe

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

PARA UMA WEB MAIS RÁPIDA!

HTTP/2

PREOCUPAÇÕES DO HTTP 1.1?

● Uso inadequado do TCP● HEAD OF LINE BLOCKING● Muitos, eu disse MUITOS workaraounds

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

HTTP 1.1 (keep-alive)

4 a 8 conexões

FIFO (first in first out)

HTTP 1.1 (pipelining)

HEAD OF LINE BLOCKING

WORKARAOUNDS OPTIMIZAÇÕES̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶

SPRITING

DATA URIs

DOMAIN SHARDING

HTTP 2.0Binário

Header compression (HPACK)MultiplexingServer Push

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

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)

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

MULTIPLEXED STREAMS

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

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.

HTTP/2 = SPDY

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

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

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

SUPORTE

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

https://caddyserver.com/

http://browserdiet.com/pt/

QUER IR ALÉM?

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

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/

blog.concretesolutions.com.brwww.concretesolutions.com.br

São PauloRua Sansão Alves dos Santos, 433

4º andar - Brooklin, São PauloCEP: 04565-001

Tel.: +55 11 4119-0449

Rio de JaneiroRua São José, 90 Sala: 2121Centro, Rio de JaneiroCEP: 20010-020Tel.: +55 21 2240-2030

OBRIGADO!