LiteSpeed & HTTP/2 Server Push
Published on .
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,Code language: Python (python)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,");
});Code language: Python (python)