Implement Async CSS

[mihaidumitrascu]

Initially created as a Performance Lab issue: ​https://github.com/WordPress/performance/issues/120 by @dainemawer. Copied description below:

Another pattern to possibly follow is Asynchronous CSS - this was suggested by the Filament Group at some point and has had some decent results: ​https://www.filamentgroup.com/lab/load-css-simpler/

It is slightly hacky, but it involves loading CSS files with media attribute set to print - this allows the browser to load the stylesheet in a non render block fashion. Using the onload attribute, we can set media back to all so that the stylesheet is applied as one would expect. As fallback, the original link is included in a a <noscript> tag incase JS borks out:

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

This could possibly be an extension of wp_enqueue_style by adding another parameter:

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media = 'all', $async = true ); ?>