系列:paddy-newsprint 主题开发记 · 续篇
前置阅读:做了一个报纸风格的 WordPress Markdown 主题 · 主题说明页
主题分类:实践复盘
阅读时间:约 8 分钟
换装之后:75 到 93的生产环境成绩单
9 月 13 日晚上,我把运行了一年多的旧主题下线,换上了自己写的 paddysun-newsprint。切换前我给旧主题拍了一组基线,切换、清缓存、改完页脚之后,用同样的工具、同样的页面、同样的网络再测了一遍。
先看结果:
| PageSpeed Insights(移动端) | 换装前(yuki) | 换装后(newsprint 0.10.11) |
|---|---|---|
| 性能总分 | 75 | 93 |
| First Contentful Paint | 3.0 秒 | 1.8 秒 |
| Largest Contentful Paint | 3.9 秒 | 2.8 秒 |
| 速度指数 Speed Index | 8.0 秒 | 4.0 秒 |
| 总阻塞时间 TBT | 0 毫秒 | 0 毫秒 |
| 累计布局偏移 CLS | 0 | 0.002 |
同一台 2 核 4G 的小服务器,同一条 CDN 链路,同一个域名。差的是那套主题。
上一篇文章说过,这个主题在开发时立了三条军规:零外部请求、按需加载、缓存友好。当时它们更像审美洁癖——博客圈流行的话术谁都会说,可这些原则到底值几分,没有人真的去量过。这一篇就是量过的结果。
体积去哪了:零外部请求的账本
先用 curl 在生产环境逐页计时(宁波电信宽带直测,每页三轮取中位数):
| curl 实测(CDN 视角) | 换装前 | 换装后 |
|---|---|---|
| 首页 TTFB 中位数 | 0.090 秒 | 0.073 秒 |
| 首页传输体积 | 118.0 KB | 87.5 KB(-26%) |
| 单篇 TTFB 中位数 | 0.721 秒 | 0.317 秒 |
| 单篇传输体积 | 116.8 KB | 101.4 KB |
首页瘦了四分之一。这个主题没有 Google Fonts、没有统计脚本的第三方请求、没有图标库——四枚正文字体(含一枚花体装饰字)全部自托管,头像用本地 SVG。浏览器打开首页时,除了博客自己,不需要信任任何第三方域名。
诚实地说,”零外部请求”目前还差一口气:友情徽章里有两枚 88×31 的小图仍指向外站(indieweb.org 和一位友链的徽章)。这两枚已经在待办清单上,方案是下载进主题的 assets 目录改本地引用。账本要记完整——2 枚外链图,不美化成”基本为零”。
TBT 那个 0,是设计出来的
PSI 里最扎眼的一个数字是总阻塞时间 0 毫秒——换装前后都是 0。这在 WordPress 主题里不常见:典型的多用途主题会加载一整个前端框架、滑块、动画库,主线程被切成碎片,TBT 轻松上百毫秒。
这个主题的写法是:首页一个 JS 文件都不加载。代码高亮、KaTeX 公式、Mermaid 图表、目录悬浮、复制按钮、评论折叠——全部按需加载,PHP 端先检查正文里有没有对应内容,有才在页脚挂上对应的 defer 脚本。首页没有代码块也没有公式,所以一个字节的任务都不用排。这个 0 不是运气,是”正文里没有就不加载”的直接结果。
CLS 从 0 变成了 0.002,属于噪声级别的波动(Lighthouse 对同一页面的两次测量也会在这个量级抖动),不构成叙事。
字体为什么敢 preload
FCP 从 3.0 秒提前到 1.8 秒,LCP 从 3.9 秒缩到 2.8 秒——这 1 秒多的差距,主要不在 HTML 本身(首页 HTML 换装前后都吃 CDN 边缘缓存),而在资源层的加载顺序。
正文的 Source Serif 4 两枚字重走 wp_head 最优先级 preload,浏览器在解析 CSS 的同时就开始下载字体,正文文字不会先以回退字体闪现再切换。旧主题的做法是等 CSS 解析完再发现字体引用,多一个串行往返。报纸风的衬线正文恰恰是 LCP 元素——字体快,LCP 就快。
版本号这件事也顺带验证了:主题 CSS/JS 用文件的修改时间戳做版本参数,这次更新主题文件后,CDN 和浏览器自动拿到新 URL、强制回源,不需要手动清任何缓存。上线当晚改页脚、推 0.10.11 版本,全程零缓存事故。
单篇页:快了 0.4 秒,但不是缓存的功劳
单篇页 TTFB 从 0.721 秒降到 0.317 秒,容易误读成”缓存生效了”。不是。目前 CDN 只缓存首页 HTML,单篇页每次都真实回源打到 PHP。这 0.4 秒几乎全是服务端渲染变轻了:块主题的模板直接输出区块标记,没有旧主题层层套模板的 PHP 开销。
这意味着还有一大块免费的速度没有领:单篇页零动态内容(没有随机文章、没有浏览计数),完全具备整页缓存的条件。下一步把它也放进 600 秒的边缘缓存,单篇 TTFB 会从 0.317 秒直接掉进 0.1 秒以内。这是目前清单上性价比最高的一项。
测试方法的两处坦白
第一,这次留档的 PSI”桌面端”快照和移动端内容相同(保存时拿到了同一份移动端报告),所以本文只用移动端口径——它本来就是更严苛的那个。桌面端留档下次补。
第二,PSI 是实验室数据(模拟 Moto G 电源 + 慢速网络),curl 是宁波单点,都不是真实用户的分布。它们能证明”变快了”和”快在哪”,不能证明”每个访客都快了多少”。多地拨测的原始文件已存档,真实用户侧的长期数据(RUM)要靠后续积累。
成绩单之外
性能只是一部分。这套主题的缓存友好设计(无动态内容、无 cookie 差异输出、按需加载)让全站 HTML 都具备上边缘缓存的资格——对一个跑在 4GB 小机器上的个人博客来说,”绝大多数请求不消耗 PHP”同时也是抗流量洪水的能力,这个话题值得单独一篇。
主题的代码、文档和发布记录都在 GitHub:PaddySun/paddy-newsprint,安装包在 Release v0.10.11 或镜像下载:https://cos.paddysun.top/paddy-newsprint/rel/paddy-newsprint-0.10.11.zip。
下一篇大概率是图床迁移——662 个文件搬去对象存储之后,这套”零外部请求”的账本要重新记账,到时候再来汇报。

发表回复