使用 Obs.js 在用户所在之处与他们相遇

Written by Harry Roberts on CSS Wizardry.

由 Harry Roberts 撰写于 CSS Wizardry。

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

独立写作是由我出色的支持者带来的。

One thing I encourage all of my clients to remember is that web performance happens somewhere between you and your user. The exact same page on the exact same infrastructure can feel vastly different to two different people, and knowing where the two meet is key to designing truly fast experiences.

我鼓励所有客户记住的一件事是，web performance 发生在你和你的用户之间。完全相同的基础设施上的完全相同的页面，对两个不同的人来说感受可能大相径庭，而了解这两者在哪里交汇是设计真正快速体验的关键。

Over the last few years, I’ve written a fair bit about high latency environments and low- and mid-tier mobile, and one of the recurring themes in both is that site-speed is only partly a property of the site itself. A large part of it is a property of the conditions under which that site is being consumed.

在过去几年里，我写了不少关于高延迟环境和中低端移动设备的文章，这两者中反复出现的一个主题是，网站速度只是网站本身属性的一部分。很大一部分属性取决于该网站被访问时的环境条件。

Sometimes, web performance really is a them problem.

有时候，Web 性能真的就是他们的问题。

It’s not our fault that someone is on a struggling connection, a weaker device, or a battery that is nearly dead, but it is still our responsibility to design around those scenarios where we can. To help, I built Obs.js, a tiny library which tells us a large amount about our users’ context.

某人处于网络不佳、设备性能较弱或电池即将耗尽的状态，这并不是我们的错，但在可能的情况下围绕这些场景进行设计仍然是我们的责任。为了提供帮助，我构建了 Obs.js，这是一个小型库，可以告诉我们大量关于用户上下文的信息。

I released Obs.js in summer 2025, and while it’s been incredibly useful and insightful (instrumental, even) on several client projects, I haven’t really talked about it much since then. Today, I will.

我在2025年夏天发布了 Obs.js，虽然它在几个客户项目中非常有用且富有启发性（甚至起到了关键作用），但自那以后我并没有真正多谈论它。今天，我会谈谈。

If you want the more direct technical walkthrough, I’ve written that up in Obs.js: Context-Aware Web Performance for Everyone. This piece is the companion to that one. This is less about the API itself and more about why I think having this sort of signal available to us matters.

如果你想要更直接的技术演练，我已经在Obs.js: Context-Aw...