Help browsers to avoid render-blocking CSS with preloading

[Zodiac1978]

Feature Description

Some time ago @stoyan shared this post on Twitter: https://www.phpied.com/faster-wordpress-rendering-with-3-lines-of-configuration/

After examining many client site, it seems to me that if the block editor is used, its CSS file is mostly (always?) a render-blocking CSS file.

He was first using the .htaccess and H2PushResource (sending a 103 status code), but later added a PHP/WordPress solution using the send_headers action hook.

function hints() {  
  header("link: </wp-content/themes/phpied2/style.css>; rel=preload, </wp-includes/css/dist/block-library/style.min.css?ver=5.4.1>; rel=preload");
}
add_action('send_headers', 'hints');

He was unsure about the hard-coded version number, so I build this version of it:

/**
 * Add some preloading
 * @link: https://www.phpied.com/faster-wordpress-rendering-with-3-lines-of-configuration/
 */
function hints() {
    $wp_version = get_bloginfo( 'version' );
    header( 'link: </wp-includes/css/dist/block-library/style.min.css?ver=' . $wp_version . '>; rel=preload' );
}
add_action( 'send_headers', 'hints' );

See: https://gist.github.com/Zodiac1978/f58848785f4b86e4cd201ea35c2bf9da

Another way could be to use the wp_preload_resources filter to add this via markup (instead of headers): <link rel="preload" href="/styles/other.css" as="style">

Maybe this could be added automatically if the server is supporting http/2 (not sure if this check is necessary) and the block editor is in use.

[Mte90]

This is very interesting, probably it is something that cache plugin can do as the problem is that they change all the urls when they minify stuff so is better something php side.

I already use this trick for google fonts to avoid this kind of errors:

<link rel='preload' as='style' onload="this.rel='stylesheet' id='google-fonts-css' href='//fonts.googleapis.com/css?family=Raleway%3A400%2C700%2C900&#038;font-display=swap&#038;ver=6.1.1' type='text/css' media='all' />

with this php code:

add_filter('style_loader_tag', 'preload_gfont', 10, 2);

function preload_gfont($html, $handle) {
    if ( $handle === 'google-fonts' ) {
        return str_replace("rel='stylesheet'",
            "rel='preload' as='style' onload=\"this.rel='stylesheet'\"", $html);
    }

    return $html;
}

Doc: https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously

Basically is saying to the browser to download it faster and after downloading saying this is a css so you can parse it (preload alone seems that is not enough).

[Mte90]

Another thing is that on https://github.com/WordPress/performance/pull/617 there is a similar implementation just for the first image in the page.