如何解决WordPress消除渲染阻塞后出现的布局偏移（CLS）问题？

云原生阿岚

2026-9-30

解决方案

方案1：WP Rocket后台配置排除Beaver布局CSS

进入WordPress后台，依次打开 设置 → WP Rocket → 文件优化 页面
找到「CSS文件」板块下的「排除CSS文件」输入区域
填入路径匹配规则：/wp-content/uploads/bb-plugin/cache/(.*).css，该规则可匹配所有页面由Beaver Page Builder自动生成的布局CSS文件
保存设置后清空WP Rocket缓存、服务器缓存、浏览器缓存，重新测试PageSpeed Insights的CLS指标即可
该规则仅会跳过Beaver布局CSS的延迟加载逻辑，其他CSS、JS文件的优化规则不受影响，不会拉低整体站点评分

方案2：代码强制排除Beaver布局CSS

如果后台配置不生效，可将以下代码添加到Astra子主题的functions.php文件中，或通过Code Snippets插件导入运行：

add_filter( 'rocket_exclude_async_css', 'exclude_beaver_builder_css' );
add_filter( 'rocket_exclude_css', 'exclude_beaver_builder_css' );
function exclude_beaver_builder_css( $exclude_list ) {
    $exclude_list[] = '/wp-content/uploads/bb-plugin/cache/(.*).css';
    return $exclude_list;
}