HTTP2 allows servers to preemptively push resources at high priority to the client by using a header:
Link: <URL>; rel=preload; as=<TYPE>
The client can also ask for resource that it knows it will need by using:
<link rel="preload" href="<URL>" as="<type>">
The performance benefits of doing this for critical resources is very promising.
Full WebPageTest results
TL;DR;
- HTTP2 push means we no longer need to concatenate all our JS/CSS together in one file! This reduces the amount of required tooling to make a great, fast web app.
- In my testing, the browser can handle smaller, individual files better than one large file. More testing needs to be done here, but the initial results are promising.
- For HTML Import resources, we no longer need to run
vulcanize
(crushes sub-imports into a single file). In testing, the latter is actually slower. Boom! - In a world of web components, authors write components in a modular way using HTML Imports, a bit of CSS/JS, and markup. Push means we can ship our code exactly as it was authored, minimizing the differences between dev and code shipped to production.
GAE supports the Link rel=preload
header! The max number of resources you can push is currently 10.
To verify resources are being pushed on production GAE:
chrome://net-internals
in Chrome.- Change the dropdown to
HTTP/2
- Reload your app URL
- Go back to
chrome://net-internals
and drill into your app.
Pushed resources will show a HTTP2_STREAM_ADOPTED_PUSH_STREAM
in the report.