Bricks 编辑器不显示添加的元素？Cloudflare Rocket Loader 是元凶

现象：元素加了却不显示

后台用 Bricks 编辑器，拖了元素进去、保存也成功了，但画布里就是看不到——或者编辑模式下元素时隐时现。这个问题九成出现在域名挂了 Cloudflare CDN 的站点上。

本质不是 Bricks 坏了，而是编辑器加载被某个前端优化功能拦了。

根因：Rocket Loader 延迟了编辑器 JS

Cloudflare Rocket Loader 是一项前端性能优化，它的核心机制是强制异步加载、延迟执行页面上所有 JavaScript。对纯展示型静态页它确实能提速首屏，但对重度依赖 JS 的现代页面构建器（Bricks 就是）来说，它是真正的“编辑器杀手”——编辑器本身的 JS 被延迟，元素自然渲染不出来。

大多数现代主题（含 Bricks）自身已优化得很好，不建议再叠加这种暴力的 JS 延迟工具。

方法一：全局关闭 Rocket Loader（最省心）

如果你不想折腾规则，直接全局关掉最稳：

1. 登录 Cloudflare 控制台，进入你的域名
2. 左侧 Speed（速度）> Optimization（优化）
3. 找到 Rocket Loader，开关拨到 关闭
4. 再到 Caching（缓存）> Configuration（配置），点 Purge Everything（清除所有缓存）

清完缓存重新进 Bricks 编辑器，元素基本就回来了。

方法二：页面规则只排除编辑器（保留访客端加速）

如果你想访客端保留 Rocket Loader 的加速、只让后台和编辑器不受影响，用 Page Rules 精准排除：

1. Cloudflare 进入 Rules（规则）> Page Rules（页面规则）
2. 点 Create Page Rule（创建页面规则）
3. URL 匹配填：*你的域名.com/*?bricks=run* （这是 Bricks 编辑器的 URL 特征）
4. 设置项选 Rocket Loader，状态 Off（关闭）
5. （可选）再加一条：*你的域名.com/wp-admin/*，同样关掉 Rocket Loader
6. 保存并部署

这样前台照样加速，后台编辑器不受影响。

哪些情况会触发这类问题（适用场景与误区）

这类问题只出现在站点挂了 Cloudflare 且开了 Rocket Loader 的情况；用其他 CDN（如 BunnyCDN）或没开 Rocket Loader 的站点不会中招。常见误区：一是以为「元素丢了」，其实只是编辑器 JS 被推迟，前端页面正常；二是只在编辑器关了、却没在 Cloudflare 排除构建器路径，结果时好时坏。最省心就是本文方法一，整站关掉 Rocket Loader，对访客速度影响很小。

小结

Rocket Loader 对静态展示页是利器，对 Bricks 这类 JS 驱动构建器是隐患。遇到“元素加了不显示”的灵异问题，先关 Rocket Loader 试，通常能瞬间解决大部分后台编辑器故障。

需要帮你看具体站点的 Cloudflare 配置？联系 Ray Chan，顺手帮你排掉这类坑。

• 相关阅读：Bricks Setup Guide 延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

Rocket Loader 是什么？ 它是 Cloudflare 的 JS 优化，把脚本改成异步延迟加载；编辑器依赖的 JS 被推迟，就出现「加了元素不显示」。

关掉 Rocket Loader 会让访客变慢吗？ 影响很小，Bricks 前端本身就是静态 HTML，Rocket Loader 主要省第三方脚本的加载时间。

只在编辑器排除、前端保留加速怎么做？ 在 Cloudflare 加页面规则，只对 /wp-admin 和构建器路径关 Rocket Loader，访客端照常加速（本文方法二）。

怎么确认是不是它的锅？ 无痕窗口打开编辑器，若元素正常显示，多半就是它；也可暂时暂停 Cloudflare 验证。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程