[Snippet] How to load CSS asynchronously in WordPress

It is a common workaround to do changes in WordPress, about how some CSS assets are loaded in the HTML file generated.

Basically this HTML tricks let the browser to preload the CSS assets, and when it’s done load it as stylesheet so they take a lot of priority in the page.

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

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

  return $html;
}

We can see that in this case we are adding this trick for Google Fonts and Fontawesome.
It’s the case to do it just for some files and not all the CSS otherwise doesn’t make sense the “priority” purpose.

I suggest also to switch from Google Font to Bunny Fonts, this is an example how you can switch to this new CDN that is better for GDPR and compatible at 100% with the same URL:

wp_enqueue_style( 'google-fonts', 'https://fonts.bunny.net/css?family=Oxygen:400,700&display=swap', array(), $css_version );

Liked it? Take a second to support Mte90 on Patreon!