@sergio_caelum sergiolopes.org

HTTP/2

review HTTP em 5 slides

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.com.br HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 Vary: Accept- Encoding,User- Agent Content- Language: pt- br Date: Thu, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title>

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 TEXTO Host: www.caelum.com.br HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 Vary: Accept- Encoding,User- Agent Content- Language: pt- br Date: Thu, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title>

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.com.br REQUEST HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 RESPONSE Vary: Accept- Encoding,User- Agent Content- Language: pt- br Date: Thu, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title>

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.com.br REQUEST... ESPERA... HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 RESPONSE Vary: Accept- Encoding,User- Agent Content- Language: pt- br Date: Thu, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title>

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 MÉTODO E URL Host: www.caelum.com.br HTTP/1.1 200 OK STATUS Content- Type: text/html; charset=utf- 8 Vary: Accept- Encoding,User- Agent Content- Language: pt- br Date: Thu, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title> RESPOSTA

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.caelum.com.br HEADERS HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 HEADERS Vary: Accept- Encoding,User- Agent Content- Language: pt- br Date: Thu, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title>

http texto headers request > espera > response

cliente servidor CONEXÃO TCP REQUEST cliente servidor CONEXÃO TCP REQUEST HTTP 1.1

cliente servidor CONEXÃO TCP REQUEST REQUEST #2 REQUEST #3 Keep-Alive

cliente servidor cliente servidor cliente servidor TCP HANDSHAKE TCP HANDSHAKE TCP HANDSHAKE REQUEST REQUEST REQUEST REQUEST #2 REQUEST #2 REQUEST #2 REQUEST #3 REQUEST #3 REQUEST #3 cliente servidor cliente servidor cliente servidor TCP HANDSHAKE TCP HANDSHAKE TCP HANDSHAKE REQUEST REQUEST REQUEST REQUEST #2 REQUEST #2 REQUEST #2 REQUEST #3 REQUEST #3 REQUEST #3 de 4 a 8 conexões

otimizações web

otimizações web diminuir requests

otimizações web diminuir requests diminuir tráfego

otimizações web diminuir requests diminuir tráfego paralelizar requests

otimizações web diminuir requests JUNTAR CSS E JS SPRITES INLINE DE RECURSOS diminuir tráfego paralelizar requests

otimizações web diminuir requests diminuir tráfego JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES paralelizar requests

otimizações web diminuir requests diminuir tráfego paralelizar requests JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs

o fantástico mundo do HTTP/2 (e do SPDY)

GET / HTTP/1.1 Host: www.caelum.com.br http 1.1 HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 Content- Language: pt- br Date: Thu, 03 Apr 2015 18:37:18 GMT Cache- Control: private <!DOCTYPE html><html><head><title>caelum</title> <meta name=viewport content=width=device- width> <meta name=description content="a Caelum tem os cursos de Java, Android, Scrum, Rails,.NET, HTML e CSS mais reconhecidos no mercado"><style>

