[wp-trac] [WordPress Trac] #55639: Implement Async CSS

[WordPress Trac]

#55639: Implement Async CSS
-----------------------------+-----------------------------
 Reporter:  mihaidumitrascu  |      Owner:  (none)
     Type:  enhancement      |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  General          |    Version:
 Severity:  normal           |   Keywords:  has-patch
  Focuses:  javascript       |
-----------------------------+-----------------------------
 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
 <?php wp_enqueue_style( $handle, $src, $deps, $ver, $media = 'all', $async
 = true ); ?>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55639>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform