CODEWITHSUNDEEP
http2
MartyIX
MartyIX

Reputation: 28686

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

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?

Upvotes: 2

Views: 2646

Answers (4)

Kishorkumar Bachhav
Kishorkumar Bachhav

Reputation: 11

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);
?>

Upvotes: 1

user7180
user7180

Reputation: 4096

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

Upvotes: 0

dsign
dsign

Reputation: 12710

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 with Push enabled

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.

Upvotes: 2

sbordet
sbordet

Reputation: 18649

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 :)

Upvotes: 2

Related Questions