Nat Taylor — Blog, AI, Product Management & Tinkering

LiteSpeed & HTTP/2 Server Push

Published on Jul 20, 2020.

HTTP/2 Server Push can drastically reduce the performance penalty of waiting for the browser to parse the document to find additional assets it needs like stylesheets, scripts and images and then waiting for subsequent requests to finish.

Server Push can be controlled by including a link header in the response. For example, the following tells the browser to expect the style.css and scripts.js to be pushed by the server after the originating request.

link: </wp-content/themes/ntdc/style.css>; rel=preload; as=style, </wp-content/themes/ntdc/scripts.js>; rel=preload; as=script,

In my case, requests to my server always incur a time-to-first-byte wait of around 35ms even for static assets, but pushed assets add only about 3.5ms.

Better yet, the client starts downloading them immediately. The result is subtle, but significant. Below you can see that the style.css for push.html finishes 35ms earlier than the non-push version.

nghttp -ans https://nattaylor.com/labs/css/push.html
id responseEnd requestStart process code size request path
13 +52.60ms +193us 52.40ms 200 4K /labs/css/push.html
2 +52.67ms * +49.78ms 2.89ms 200 633 /labs/css/style.css
nghttp -ans https://nattaylor.com/labs/css/stylesheet.html
id responseEnd requestStart process code size request path
13 +44.61ms +193us 44.41ms 200 4K /labs/css/stylesheet.html
15 +88.58ms +44.64ms 43.95ms 200 633 /labs/css/style.css

For WordPress, add something like the following to functions.php

add_action('send_headers', function () {
	$base = parse_url(get_stylesheet_directory_uri())['path'];
	header("Link: <$base/style.css>; rel=preload; as=style, <$base/scripts.js>; rel=preload; as=script,");
});