Transferir como PDF, PPTX
![$ 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>](https://image.slidesharecdn.com/palestra-http2-mobileconf-16-9-150530170605-lva1-app6891/85/Como-o-HTTP-2-vai-mudar-sua-vida-4-320.jpg)
![$ 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](https://image.slidesharecdn.com/palestra-http2-mobileconf-16-9-150530170605-lva1-app6891/85/Como-o-HTTP-2-vai-mudar-sua-vida-5-320.jpg)
![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>](https://image.slidesharecdn.com/palestra-http2-mobileconf-16-9-150530170605-lva1-app6891/85/Como-o-HTTP-2-vai-mudar-sua-vida-6-320.jpg)
![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>](https://image.slidesharecdn.com/palestra-http2-mobileconf-16-9-150530170605-lva1-app6891/85/Como-o-HTTP-2-vai-mudar-sua-vida-7-320.jpg)
![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>](https://image.slidesharecdn.com/palestra-http2-mobileconf-16-9-150530170605-lva1-app6891/85/Como-o-HTTP-2-vai-mudar-sua-vida-8-320.jpg)
![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>](https://image.slidesharecdn.com/palestra-http2-mobileconf-16-9-150530170605-lva1-app6891/85/Como-o-HTTP-2-vai-mudar-sua-vida-9-320.jpg)
Carregado porCaelum
Como o HTTP/2 vai mudar sua vida
O documento descreve as principais diferenças entre HTTP 1.1 e HTTP 2.0. HTTP 2.0 introduz binário, multiplexação e compressão que otimizam o desempenho reduzindo tráfego de rede e latência da conexão. HTTP 2.0 permite várias requisições em paralelo em uma única conexão TCP.
![[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...](https://cdn.slidesharecdn.com/ss_thumbnails/otimizacoesclientside-frontinbh2012-sergio-120713204920-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Como o HTTP/2 vai mudar sua vida
- 1.
- 2.
- 3.
- 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. $ 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. 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. 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. 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. 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. http texto request > espera> response headers
- 11. cliente servidor cliente servidor HTTP1.1 CONEXÃO TCP REQUEST REQUEST CONEXÃO TCP
- 12. cliente servidor Keep-Alive REQUEST REQUEST #2 REQUEST#3 CONEXÃO TCP
- 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.
- 15.
- 16.
- 17.
- 18. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS diminuir requests diminuir tráfego paralelizar requests
- 19. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests
- 20. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- 21. o fantástico mundodo HTTP/2 (e do SPDY)
- 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 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> http 1.1
- 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 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 U????8?Π???id?c?8)E8??%:?$D*"?????$4???j?F? ((R2[??O?;s???ޱްޯޮޭެޫުީިާަޥޤޣޢޡޠޟޞޝޜޛޚޙޘޗޖޕޔޓޒޑސޏގލތދފމވއކޅބރނށހy??Fd⒙HK?x?-‐?$???ȈȈ??????????O http 1.1 GZIP
- 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. ?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. ????????? ??????? ???????? ???????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????? http 2.0 BINÁRIO HPACK GZIP TLS TLS
- 27. HEADER BINÁRIO GZIP /HPACK TLS*
- 28. cliente servidor HTTP 1.1com Keep-Alive
- 29. cliente servidor HTTP 1.1com Pipelining*
- 30. cliente servidor HTTP 1.1com Pipelining*
- 31. cliente servidor HTTP 1.1com Pipelining* Head of Line Blocking ... ...
- 32. cliente servidor HTTP 2.0multiplexing
- 33.
- 40. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- 41. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- 42. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- 43. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES CDNs diminuir requests diminuir tráfego paralelizar requests
- 44. :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
- 45. :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
- 46. :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
- 47. :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
- 48. header tables MENOS BYTES REQUESTe RESPONSE STATEFUL
- 49. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- 50. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- 51.
- 52. 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>
- 53. 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>
- 54. 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>
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 128 priorizar conteúdo
- 70. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 128 8 priorizar conteúdo
- 71. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 128 8 4 priorizar conteúdo
- 72. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 128 8 4 8 priorizar conteúdo
- 73. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 128 8 4 4 8 priorizar conteúdo
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106. cliente servidor index.html style.css index.html icone.png clienteservidor index.html style.css index.html icone.png Server Push Cancelável
- 107.
- 108. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- 109. otimizações web JUNTAR CSSE JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego MÚLTIPLOS HOSTNAMES CDNs paralelizar requests
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃOJS,CSS,HTML COMPRESSÃO DE IMAGENS
- 124. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃOJS,CSS,HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE otimizar renderização
- 125. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃOJS,CSS,HTML COMPRESSÃO DE IMAGENS SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE otimizar renderização CDNs QUIC diminuir latência
- 126. USE HTTP/2 HOJE (ouSPDY)
- 127.
- 128. links adicionais: ● TheEffect of Network and Infrastructural Variables on SPDY's Performance. ● Livro High Performance Browser Networking ● Especificação HTTP2 ● http://daniel.haxx.se/http2/