Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
rumo ao
HTTP 2.0
o 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  i...
$  telnet  www.caelum.com.br  80  
Trying  64.233.171.121...  
Connected  to  ghs.googlehosted.com.  
Escape  character  i...
REQUEST
RESPONSE
$  telnet  www.caelum.com.br  80  
Trying  64.233.171.121...  
Connected  to  ghs.googlehosted.com.  
Esc...
REQUEST
RESPONSE
...ESPERA...
$  telnet  www.caelum.com.br  80  
Trying  64.233.171.121...  
Connected  to  ghs.googlehost...
MÉTODO E URL
STATUS
RESPOSTA
$  telnet  www.caelum.com.br  80  
Trying  64.233.171.121...  
Connected  to  ghs.googlehoste...
HEADERS
HEADERS
$  telnet  www.caelum.com.br  80  
Trying  64.233.171.121...  
Connected  to  ghs.googlehosted.com.  
Esca...
http
texto
request > espera > response
headers
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
...
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
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
diminuir
requests
diminuir
tráfego
paralelizar
requests
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
otimizações web
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.0
(e do SPDY)
GET  /  HTTP/1.1  
Host:  www.caelum.com.br  
HTTP/1.1  200  OK  
Content-­‐Type:  text/html;  charset=utf-­‐8  
Content-­...
GET  /  HTTP/1.1  
Host:  www.caelum.com.br  
Accept-­‐Encoding:  gzip  
HTTP/1.1  200  OK  
Content-­‐Type:  text/html;  ...
0101010101010101010101  
010101010101  
0101010101010  
101010101010  
0101010101010  
??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?u...
?c?8)E8??%:?$  
?T?%.?JI?;1?R  
,l?T?%.?JI?;1?R  
?c?8)E8??%:?$  
??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su?
L...
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*
cliente servidor
HTTP 1.1 com pipelining*
HOL Blocking
...
...
cliente servidor
HTTP 2.0 multiplexing
multiplexing
1 CONEXÃO TCP
ASSÍNCRONO
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
CDNs
...
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
CDNs
...
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
CDNs
...
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
CDNs
...
:method:  GET  
:path:  /  
Host:  www.caelum.com.br  
Accept:  text/html,application/xhtml+xml;q=0.9,image/jpeg  
Accept-...
:method:  GET  
:path:  /  
Host:  www.caelum.com.br  
Accept:  text/html,application/xhtml+xml;q=0.9,image/jpeg  
Accept-...
:method:  GET  
:path:  /  
Host:  www.caelum.com.br  
Accept:  text/html,application/xhtml+xml;q=0.9,image/jpeg  
Accept-...
:method:  GET  
:path:  /  
Host:  www.caelum.com.br  
Accept:  text/html,application/xhtml+xml;q=0.9,image/jpeg  
Accept-...
header tables
MENOS BYTES
REQUEST e RESPONSE
STATEFUL
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
inline
diminuir requests
priorizar conteúdo
priorizar conteúdo
<!DOCTYPE  html>  
<html>  
<head>  
        <style>  
                /*  estilo  para  o  ATF  */  
 ...
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
PRIORIZAÇÃO
CANCELÁVEL
CACHEÁVEL
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
otimizações web
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
http 2
http 2
BINÁRIO
http 2
COMPRESSÃO
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
PRIORIZAÇÃO
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+PERFORMANCE
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+PERFORMANCE
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+FÁCIL+PERFORMANCE
BINÁRIO
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+FÁCIL+PERFORMANCE
BINÁRIO
+COMPATÍVEL
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+FÁCIL+PERFORMANCE
BINÁRIO
+COMPATÍVEL
+LEVE
http 2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+FÁCIL+PERFORMANCE
BINÁRIO
+COMPATÍVEL +SEGURO...
spdy
Google:
até 45% mais rápido
otimizações web http2
diminuir
tráfego
CACHE
MINIFICAÇÃO JS,CSS,HTML
COMPRESSÃO DE IMAGENS
otimizações web http2
diminuir
tráfego
CACHE
MINIFICAÇÃO JS,CSS,HTML
COMPRESSÃO DE IMAGENS
SERVER PUSH / HINT
CRITICAL PAT...
otimizações web http2
diminuir
tráfego
CACHE
MINIFICAÇÃO JS,CSS,HTML
COMPRESSÃO DE IMAGENS
SERVER PUSH / HINT
CRITICAL PAT...
spdy
Chrome
Firefox
Opera
IE 11 Win 8
Safari 8
iOS 8
Android 4
spdy
nginx NodeJS
mod_spdy Jetty
http 2
Firefox 34
IE Windows 10 Preview
Chrome (flag)
http 2
nghttp2 NodeJS
Ruby
Jetty
Go
Microsoft
http 2
Dez 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 Br...
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Upcoming SlideShare
Loading in …5
×

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

