如何移除或延迟加载WooCommerce、WPBakery相关CSS优化PageSpeed得分

方案1：正确注销全部3款样式表 #

你之前的代码失效是因为WordPress渲染样式表link标签时，会自动给注册的句柄拼接-css后缀作为标签id，实际注册的WPBakery样式句柄不需要带-css后缀，同时可以把钩子优先级调高，避免插件后加载导致注销失效，正确代码如下：

function remove_plugin_styles() {
  // 注销WooCommerce块样式
  wp_deregister_style( 'wc-blocks-style' );
  wp_deregister_style( 'wc-blocks-vendors-style' );
  // 注销WPBakery前端样式，句柄去掉后缀-css
  wp_deregister_style( 'js_composer_front' );
}
// 优先级调高到9999，确保晚于插件加载样式的时机
add_action( 'wp_enqueue_scripts', 'remove_plugin_styles', 9999 );

如果还有其他插件的CSS需要注销，只需要把link标签的id去掉末尾的-css，就是对应的注册句柄，加到上面的函数里即可。

方案2：延迟加载指定样式表 #

如果需要保留样式但不想阻塞首屏渲染，可以用style_loader_tag过滤器给目标样式加defer属性，代码如下：

function defer_plugin_styles( $html, $handle ) {
  // 配置需要延迟加载的样式句柄列表
  $defer_handles = [
    'wc-blocks-style',
    'wc-blocks-vendors-style',
    'js_composer_front'
  ];
  if ( in_array( $handle, $defer_handles ) ) {
    // 给link标签添加defer属性
    return str_replace( "rel='stylesheet'", "rel='stylesheet' defer='defer'", $html );
  }
  return $html;
}
add_filter( 'style_loader_tag', 'defer_plugin_styles', 10, 2 );

如果需要更稳妥的非阻塞加载，可以把defer逻辑换成preload预加载，加载完成后再切换为样式表，修改对应返回行即可：

return str_replace( "rel='stylesheet'", "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", $html );

内容的提问来源于stack exchange，提问作者Freddy