Downloaded 49 times
![$ 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/frontinmaceio2014-spdy-http2-sergio-141115141729-conversion-gate01/85/HTTP-2-SPDY-e-Otimizacoes-Web-Front-In-Maceio-2014-Sergio-Lopes-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/frontinmaceio2014-spdy-http2-sergio-141115141729-conversion-gate01/85/HTTP-2-SPDY-e-Otimizacoes-Web-Front-In-Maceio-2014-Sergio-Lopes-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/frontinmaceio2014-spdy-http2-sergio-141115141729-conversion-gate01/85/HTTP-2-SPDY-e-Otimizacoes-Web-Front-In-Maceio-2014-Sergio-Lopes-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/frontinmaceio2014-spdy-http2-sergio-141115141729-conversion-gate01/85/HTTP-2-SPDY-e-Otimizacoes-Web-Front-In-Maceio-2014-Sergio-Lopes-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/frontinmaceio2014-spdy-http2-sergio-141115141729-conversion-gate01/85/HTTP-2-SPDY-e-Otimizacoes-Web-Front-In-Maceio-2014-Sergio-Lopes-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/frontinmaceio2014-spdy-http2-sergio-141115141729-conversion-gate01/85/HTTP-2-SPDY-e-Otimizacoes-Web-Front-In-Maceio-2014-Sergio-Lopes-9-320.jpg)
Uploaded byCaelum
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
The document discusses HTTP 2.0 and SPDY. Some key points include: 1. HTTP 2.0 uses a binary format instead of text and allows multiplexing requests over a single TCP connection to reduce latency. 2. Features like header compression, server push and request prioritization help optimize loading of web pages. 3. SPDY is an experimental protocol developed by Google that implements many of the same optimizations as HTTP 2.0.
![[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)
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
- 1. rumo ao HTTP 2.0 oque vem por aí e o que você pode utilizar já com SPDY
- 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.0 (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 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. 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. 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
- 27.
- 28. ????????? ??????? ???????? ???????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????? http 2.0 BINÁRIO HPACK GZIP SSL SSL
- 29. HEADER BINÁRIO GZIP /HPACK SSL
- 30. cliente servidor HTTP 1.1com Keep-Alive
- 31. cliente servidor HTTP 1.1com Pipelining*
- 32. cliente servidor HTTP 1.1com Pipelining*
- 33. cliente servidor HTTP 1.1com pipelining* HOL Blocking ... ...
- 34. cliente servidor HTTP 2.0multiplexing
- 35.
- 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. 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
- 45. 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
- 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 :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
- 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 :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
- 48. :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
- 49. :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
- 50. header tables MENOS BYTES REQUESTe RESPONSE STATEFUL
- 51. 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
- 52. 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
- 53.
- 54. 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>
- 55.
- 56.
- 57.
- 58.
- 59.
- 60. cliente servidor index.html style.css index.html icone.png clienteservidor index.html style.css index.html icone.png Server Push cancelável
- 61.
- 62. 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
- 63. 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
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃOJS,CSS,HTML COMPRESSÃO DE IMAGENS
- 79. 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
- 80. 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
- 81. spdy Chrome Firefox Opera IE 11 Win8 Safari 8 iOS 8 Android 4
- 82.
- 83. http 2 Firefox 34 IEWindows 10 Preview Chrome (flag)
- 84.
- 85. http 2 Dez 2014-Submit Standard Jan 2015 -Submit to RFC editor Fev 2015 -Publish Standard.
- 86. USE SPDY HOJE FIQUEDE OLHO NO HTTP2 DE AMANHÃ
- 87.
- 88. links adicionais: ● TheEffect of Network and Infrastructural Variables on SPDY's Performance. ● Livro High Performance Browser Networking ● Especificação HTTP2