In my team at Nikkei we’ve had some problems with this approach. Specifically, using this trick which was conceived by Scott Jehl:
<link rel='preload' href='/style.css' onload='this.rel="stylesheet"'>
Ideally, using this syntax, you would want a stylesheet that is in cache to be parsed and applied before rendering any of the markup that follows the
link tag, as if it were declaratively written as a conventional
<link rel='stylesheet'>. If the stylesheet is not in cache, we should proceed to render the following HTML, and then perform any necessary relayout when the stylesheet is loaded.
However, we find that the stylesheet is not guaranteed to be parsed before render if in cache, and regardless of the cache state, the moment at which the
load event fires and the
rel changes to ‘stylesheet’ can happen in the middle of the initial render, causing the browser to start the render again, and the stylesheet therefore being essentially render-blocking.
We’re experimenting with ideas such as:
<link re='preload' href='/style.css' onload='requestIdleCallback(() => this.rel="stylesheet")'>
<link re='preload' href='/style.css' onload='requestAnimationFrame(() => this.rel="stylesheet")'>
Does anyone else have any experience with this?