tl;dr: We should offer a simple solution for async loading stylesheets at a low-priority. Something in the vein of
<link async> or
The Filament Group recently posted a pattern for loading CSS asynchronously, leveraging a workaround setting a
media attribute to
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
link[rel=preload] exists for achieving a similar pattern (toggle
rel once loaded vs
media), it fetches files early at a higher perceived priority. This can have the downside of de-prioritizing other critical requests.
An alternative to the
<link rel="stylesheet" href="/path/to/my.css" async>
- Modify the behavior of Priority Hints such that
<link rel="stylesheet" href="/path/to/my.css" importance="low">both signaled low-network priority and that the link should be non-render blocking
Starting this discussion to explore whether this is overall problem is a pattern we would like to better solve in the web platform and if so, what the shape of a solution should be.