XF 1.5 HTTP/2 server push

Kerstin28

Active member
I'm considering to utilize HTTP/2 server push to improve the XenForo loading time. The idea is to minimize the loading time of render-blocking CSS and JS resources. While HTTP/2 is mostly application agnostic, the webserver requires application-specific hints in the form of "Link" headers to utilize the push feature.

Some background on HTTP/2 server push: https://dexecure.com/blog/http2-push-vs-http-preload/

A webserver with support for HTTP/2 server push will parse "Link" headers with "rel=preload" to select the resources to be pushed to the browser. Without HTTP/2 support on client or server side, this will degrade gracefully into HTTP/1.1 preload or be ignored altogether if neither push nor preload are supported.

Setting the Link header

One way to set "Link" headers is to configure them statically via .htaccess or the webserver configuration. This would allow to push jQuery (if self-hosted), but here the list ends. Other JS resources come with a version in the query string, so a static configuration must be updated whenever the version changes. Without automation this is begging to become inconsistent.
Question: what is the query string version based on? Is there a way to retrieve the version string automatically?

Apart from versioning, XenForo comes with a clever approach to include CSS and JS resources only when required by the rendered page. CSS resources are generated on demand. Ideally, XenForo (or an add-on) would generate "Link" headers when compiling the list of resources to be included. This can be easily achieved with PHP (see https://blog.cloudflare.com/using-http-2-server-push-with-php/), as long as it happens before the rendered page is printed.
Question: is this possible with the XenForo architecture? Can you provide me a pointer where an add-on would need to hook in?

Feel free to add your thoughts, if I overlooked something.
I'm using Apache 2.4 and XF 1.5, but this thread is not limited to those. Answers related to XF 2 are welcome.
 
  • Like
Reactions: rdn
Nevermind the questions in my previous post. I ran a couple of experiments and conclude: HTTP/2 server push is not worth it for a reasonably optimized XenForo site.

I set up "Link" headers for all CSS and JS resources. When configured correctly, Chrome shows in the DevTools network panel "Push / Other" as initiator and prioritizes fetching those resources. However, Chrome is already bloody fast when fetching render-blocking resources without server push. None of the tests I tried showed a clear benefit. That includes Chrome Lighthouse, Pagespeed Insight, GTMetrix.com and WebPageTest.org. The latter shows some technical details about HTTP/2 streams, which gives me confidence that server push was set up correctly:
192278

Even when throttling the connection in Chrome Lighthouse, network jitter had a bigger effect on the numbers than server push. All tests were based on Chrome. My Firefox doesn't seem to support server push.
 
  • Like
Reactions: rdn
Top Bottom