Does anyone here try to preload CSS on XF 2.1?

[rdn]

By editing helper_js_global template:

and replace
<link rel="stylesheet" href="{{ css_url($cssUrls) }}" />
with
<link rel="preload" href="{{ css_url($cssUrls) }}" as="style">

 

[Jeremy P]

You'd need both tags I'm pretty sure, the preload directive doesn't replace the stylesheet directive. Since they're likely to come one after another, I'd imagine any performance benefit would be negligible, but I haven't tested to be sure. In reading the MDN documentation, it seems like it's more useful for resources that wouldn't otherwise be discovered until later in the loading process.

 

[Kerstin28]

While I can't speak about XF 2.1, I did some experiments on XF 1.5: https://xenforo.com/community/threads/http-2-server-push.158923/

I set up preload with HTTP/2 server push, the latter being (theoretically) faster than just preload. The result was: no measurable improvement. I wouldn't bother with it in the standard use case.

 

[rdn]

The result was: no measurable improvement.

It's very obvious improvement when you run on https://webpagetest.org .

 

[Kerstin28]

I did that and no, the page loading time did not improve.

 

[metohu]

You don't need to do this, the priority of XF css loading is the highest by default.