什么让网站用起来更快？理解加载、响应与稳定性

从想要创造的体验开始

选择一项重要任务，描述它流畅完成时的样子。产品页的标题、价格和主图帮助人们迅速理解商品；筛选器对选择给出明确回应；预约按钮在补充信息出现时保持可预测的位置。

记录具体页面、设备、连接和操作。同一产品可能服务于电脑上的研究者，也服务于手机上的购买者，可以分别研究相关旅程。保持首次或重复访问、缓存、账户和同意条件可比。这些细节把宽泛目标转化为能够重复的体验。

跟随服务器到屏幕的过程

浏览器收到响应，读取 HTML，发现样式、JavaScript、字体和图片，再获取资源并组织画面。较早发现的资源可以较早开始传递，依赖关系则安排其他工作顺序。服务器响应、资源传输和渲染共同决定有用内容何时呈现。

加载之后，事件处理、脚本和渲染继续共享处理时间。专注的小任务为浏览器提供响应输入与展示更新的机会。为内容预留空间，让资源到达时仍保持布局稳定。这个模型把设计选择与服务器工作、传输、客户端处理或展示联系起来。

读懂三个体验指标

Core Web Vitals描述使用体验的重要方面。良好体验的参考阈值按设备类别分别评估实际数据的第 75 百分位数。把每项指标与一个具体问题联系起来，更容易理解它的意义。

Lighthouse 提供用于深入研究的实验室测量，CrUX 则在有足够数据时汇总符合条件的真实访问。PageSpeed Insights 文档解释两种来源。查看实际数据对应的是具体 URL 还是整个来源站点。实验室便于在重复条件下研究，实际数据补充一组访客的体验。

让重要内容尽早进入视野

找到 LCP 元素，跟随它到达屏幕的过程。如果是图片，查看请求开始时间和传输大小。让资源容易被提前发现，选择合适尺寸与格式，并及时加载首屏的重要图片。请求时刻和文件大小共同影响图片何时出现。

研究初始服务器响应，包括数据库处理与缓存机会，然后查看加载顺序中的样式、字体和依赖关系。LCP 优化指南将这个过程拆成有用阶段。首屏之外的图片可以在适合时稍后加载，同时预留空间，并观察滚动时的呈现过程。

创造敏捷交互和稳定布局

记录一次重要的筛选或菜单操作，观察产生下一次可见更新所需的工作。让事件处理专注于任务，有效组织更新，并把较长工作分成易管理的步骤。需要时间的操作配上清楚的进度状态，有助于理解下一步。

INP 优化指南解释输入等待、处理和展示。总阻塞时间则提供具有自身含义的辅助实验室指标。为图片、视频、横幅和嵌入内容预留尺寸，并规划字体切换和通知，使阅读与选择目标更加舒适。

比较改进前后的体验

1. 保存 URL、设备、时间、同意状态与正在研究的任务。
2. 记录指标和支持细节，例如 LCP 元素或交互轨迹。
3. 对相关图片、脚本或布局组件做一项连贯调整。
4. 在可比条件下重复几次实验室测量，观察整体模式。
5. 在相关屏幕尺寸与账户状态下走完主要任务。
6. 随着统计窗口纳入更多调整后的访问，再查看实际数据。

结合测量观察完整体验。保留图片的可读性，并确认延后执行的脚本在其他页面中的用途。记录基准状态、组件和变化，方便向同事说明结果，也为下一轮改进提供依据。

把学习用于实际改进

Sitelemetry 汇集公开页面可用的性能指标与诊断信息，帮助安排性能工作。选择一条重要的移动端旅程，把测量与图片、脚本或布局联系起来，再比较调整后的同一体验。让用户任务始终与数字放在一起。