2,206 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. rumo ao HTTP 2.0 o que vem por aí e o que você pode utilizar já com SPDY
  2. 2. Sérgio Lopes @sergio_caelum sergiolopes.org
  3. 3. review HTTP em 5 slides
  4. 4. $  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>
  5. 5. $  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
  6. 6. REQUEST RESPONSE $  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>
  7. 7. REQUEST RESPONSE ...ESPERA... $  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>
  8. 8. MÉTODO E URL STATUS 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   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>
  9. 9. HEADERS HEADERS $  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>
  10. 10. http texto request > espera > response headers
  11. 11. cliente servidor cliente servidor HTTP 1.1 CONEXÃO TCP REQUEST REQUEST CONEXÃO TCP
  12. 12. cliente servidor Keep-Alive REQUEST REQUEST #2 REQUEST #3 CONEXÃO TCP
  13. 13. 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
  14. 14. otimizações web
  15. 15. otimizações web diminuir requests
  16. 16. otimizações web diminuir requests diminuir tráfego
  17. 17. otimizações web diminuir requests diminuir tráfego paralelizar requests
  18. 18. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS diminuir requests diminuir tráfego paralelizar requests
  19. 19. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests
  20. 20. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
  21. 21. o fantástico mundo do HTTP 2.0 (e do SPDY)
  22. 22. GET  /  HTTP/1.1   Host:  www.caelum.com.br   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
  23. 23. 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
  24. 24. 0101010101010101010101   010101010101   0101010101010   101010101010   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   U????8?Π???id?c?8)E8??%:?$D*"?????$4???j?F?   ((R2[??O?;s???‫ޱްޯޮޭެޫުީިާަޥޤޣޢޡޠޟޞޝޜޛޚޙޘޗޖޕޔޓޒޑސޏގލތދފމވއކޅބރނށހ‬y??Fd⒙HK?x?-­‐?$???ȈȈ??????????O http 2.0 BINÁRIO GZIP
  25. 25. ?c?8)E8??%:?$   ?T?%.?JI?;1?R   ,l?T?%.?JI?;1?R   ?c?8)E8??%:?$   ??[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 2.0 BINÁRIO HPACK GZIP
  26. 26. SSL
  27. 27. ?????????   ???????   ????????   ????????   ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????? http 2.0 BINÁRIO HPACK GZIP SSL SSL
  28. 28. HEADER BINÁRIO GZIP / HPACK SSL
  29. 29. cliente servidor HTTP 1.1 com Keep-Alive
  30. 30. cliente servidor HTTP 1.1 com Pipelining*
  31. 31. cliente servidor HTTP 1.1 com Pipelining*
  32. 32. cliente servidor HTTP 1.1 com pipelining* HOL Blocking ... ...
  33. 33. cliente servidor HTTP 2.0 multiplexing
  34. 34. multiplexing 1 CONEXÃO TCP ASSÍNCRONO
  35. 35. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
  36. 36. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
  37. 37. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
  38. 38. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
  39. 39. :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
  40. 40. :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
  41. 41. :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   :path:  /style.css   http 2.0
  42. 42. :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   :path:  /style.css   :path:  /main.js   :path:  /imagem.jpg   Host:  images.caelum.com.br   http 2.0
  43. 43. header tables MENOS BYTES REQUEST e RESPONSE STATEFUL
  44. 44. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
  45. 45. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
  46. 46. inline diminuir requests priorizar conteúdo
  47. 47. 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>
  48. 48. index.html main.js style.css priorizar conteúdo cliente servidor
  49. 49. index.html main.js style.css priorizar conteúdo cliente servidor 1 5 3
  50. 50. index.html main.js style.css index.html blocante cliente servidor espera
  51. 51. cliente servidor index.html style.css index.html icone.png Server Push
  52. 52. cliente servidor index.html style.css index.html icone.png Server Push style.css   icone.png
  53. 53. cliente servidor index.html   style.css index.html icone.png cliente servidor index.html style.css   index.html icone.png Server Push cancelável
  54. 54. server push PRIORIZAÇÃO CANCELÁVEL CACHEÁVEL
  55. 55. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
  56. 56. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
  57. 57. http 2
  58. 58. http 2 BINÁRIO
  59. 59. http 2 COMPRESSÃO BINÁRIO
  60. 60. http 2 COMPRESSÃO CRIPTOGRAFIA BINÁRIO
  61. 61. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING BINÁRIO
  62. 62. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING PRIORIZAÇÃO BINÁRIO
  63. 63. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO BINÁRIO
  64. 64. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +PERFORMANCE BINÁRIO
  65. 65. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +PERFORMANCE BINÁRIO
  66. 66. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO
  67. 67. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL
  68. 68. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL +LEVE
  69. 69. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL +SEGURO +LEVE
  70. 70. spdy Google: até 45% mais rápido
  71. 71. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS
  72. 72. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE otimizar renderização
  73. 73. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE otimizar renderização CDNs QUIC diminuir latência
  74. 74. spdy Chrome Firefox Opera IE 11 Win 8 Safari 8 iOS 8 Android 4
  75. 75. spdy nginx NodeJS mod_spdy Jetty
  76. 76. http 2 Firefox 34 IE Windows 10 Preview Chrome (flag)
  77. 77. http 2 nghttp2 NodeJS Ruby Jetty Go Microsoft
  78. 78. http 2 Dez 2014 -Submit Standard Jan 2015 -Submit to RFC editor Fev 2015 -Publish Standard.
  79. 79. USE SPDY HOJE FIQUE DE OLHO NO HTTP2 DE AMANHÃ
  80. 80. @sergio_caelum obrigado!
  81. 81. links adicionais: ● The Effect of Network and Infrastructural Variables on SPDY's Performance. ● Livro High Performance Browser Networking ● Especificação HTTP2

×