01 / 背景
市面上的主题，要么好看但慢，要么快但丑。
做跨境独立站时我试过十几款付费主题：Astra、GeneratePress、Kadence、Flatsome、Woodmart。 共性问题是——好看的主题加载一堆 Google Fonts、动画库、图标字体，移动端 PageSpeed 跌到 40 分；快的主题又丑得像 2015 年的博客。
跨境独立站的转化率与首屏速度强相关。Google 的数据是 LCP 每增加 1 秒，转化率下降 7%。 我需要一个既好看又快的主题，找不到就自己写。
02 / 决策
三条硬约束，定了就不再改。
在动工前我先定死三条约束，整个开发过程都围绕它们做取舍：
-
01
零 jQuery 依赖
WordPress 默认加载 jQuery，但现代浏览器原生支持 querySelector、fetch、classList。 Astra 全部用原生 JS 重写交互，省掉 30KB + 一次 HTTP 请求。
-
02
Gutenberg 全区块，不用页面构建器
Elementor / WPBakery 会注入大量 wrapper div 和 inline style，拖慢渲染。 Astra 基于 Gutenberg 区块 + theme.json，HTML 输出干净，CSS 只加载用到的部分。
-
03
关键 CSS 内联，其余异步
首屏可见的 CSS 内联到 <head>，非关键样式延迟加载。 配合 Cloudflare 的 HTTP/2 Push，LCP 稳定在 1.2s 以内。
03 / 过程
从 theme.json 到自定义区块，全部手写。
主题的核心是 theme.json 配置——把颜色、字号、间距全部定义为设计 token， 客户在后台改颜色不会破坏视觉系统。其次是 12 个自定义区块：产品卡、评测卡、对比表、 FAQ 折叠、评分星等，全部用 registerBlockType 手写，没有依赖任何第三方区块插件。
性能优化花的时间最多。光是字体加载策略就调了一周：Google Fonts 异步加载、 font-display: swap、预连接 dns-prefetch、子集化中文字体。最终把字体从 280KB 压到 42KB。
"做主题最难的不是写功能，是忍住不加功能。每加一个选项就多一份维护成本， 多一次客户把站点改崩的机会。Astra 的后台只有 6 个设置项。"
04 / 结果
38 个站点跑通，转化率平均提升 18%。
38
已部署独立站
+18%
平均转化率提升
90+
移动端 PageSpeed
最早部署的站点已运行 18 个月，期间 WordPress 大版本升级 4 次，Astra 全部兼容无报错。 5 国语言版本（英、德、法、西、日）均通过本地化测试。
05 / 技术栈