异步加载 CSS 文件，消除渲染阻塞，WordPress 可以通过修改 functions.php 实现。

延迟加载非关键 CSS

复制下面的代码段，粘贴到你的 functions.php 文件末尾

// To defer loading of non-critical CSS
function aimeesign_defer_css_rel_preload($html, $handle, $href, $media){
    if ( !is_admin() ) {
        # 不添加延迟加载的列表 (style-1,style-2...修改为你不想延迟加载的文件名)
        $styles_to_exclude = array('style-1.css','style-2.css');

        foreach($styles_to_exclude as $exclude_style){
        if(true == strpos($html, $exclude_style ) )
            return $html;
        }
        return $html = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel=\'stylesheet\'">'
		. '<link rel="stylesheet" href="' . $href . '" id="' . $handle . '" media="print" onload="this.media=\'all\'">' . '<noscript>' . $html . '</noscript>';
  }
} 
add_filter( 'style_loader_tag', 'aimeesign_defer_css_rel_preload', 10, 4 );

加载出来的效果大致如下：

<link rel="preload" href="#" as="style" id="#" media="#" onload="this.onload=null;this.rel='stylesheet'">
<link href="#" id="#" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="#" id="#" media="all"></noscript>
  • 它的工作原理：link rel="preload" as="style" 异步请求样式表，但仅支持 Chrome, Safari, Edge 等浏览器，添加第二个 <link> 是为了使其作用于 Firefox 浏览器
  • 链接中的 onload 属性允许在完成加载时处理 css
  • noscript 标签确保如果浏览器不支持 “javascript”，它仍然可以向用户显示文件的内容，为了防止使用旧浏览器的用户看到没有实际样式的网页，使用 noscript 标签作为延迟加载 css 的后备很重要。

延迟所有 CSS 加载

复制下面的代码段，粘贴到你的 functions.php 文件末尾 

// To defer loading of non-critical CSS
function aimeesign_defer_css_rel_preload( $html, $handle, $href, $media ) {
    if ( !is_admin() ) {
        $html = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel=\'stylesheet\'">'
		. '<link rel="stylesheet" href="' . $href . '" id="' . $handle . '" media="print" onload="this.media=\'all\'">' . '<noscript>' . $html . '</noscript>';
    }
    return $html;
}
add_filter( 'style_loader_tag', 'aimeesign_defer_css_rel_preload', 10, 4 );

这种方法的好处是，一劳永逸，后面即使会新增其他的样式文件加载，依然不会造成渲染阻塞的问题。

参考文章：