GET / HTTP/1.1 Host: www.caelum.com.br http 1.1 Accept- Encoding: gzip HTTP/1.1 200 OK Content- Type: text/html; charset=utf- 8 Content- Language: pt- br Date: Thu, 03 Apr 2015 18:37:18 GMT Cache- Control: private Content- Encoding: gzip Vary: Accept- Encoding??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su? L??!???ӵm?_?\{-??bՓ?u??6?1,W??N?C.?0?f*???BV?????!#m? x???l? Q????U?.?MZ 跘?M?JN_?I??RNN???}Y??????cM?<?T?l GZIP U????8?Π???id?c?8)E8??%:?$D*ⰀⰁⰂⰃⰄⰅⰆⰇ?????$4???j?F? y\??fd⒙hk?x?-?$???ȉȉ??????????oއކޅބރނށހ??? R2[??O?;s ))

http 2.0 0101010101010101010101 010101010101 0101010101010 101010101010 BINÁRIO 0101010101010??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su? L??!???ӵm?_?\{-??bՓ?u??6?1,W??N?C.?0?f*???BV?????!#m? x???l? Q????U?.?MZ 跘?M?JN_?I??RNN???}Y??????cM?<?T?l GZIP U????8?Π???id?c?8)E8??%:?$D*ⰀⰁⰂⰃⰄⰅⰆⰇ?????$4???j?F? y\??fd⒙hk?x?-?$???ȉȉ??????????oއކޅބރނށހ??? R2[??O?;s ))

http 2.0?c?8)E8??%:?$?T?%.?JI?;1?R,l?T?%.?JI?;1?R?c?8)E8??%:?$ BINÁRIO HPACK??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su? L??!???ӵm?_?\{-??bՓ?u??6?1,W??N?C.?0?f*???BV?????!#m? x???l? Q????U?.?MZ 跘?M?JN_?I??RNN???}Y??????cM?<?T?l GZIP U????8?Π???id?c?8)E8??%:?$D*ⰀⰁⰂⰃⰄⰅⰆⰇ?????$4???j?F? y\??fd⒙hk?x?-?$???ȉȉ??????????oއކޅބރނށހ??? R2[??O?;s ))

http 2.0???????????????????????????????? BINÁRIO HPACK TLS?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? GZIP TLS???????????????????????????????????????????????????????????????????????????????????????????????????????????????????

HEADER BINÁRIO GZIP / HPACK TLS*

cliente servidor HTTP 1.1 com Keep-Alive

cliente servidor HTTP 1.1 com Pipelining*

cliente servidor... Head of Line Blocking... HTTP 1.1 com Pipelining*

cliente servidor HTTP 2.0 multiplexing

multiplexing 1 CONEXÃO TCP ASSÍNCRONO

:method: GET http 1.1 :path: / Host: www.caelum.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept- Encoding: gzip User- Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :method: GET :path: /style.css Host: www.caelum.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept- Encoding: gzip User- Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28

:method: GET http 2.0 :path: / Host: www.caelum.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept- Encoding: gzip User- Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :path: /style.css

:method: GET http 2.0 :path: / Host: www.caelum.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept- Encoding: gzip User- Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :path: /style.css :path: /main.js :path: /imagem.jpg Host: images.caelum.com.br

header tables MENOS BYTES REQUEST e RESPONSE STATEFUL

inline diminuir requests priorizar conteúdo

<!DOCTYPE html> <html> <head> <style> /* estilo para o ATF */ </style> <script> /* javascript importante */ </script> /* javascript pra depois */ <script src="secundario.js" async></script> </head> <body>... </body> </html> priorizar conteúdo

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="estilo.css"> <script src="app.js" async></script> </head> <body> <img src="foto.jpg">... <script src="jquery.js"></script> <script src="plugin.js"></script> </body> </html> priorizar conteúdo

index.html priorizar conteúdo

index.html estilo.css priorizar conteúdo

index.html estilo.css app.js priorizar conteúdo

index.html estilo.css app.js jquery.js priorizar conteúdo

index.html estilo.css app.js jquery.js foto.jpg priorizar conteúdo

index.html estilo.css app.js jquery.js foto.jpg plugin.js priorizar conteúdo

index.html estilo.css app.js jquery.js foto.jpg logo.png plugin.js priorizar conteúdo

index.html 12 estilo.css app.js jquery.js foto.jpg logo.png plugin.js priorizar conteúdo

index.html 12 8 estilo.css app.js jquery.js foto.jpg logo.png plugin.js priorizar conteúdo

index.html 12 8 8 estilo.css app.js jquery.js foto.jpg logo.png plugin.js priorizar conteúdo

index.html 12 8 8 4 estilo.css app.js jquery.js foto.jpg logo.png plugin.js priorizar conteúdo

index.html 12 8 8 4 estilo.css app.js jquery.js foto.jpg 8 logo.png plugin.js priorizar conteúdo

index.html 12 8 8 4 estilo.css app.js jquery.js foto.jpg 4 8 logo.png plugin.js priorizar conteúdo

cliente servidor index.html priorizar conteúdo

cliente servidor index.html estilo.css priorizar conteúdo

cliente servidor index.html estilo.css app.js priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js plugin.js priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js plugin.js estilo.css priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js plugin.js estilo.css jquery.js priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js plugin.js estilo.css jquery.js app.js priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js plugin.js estilo.css jquery.js app.js plugin.js priorizar conteúdo

cliente servidor index.html estilo.css app.js foto.jpg jquery.js plugin.js estilo.css jquery.js app.js plugin.js foto.jpg priorizar conteúdo

cliente servidor index.html

cliente servidor index.html espera

cliente servidor index.html espera index.html bloqueante

cliente servidor index.html Server Push

cliente servidor index.html estilo.css jquery.js app.js plugin.js foto.jpg Server Push

cliente servidor index.html index.html style.css icone.png cliente servidor index.html index.html style.css icone.png Server Push Cancelável

server push PRIORIZAÇÃO CANCELÁVEL CACHEÁVEL

http 2

BINÁRIO http 2

COMPRESSÃO BINÁRIO http 2

COMPRESSÃO CRIPTOGRAFIA BINÁRIO http 2

COMPRESSÃO MULTIPLEXING BINÁRIO CRIPTOGRAFIA http 2

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO http 2

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2 +PERFORMANCE

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2 +PERFORMANCE +MOBILE

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2 +PERFORMANCE +FÁCIL +MOBILE

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2 +PERFORMANCE +FÁCIL +MOBILE +COMPATÍVEL

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2 +PERFORMANCE +FÁCIL +LEVE +MOBILE +COMPATÍVEL

COMPRESSÃO MULTIPLEXING CRIPTOGRAFIA PRIORIZAÇÃO BINÁRIO SERVER PUSH http 2 +PERFORMANCE +FÁCIL +LEVE +MOBILE +COMPATÍVEL +SEGURO

otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS, CSS, HTML COMPRESSÃO DE IMAGENS

otimizações web http2 diminuir tráfego otimizar renderização CACHE MINIFICAÇÃO JS, CSS, HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE

otimizações web http2 diminuir tráfego otimizar renderização diminuir latência CACHE MINIFICAÇÃO JS, CSS, HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE CDNs QUIC

USE HTTP/2 HOJE (ou SPDY)

obrigado! @sergio_caelum

links adicionais: The Effect of Network and Infrastructural Variables on SPDY's Performance. Livro High Performance Browser Networking Especificação HTTP2 http://daniel.haxx.se/http2/