HTTP/2 is here, now let's make it easy

http/2 is here, let’s optimize now let’s make it easy
Rebecca Murphey / DotJS 2015 / Paris

http/2 one connection   per host* handles   all requests
server push   (no more inlining!) prioritization https required   by browsers * through connection coalescing, hosts that resolve to the same IP can share the same connection

Designed for the web that is,   not for the
web that was.

There’s a lot we still don’t know about how HTTP/2
should work in the real world.

How will servers support HTTP/2?

How a web server determines what a   client needs
before the client knows  is seriously challenging, especially for   general-purpose web servers which need to allow site owners to tune certain aspects for best performance and reliability. The heuristics for determining what to push vary. https://caddyserver.com/blog/implementing-http2-isnt-trivial

link: </light_button.png>;   rel=preload</light_logo.png>;   rel=preload</poweredby.png>;   rel=preload</favicon.ico>;   rel=preload

How will servers support HTTP/2?

How will we visualize HTTP/2 connections?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>separate</title> </head> <body>
<script> setTimeout(function () { var s = document.createElement('script'); s.src = "/common/libs/combined.js"; document.body.appendChild(s); }, 200); </script>  </body> </html> /index.html?push=/common/libs/combined.js

push starts: 96ms all data sent: 366ms push accepted: 500ms

$ npm install chrome-http2-log-parser

How will we visualize HTTP/2 connections?

How will my app work with HTTP/2?

grunt build:http2 grunt build:http1

How should my app work with HTTP/2?

Why does all of this matter?

Members of the front-end community are among the most likely
to champion HTTP/2. The spec may be ﬁnalized, but HTTP/2 is incomplete without a developer ecosystem to support it.

bit.ly/http2-make-it-easy @rmurphey

HTTP/2 is here, now let's make it easy

HTTP/2 is here, now let's make it easy

Rebecca Murphey

More Decks by Rebecca Murphey

Other Decks in Technology

Featured

Transcript

http/2 is here, let’s optimize now let’s make it easy

http/2 one connection   per host* handles   all requests

Designed for the web that is,   not for the

There’s a lot we still don’t know about how HTTP/2

How will servers support HTTP/2?

How a web server determines what a   client needs

link: </light_button.png>;   rel=preload</light_logo.png>;   rel=preload</poweredby.png>;   rel=preload</favicon.ico>;   rel=preload

How will servers support HTTP/2?

How will we visualize HTTP/2 connections?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>separate</title> </head> <body>

push starts: 96ms all data sent: 366ms push accepted: 500ms

$ npm install chrome-http2-log-parser

How will we visualize HTTP/2 connections?

How will my app work with HTTP/2?

grunt build:http2 grunt build:http1

How should my app work with HTTP/2?

Why does all of this matter?

Members of the front-end community are among the most likely

bit.ly/http2-make-it-easy @rmurphey