HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
•
13 j'aime•2,500 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Similaire à HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes (20)
Plus de Caelum
Plus de Caelum (20)
Dernier
Dernier (20)
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
- 1. rumo ao HTTP 2.0 o que vem por aí e o que você pode utilizar já com SPDY
- 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 HTTP 1.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. otimizações web
- 18. otimizações web JUNTAR CSS E JS SPRITES INLINE DE RECURSOS diminuir requests diminuir tráfego paralelizar requests
- 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. 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. o fantástico mundo do 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. SSL
- 28. ????????? ??????? ???????? ???????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????? http 2.0 BINÁRIO HPACK GZIP SSL SSL
- 29. HEADER BINÁRIO GZIP / HPACK SSL
- 30. cliente servidor HTTP 1.1 com Keep-Alive
- 31. cliente servidor HTTP 1.1 com Pipelining*
- 32. cliente servidor HTTP 1.1 com Pipelining*
- 33. cliente servidor HTTP 1.1 com pipelining* HOL Blocking ... ...
- 34. cliente servidor HTTP 2.0 multiplexing
- 42. 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
- 43. 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
- 44. 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
- 45. 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
- 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 REQUEST e RESPONSE STATEFUL
- 51. 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
- 52. 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
- 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>
- 60. cliente servidor index.html style.css index.html icone.png cliente servidor index.html style.css index.html icone.png Server Push cancelável
- 62. 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
- 63. 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
- 64. http 2
- 65. http 2 BINÁRIO
- 72. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +PERFORMANCE BINÁRIO
- 76. http 2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL +SEGURO +LEVE
- 77. spdy Google: até 45% mais rápido
- 78. otimizações web http2 diminuir tráfego CACHE MINIFICAÇÃO JS,CSS,HTML COMPRESSÃO DE IMAGENS
- 79. 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
- 80. 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
- 81. spdy Chrome Firefox Opera IE 11 Win 8 Safari 8 iOS 8 Android 4
- 83. http 2 Firefox 34 IE Windows 10 Preview Chrome (flag)
- 85. http 2 Dez 2014 -Submit Standard Jan 2015 -Submit to RFC editor Fev 2015 -Publish Standard.
- 86. USE SPDY HOJE FIQUE DE OLHO NO HTTP2 DE AMANHÃ
- 88. links adicionais: ● The Effect of Network and Infrastructural Variables on SPDY's Performance. ● Livro High Performance Browser Networking ● Especificação HTTP2