HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes

rumo ao

HTTP 2.0o que vem por aí e o que você pode utilizar já com

SPDY

Sérgio Lopes

@sergio_caelum sergiolopes.org

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>





TEXTO

REQUEST

RESPONSE





REQUEST

RESPONSE... ESPERA ...





MÉTODO E URL

STATUS

RESPOSTA





HEADERS

HEADERS





httptexto

request > espera > responseheaders

cliente servidor

cliente servidor

HTTP 1.1

CONEXÃO TCP

REQUEST

REQUEST

CONEXÃO TCP

cliente servidor

Keep-Alive

REQUEST

REQUEST #2

REQUEST #3

CONEXÃO TCP

cliente servidor

TCP HANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCP HANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCP HANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCP HANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCP HANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCP HANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

de 4 a 8 conexões

otimizações web

otimizações webdiminuir requests


diminuir tráfego


diminuir tráfego

paralelizar requests

otimizações webJUNTAR CSS E JS SPRITES INLINE DE RECURSOS

diminuir requests

diminuir tráfego



GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES

diminuir requests

diminuir tráfego




MÚLTIPLOS HOSTNAMES CDNs

diminuir requests

diminuir tráfego


o fantástico mundo do

HTTP 2.0 (e do SPDY)


HTTP/1.1 200 OK Content-‐Type: text/html; charset=utf-‐8 Content-‐Language: pt-‐br Date: Thu, 03 Apr 2014 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>

http 1.1

GET / HTTP/1.1 Host: www.caelum.com.br Accept-‐Encoding: gzip

HTTP/1.1 200 OK Content-‐Type: text/html; charset=utf-‐8 Content-‐Language: pt-‐br Date: Thu, 03 Apr 2014 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 U????8?Π???id?c?8)E8??%:?$D*ⰀⰁⰂⰃⰄⰅⰆⰇⰈⰉⰊⰋⰌⰍⰎⰏⰐⰑⰒⰓⰔⰕⰖⰗⰘⰙⰚⰛⰜⰝⰞⰟⰠⰡⰢⰣⰤⰥⰦⰧⰨⰩⰪⰫⰬⰭⰮⰰⰱⰲⰳⰴⰵⰶⰷⰸⰹⰺⰻⰼⰽⰾⰿⱀⱁⱂⱃⱄⱅⱆⱇⱈⱉⱊⱋⱌⱍⱎⱏⱐⱑⱒⱓⱔⱕⱖⱗⱘⱙⱚⱛⱜⱝⱞ?????$4???j?F?

((R2[??O?;s???ޱޥޤޣޢޡޠޟޞޝޜޛޚޙޘޗޖޕޔޓޒޑސޏގލތދފމވއކޅބރނށހy\??Fd⒙HK?x?-‐?$???ȈȈ??????????O

http 1.1

GZIP

0101010101010101010101

010101010101 0101010101010 101010101010 0101010101010





http 2.0

BINÁRIO

GZIP

?c?8)E8??%:?$

?T?%.?JI?;1?R ,l?T?%.?JI?;1?R ?c?8)E8??%:?$





http 2.0

BINÁRIO HPACK

GZIP

?????????

??????? ???????? ????????

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

http 2.0

BINÁRIO HPACK

GZIP

SSL

SSL

HEADER BINÁRIO GZIP / HPACK

SSL

cliente servidor

HTTP 1.1 com Keep-Alive

cliente servidor

HTTP 1.1 com Pipelining*

cliente servidor

HTTP 1.1 com pipelining*

HOL Blocking...

...

cliente servidor

HTTP 2.0 multiplexing

multiplexing

1 CONEXÃO TCP ASSÍNCRONO




diminuir requests

diminuir tráfego


:method: GET :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

http 1.1


:path: /style.css

http 2.0


:path: /style.css

:path: /main.js

:path: /imagem.jpg Host: images.caelum.com.br

http 2.0

header tables

MENOS BYTES REQUEST e RESPONSE

STATEFUL



diminuir requests

diminuir tráfego



inlinediminuir requests

priorizar conteúdo

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>

index.html

main.js

style.css

priorizar conteúdo

cliente servidor

index.html

main.js

style.css

priorizar conteúdo

cliente servidor

1

5

3

index.html

main.js

style.css

index.html blocante

cliente servidor

espera

cliente servidor

index.html

style.css

index.html

icone.png

Server Push

cliente servidor

index.html

style.css

index.html

icone.png

Server Push

style.css

icone.png

cliente servidor

index.html

style.css

index.html

icone.png

cliente servidor

index.html

style.css

index.html

icone.png

Server Push cancelável

server push

PRIORIZAÇÃO CANCELÁVEL CACHEÁVEL



diminuir requests

diminuir tráfego



http 2

http 2BINÁRIO

http 2

COMPRESSÃO

BINÁRIO

http 2

COMPRESSÃOCRIPTOGRAFIA

BINÁRIO

http 2


MULTIPLEXING

BINÁRIO

http 2


MULTIPLEXINGPRIORIZAÇÃO

BINÁRIO

http 2


MULTIPLEXING

SERVER PUSHPRIORIZAÇÃO

BINÁRIO

http 2


MULTIPLEXING


+PERFORMANCE

BINÁRIO

http 2


MULTIPLEXING


+MOBILE+PERFORMANCE

BINÁRIO

http 2


MULTIPLEXING


+MOBILE+FÁCIL+PERFORMANCE

BINÁRIO

http 2


MULTIPLEXING



BINÁRIO

+COMPATÍVEL

http 2


MULTIPLEXING



BINÁRIO

+COMPATÍVEL+LEVE

http 2


MULTIPLEXING



BINÁRIO

+COMPATÍVEL +SEGURO+LEVE

spdy

Google: até 45% mais rápido

otimizações web http2diminuir tráfego

CACHE MINIFICAÇÃO JS, CSS, HTML COMPRESSÃO DE IMAGENS



SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE

otimizar renderização



SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE

otimizar renderização

CDNs QUIC

diminuir latência

spdyChrome Firefox Opera IE 11 Win 8

Safari 8 iOS 8 Android 4

spdynginx NodeJS

mod_spdy Jetty

http 2Firefox 34 IE Windows 10 Preview Chrome (flag)

http 2nghttp2 NodeJSRuby Jetty

Go Microsoft

http 2Dez 2014 - Submit Standard Jan 2015 - Submit to RFC editor Fev 2015 - Publish Standard.

USE SPDY HOJE FIQUE DE OLHO NO HTTP2 DE

AMANHÃ

@sergio_caelum

obrigado!

links adicionais:● The Effect of Network and Infrastructural Variables on

SPDY's Performance.

● Livro High Performance Browser Networking

● Especificação HTTP2

http://arxiv.org/abs/1401.6508

http://chimera.labs.oreilly.com/books/1230000000545/ch12.html

http://http2.github.io/http2-spec/

HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes

Technology

Transcript of HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes