我的文章页只得了 39 分的那个晚上

一个有意做出的决定

九月重建这个网站时，我做了一个大多数建议都说不要做的选择。背景是一个实时的 three.js 场景：一道笔触，由成千上万个点画成，有三种形态，笔画、电路、星系。它是这个网站的标记在动。它很重，我知道。

所以我把这个决定写了下来，写在我的规划会话每天第一个读的手册里：接受很重的 three.js；弱设备是有意牺牲的。内容仍然必须是真正的 HTML，让搜索引擎读得到。我不想被一次一个小妥协地劝退。

我仍然觉得这是对的决定方式。写下来，之后你才能确切地知道自己错在哪里。

先测量，什么都不改

我用两个 Claude 会话经营这个网站，一个 Brain 负责规划，一个 Hand 负责建造。9 月 30 日，做完 SEO 审计之后，Brain 给 Hand 的提示里有一步和其他步骤不一样：测量世界在文章页上的代价，什么都不要改。

Hand 用 Lighthouse 的手机模拟，对嘛嘛档那篇文章的本地副本跑了两次，一次带世界，一次不带，同一页，同一个构建。

三十九。三秒半的时间里，手机对触摸毫无反应，而这个页面唯一的工作就是被阅读。

首页讲的是另一个故事：带世界 95，不带 97。同一个场景，在首页只花了两分，在文章页花了五十八分。差别不在代码。差别在页面是用来做什么的。

按页面牺牲，不是按网站

偷懒的修法是一个开关：世界开，或世界关。诚实的修法是问每一个页面，它是用来做什么的。

首页就是那个标记。世界是它的重点，是访客来看的东西，而在手机上它只花两分。它留下。

文章页是用来读的。没有人在手机上打开一篇长文，是为了看文字后面的粒子。在那里，世界是纯粹的代价，而我一直在向每一位手机读者收取 3.6 秒，换一个他们隔着文字几乎看不见的装饰。

于是规则变成：文章页只在以下三件事全都成立时才画世界。屏幕至少 1024 像素宽。指针是精细的，鼠标或触控板，这是「这是一台笔记本而不是一部横放的手机」最便宜也最诚实的信号。读者没有把系统设为偏好减少动效。任何一条不成立，页面就根本不下载世界。它得到的是一层静止的底：同样的近黑，顶部一抹柔和的深红光，不动。

Hand 把它建了出来，并写了测试，钉住这三个条件和它们的全部八种组合。再测一次：

同一页，同一篇文章。桌面读者仍然得到世界。手机读者得到文章。

世界又回来压住了文字

一天后，我在自己的笔记本上读一篇文章的底部，几乎看不清作者框。圆环正横穿文字栏。文章后面那片深色是一个柔和的径向渐变，在短页面的中间没问题，到长页面的底部就没了。

在最糟的位置测量，圆环穿过一段摘要的地方，文字对背后像素的对比度是 1.59:1。正文的最低要求是 4.5:1。

修法是一层遮罩：一条 0.8 不透明度的深色带，垫在整个文字栏后面，通高，两侧羽化，所以看不出一个框，而且只在世界运行的桌面上出现。同一个位置现在是 7.33:1。圆环还在，在两侧，也隐约透过深色带。文字优先。

两天，对一个决定做了两次修正，而我还是会做同样的决定。世界仍然是这个网站的身份。它只是不再向来读文章的人收费。

页面职责检查

在我让任何页面为任何东西付出代价之前，四个问题。

1. 这个页面是用来做什么的？ 一个动词。看、读、决定、买。如果那个昂贵的东西不是这个动词，它就是装饰，而装饰是慢设备上第一个该去掉的东西。
2. 在手机上测，不在笔记本上测。 我的笔记本说世界没问题。它在笔记本上确实没问题。Lighthouse 的手机模拟是第一个告诉我真相的东西，而它只需要一个提示。
3. 按页面牺牲，不按网站牺牲。 全局开关会惩罚那个昂贵的东西正是重点的页面。按页面决定，并把条件写下来，让它们可以被测试。
4. 用静止的形式保留身份。 把世界从手机上拿掉，不等于把品牌拿掉。静止的底是同样的颜色、同样的光。用手机来的人看到的不是另一个网站，只是一个更安静的网站。

还有，在测量之前先把原来的决定写下来。一个找不到的决定，是一个无法修正的决定。

常见问题

Lighthouse 是什么？

Google 的开源页面审计工具，内置在 Chrome 里。它在模拟的慢速手机和网络下加载页面，根据最大内容绘制、总阻塞时间、累积布局偏移等指标给性能打 0 到 100 分。这篇文章里的数字来自它的手机模拟，在本地预览上测得，所以比较的是同类。

为什么不干脆把 three.js 从网站上去掉？

因为在首页它就是重点，而且在手机上只花两分。代价只在职责是阅读的页面上才无法接受。所以决定是按页面做的：首页总是画世界；文章页只在宽屏、精细指针、没有减少动效偏好时才画。

页面怎么知道自己在手机上？

它并不确切知道。它问三个媒体查询：视口是否至少 1024 像素宽，指针是否精细，读者是否没有要求减少动效。三者都成立，才下载世界。横放的手机过不了指针这一关；一个小的笔记本窗口过不了宽度这一关，得到静止的底，这可以接受。

这个改动伤害了桌面体验吗？

没有。同一个文章页在桌面上加载世界后得 98 分。桌面需要的是文字栏后面的一层阅读遮罩，第二天加上了，把页面上最差的对比度从 1.59:1 提高到 7.33:1。