不装缓存插件、不上 CDN,我的 WordPress 站手机端跑了 92 分

吴工出海笔记 · 独立站建站实战

📦 7 Parts + Conclusion

👉 滑动

这篇只讲一件事

慢不是 WordPress 的锅，是搭法的锅

我这个站两个端都跑了 PageSpeed，手机端性能 92，无障碍 96、最佳做法 100、SEO 92。

— 手机端实测报告，测试日期 2026-10-07

测试方法：无头 Chromium，手机视口 390×844，等页面完全加载后统计。Elementor 样本取 elementor.com 首页，Hello Elementor 主题加 Elementor、Elementor Pro 搭建。

① CSS 文件数：不是体积问题，是请求问题

Elementor 的样式是按组件拆文件下发的。这是它真实加载的清单（节选）：

页面上每多用一种组件，就多半份 CSS；每多一个断点，再多半份。电脑端宽带感觉不出来，手机 4G 下这就是几十个排队请求，而 PageSpeed 手机端模拟的正是这个环境。

Bricks 这边只有 4 个：主题主样式、子主题样式、Tailwind 编译产物、我自己的一份样式表。而 tailwind.css 是编译后的，只包含页面真正用到的类，不是把整个框架塞给你。

② DOM 节点与嵌套深度：这才是真正的贵

Elementor 一个区块的结构是 section → container → column → widget-wrap → widget，四层壳是固定的。你写一句标题，它给你套三四层 div。结果就是同样的内容，1223 个节点对 733 个节点，25 层深对 15 层深。

节点多不是源码难看这种审美问题：浏览器要解析更多元素、算更多样式、建更大的渲染树，LCP 定位更慢。移动端 CPU 弱，差距会被放大好几倍。

— 手机端首页实拍：结构接近手写，没有横向溢出

③ jQuery：2026 年了，还在给每个访客发一份

Elementor 首页的 window.jQuery 是 true，顺带 jquery-ui-core、swiper、lottie、imagesloaded、dialog 一整套。这些不是用不到就不执行的死代码，它们要下载、要解析、要在主线程上跑。手机端性能分里，主线程阻塞是最重的一项。Bricks 的前端脚本是原生 JS，整站一处 jQuery 都没有。

④ 组件即插件：Pro 的代价

Elementor Pro 的 mega menu、sticky、loop grid，每个都带自己的 CSS 和 JS。功能确实强，但代价是你只用其中三个，资源按全家桶下发。Bricks 的断点、颜色变量、条件显示、查询循环、动态数据是主题内置能力，不额外下发资源文件。这就是设计能力是原生的，和设计能力靠插件堆的差别。

说句公道话，免得被当成无脑踩：第三方模板库和插件生态，Elementor 确实是 WordPress 圈最大的，赶工、要现成设计时很省事；界面直观、教程多，团队里随便拉个人都能改两笔；只做展示型小站、不追求分数时，免费版完全能交付。

但如果你的站符合下面任何一条，Bricks 的起点明显更高：

这一点以前不重要，现在很重要：输出干净的构建器，AI 才接得住。Bricks 的 DOM 和 class 你能完全控制，AI 生成的 HTML 和 CSS 可以直接落到页面里，类名对得上、样式压得住；而那种四层壳的结构，AI 每次都要在壳里绕，改一处崩三处。

92 分不是终点，它是一张欠债清单。图片还没做批量 WebP 和懒加载，CSS 还能合并裁剪，JS 还能延迟加载，CDN 没接，手机端 LCP 还有空间。这些做完，95+ 是有的。

— 全部区块在 Bricks 里可视编辑，改完直接生效

每用一种组件就多下一个文件，每写一句内容就多套三层 div

优化插件能压图片、能延迟脚本，但压不掉结构本身。Bricks 好在哪？它把页面上到底放什么的选择权，留在了你手里。

这恰恰是独立站最值钱的东西：轻、可控、改得动，而且能一直养下去。

我是吴工，在做面向外贸新手的建站实战笔记，从域名、服务器到 WordPress、WooCommerce 与 Bricks 页面构建。