<link rel="stylesheet"> blocks rendering, it sometimes makes sense to defer loading a portion of the CSS code of a particular page in order to improve rendering performance (especially on mobile). This can be achieved by splitting the CSS code into “critical CSS” which is inlined in the
<head> and non-critical CSS which is loaded asynchronously.
There is no standard way of performing this async load (afaik) and multiple non-optimal approaches have emerged:
<link>to the page but temporarily sets its
.mediaproperty to a “random” non-matching value and only sets it to
"all"after the async load has finished.
Another approach is to dynamically inject the
<link>from within a
requestAnimationFramecallback in order to make sure that the style sheet is loaded only after the first paint has occurred.
Both methods have their drawbacks and I’m not sure what the level of browser support is for them. Maybe we should have a standard method for this…