Using media="print" and onload for faster CSS file loading?

[Selen]

I found this study suggesting that this simple trick would load CSS file faster (asynchronously).

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

From my simple tests it appears it loads the page about 10-15% faster than the regular link (without the media and onload codes). But is it safe to use; is there any drawback for Googlebot etc?

I know there is also a similar:

<link rel="preload" href="/path/to/my.css" as="style">

but it's not supported in Firefox and others, so this code seems to cover all browsers and do the job.

Reference: filamentgroup.com/lab/load-css-simpler/

[JorgeV]

Hello-

You can also use the "push" feature of HTTP/2. However be sure that your server, is remembering what was sent to whom, to avoid pushing the .css files each times.

Some servers can also handle push hints that you can set in the header in PHP (or other language), in that case you can handle the "already sent" yourself.