页面速度该优化哪里：三项核心指标的实际含义

页面速度的讨论常常停在某个工具给出的分数上。分数本身意义有限，真正有参考价值的是它背后的几项指标 —— 它们各自对应一种具体的用户感受，优化手段也完全不同。

三项指标分别在说什么

• 最大内容绘制：主要内容什么时候出现在屏幕上。用户感受是「这页到底加载出来没有」；
• 交互响应延迟：用户点击之后，页面多久给出视觉反馈。用户感受是「点了没反应」；
• 累计布局偏移：页面元素加载过程中的跳动程度。用户感受是「正要点的按钮突然跑了」。

这三者没有共同的解法。最大内容绘制慢通常是资源加载问题，交互响应差多半是主线程被长任务占住，布局偏移则几乎总是因为图片或广告位没有预留空间。先确认是哪一项不达标，再决定改什么。

收益最大的几个改动

1. 给图片写明宽高或使用固定宽高比容器。这一项几乎能单独解决大部分布局偏移问题，改动量也最小；
2. 首屏图片不要懒加载。懒加载本意是省流量，用在首屏主图上反而推迟了最大内容绘制；
3. 字体加载策略设为先用系统字体渲染、字体到位后替换，避免文字长时间不可见；
4. 把体积大的第三方脚本改为延迟加载，尤其是统计、客服、营销类脚本 —— 它们是主线程长任务最常见的来源。

实验室数据和真实数据为什么差很多

工具在本地模拟的网络和设备条件是固定的，而真实用户分布在各种网络和机型上。常见的情况是工具打分很高、真实数据却不达标，原因通常是真实用户中低端机占比高，而低端机上脚本执行时间会成倍增加。

判断依据应当以真实用户数据为准，实验室数据用于定位问题。只盯着工具分数优化，容易在无关紧要的细节上投入很多，而真正影响用户的那部分没动。

不要为了分数牺牲内容

把图片压到模糊、把必要的功能脚本去掉、把内容拆成多页以减少单页体积，这些确实能提高分数，但损害了页面本身的价值。速度是手段，目的是让用户顺利看到内容并完成操作。相关的实现取舍我们通常在企业官网定制的开发阶段就与客户确认，避免上线后反复返工；整体节奏见合作流程。