HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
•
13 recomendaciones•2,500 vistas
Palestra HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Similar a HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes (20)
Más de Caelum
Más de Caelum (20)
Último
Último (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