How do you use HTTP/2 server push in a webapp?

Question

I understand what HTTP/2 server push is from a high-level perspective. Does anybody have a concrete example what you have to do actually to use the feature on a website?

score 2 · Answer 1 · answered Sep 11 '15 at 16:47

The Jetty Project (disclaimer, I am a committer) implements HTTP/2 in Jetty 9.3.x.

It also pioneered SPDY Push first and then HTTP/2 Push, and it's actually very simple to enable HTTP/2 Push by adding a Jetty provided Servlet Filter to your web application.

As for using this feature, you can find many examples online of HTTP/2 Push, but our own website does have HTTP/2 Push enabled for a real world site (not just a tiles example).

Other servers and sites also offer HTTP/2 Push functionalities, so it's really time to move to HTTP/2 :)

score 2 · Answer 2 · edited May 23 '17 at 12:08

2

Web applications made of lots of resources are the ones posed to benefit the most, because there is more flexibility regarding when and how those resources are loaded.

The best way to see HTTP/2 Push in action is by opening the devtools' network panel in the browser (F12 or Ctrl+Shift-I in most browsers), and checking how the website loads with the browser's cache disabled. The purpose of Push is to reduce latency, and therefore you should see some requests that don't have any waiting time at all. In the figure below, those would be all the requests after the first made to the domain www.zunzun.se:

HTTP/2 push is absolutely awesome for not having to create resource bundles, although some times they are needed anyway.

This article, which you should load with the devtools network panel open to see the concept in action, explains how HTTP/2 allows to combine RequireJS, a Javascript module loader, with AngularJS, a Javascript framework that relies heavily in modules, without having to amalgamate all your Javascript source files. Needless to say, this helps caching a lot.

If you want to see the performance effects in more detail, you can open that same article through this other URL, which uses plain HTTP/1.1 over TLS.

edited May 23 '17 at 12:08

Community

1
1

answered Sep 11 '15 at 18:12

dsign

12,340
6
59
82

I'm not sure if I made myself clear but I understand what HTTP/2 push is. The question is how to use it in practice. The mentioned article is very interesting though, +1 :) – MartyIX Sep 11 '15 at 18:47
Thank you @MartyIX, I wrote that article. To be honest, your question is very important for me. What do you mean by "how to use it in practice" ;-) ? More particularly, what are the particular problems that you see? Workflow integration? The need to write down somewhere what to push when? Something else? – dsign Sep 11 '15 at 18:52
Let's say I have an Angular webapp and I want to improve performance of the app with HTTP/2 server push. Can I do that with Apache? How do I decide which resources to push? How many resources should I push? – MartyIX Sep 11 '15 at 18:59
AFAIK, right now you can't use Apache. Some unknown time into the future, probably yes. Here is a thing though: most web servers, and specially Apache and NginX, are tuned to handle loads and loads of concurrent users. That goal [apparently doesn't play too well with HTTP/2's cool features](http://stackoverflow.com/questions/32470957/http-2-priority-dependency-test-with-jetty#answer-32495818). My question for you is therefore, what do you value more, to serve 10000 concurrent users from one server at normal "perceived" speed for them, or a bit less, say, 100 users, twice as fast? – dsign Sep 11 '15 at 19:08

Kishorkumar Bachhav · Answer 3 · 2017-01-16T10:54:20.973

Server Push is the greatest advancement in HTTP/2 where performance is concerned. Server Push is exactly what it sounds like. We can tell the server to push content to the browser before the browser makes a request for it. So for example, when we request an HTML page, and in that page there will be calls to style sheets, or JavaScripts, or images, or something else, we can have the server push that content into the browser cache before the request is made, so once the browser renders the HTML and finds the reference to the file, it's already sitting in the cache waiting for it. E.g. In PHP you can implement Server Push as below.Pass your above the fold content as part of header.

    <?php
function push_to_browser($as, $uri) {
    header('Link: ' . $uri . '; rel=preload; as=' . $as, false);
}
$assets = array(
'<//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,700,900>' => 'style',
    '</style-main.css>' => 'style',
'</images/healthInsurance/desktop/background_image.jpg>'=> 'image'
);
array_walk( $assets, push_to_browser);
?>

score 0 · Answer 4 · answered Jan 06 '17 at 03:48

First of all, your web server need to support it. Second, you need to tell server what files to push by adding http headers:

for example, this will tell the server to push bg.jpg and analytics.js:

link:</images/bg.jpg>; rel=preload; as=image,</analytics.js>; rel=preload; as=script

How do you use HTTP/2 server push in a webapp?

4 Answers4