rel=preload for stylesheet isn't applying the styles once downloaded
What do you think about this approach:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
You need to have 2 lines for each one with rel=stylesheet and one with rel=preload. As preload is just fetching it and not applying.
However you will probably not notice much performance improvement as it hits one line just before the other.
The better option is to inline the css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here).
Technically, you can specify multiple values for rel attribute. Something like this should do the job, without writing 2 lines per stylesheet:
<link rel="preload stylesheet" href="/css/styles.css" as="style" type="text/css" crossorigin="anonymous">You can verify this using Lighthouse. This was result on my browser (there was no chained request as stylesheet was preloaded, and was properly applied):
