网站变慢了，很多人的第一反应是去升级服务器。加内存、换更快的处理器、上更贵的套餐，钱花出去，页面打开速度可能一点没变。原因在于，用户感受到的慢，和服务器扛不住的慢，是两件经常被混为一谈的事。前者有相当一部分，发生在服务器把第一个字节送出去之后，跟你的机器配置没有半点关系。
要谈速度，先得有几把公认的尺子。谷歌提出的核心网页指标里有三项：最大内容渲染时间衡量加载，要求页面主要内容的渲染在2.5秒以内；交互到下一次绘制衡量响应，要求交互延迟控制在200毫秒以内；累积布局偏移衡量视觉稳定性，要求控制在0.1以内。三项的判定都取第75百分位，也就是要让四分之三的访问都达标，才算是这项合格。
这里有个常被误解的地方：三项指标是并列的，必须同时达标。只要有一项落在需要改进的区间，整体评估就算不通过。所以你会看到，有人盯着一个漂亮的实验室跑分自我感觉良好，而真实的用户数据里，只要有一项掉下去，搜索后台里的评估依然是没达标。看分数之前，先确认你看的是现场数据还是实验室数据，后者只能用来定位原因，不能拿来判断好坏。
慢在哪一段，比慢不慢更重要
拿加载这一项来说，它其实可以拆成四段：服务器响应时间、资源加载延迟、资源加载耗时、元素渲染延迟。前两段和服务器、网络有关，后两段更多出在浏览器这一侧。这个拆法很有用，因为它直接告诉你该去哪修。如果总的加载时间是3.8秒，而其中1.9秒耗在服务器响应上，那你去优化图片格式基本没用，该做的是把源站挪近一点，或者把页面缓存在边缘节点上。
落到具体动作，多数站点最大的单点问题是首屏那张大图。一张好几兆的横幅图直接铺在首屏，是在手机上拖慢加载最常见的原因。与之配套的几个动作很基础：把图片尺寸调到实际显示的大小、换用更省空间的格式、给它加上优先加载的提示，让浏览器尽早开始下载它。这些都是不动架构就能做的事，收益往往比升级服务器明显，成本还几乎为零。
其次容易被忽略的是阻塞渲染的资源。放在页头里的脚本会拦住页面渲染，浏览器得先把它下载并执行完，才肯画出第一屏。把不必要放在页头的脚本挪走、给非关键脚本加上延迟加载的属性，是收益很快的一步。字体的加载也类似，用上合适的字体显示策略，可以避免文字在换字体时闪一下、再重新排版，那一下抖动对观感的破坏比想象中大。
视觉稳定性那一项，问题多半出在没有给元素预留位置。图片和嵌入框不写宽高，浏览器一开始不知道它该占多大地方，等图片下载完，下面的内容就会往下跳一截。广告位、嵌入内容同理，不预留位置，它们加载进来的那一刻整页都会移位。解决办法不复杂：图片和嵌入元素都写死宽高，或者用比例占位，给自己加进来的横幅留出固定高度的容器。0.1这个门槛比直觉要严格，一个迟到的大横幅就足以把它顶爆。
响应性这一项，惩罚的是长任务。用户点一下按钮，从点击到界面给出反馈之间的所有时间都算在内，包括事件处理函数跑了多久、页面重排了多久。如果点击处理里塞了一段同步的重活，或者页面上挂了一堆第三方脚本在每次交互时都要跑一遍，这个数字就会很难看。这类的优化往往不体现在服务器账单上，而藏在前端代码里，把长任务切开、把不紧急的更新让出去，效果立竿见影。
还有一个判断上的边界要说清楚：实验室跑分不等于真实体验。实验室测试是在固定条件、模拟网络下的单次加载，可重复，适合排查原因；现场数据来自真实用户真实的手机和网络，那才是搜索引擎用来评估的那一份。两者不一致时，判断有没有问题看现场，找原因看实验室。很多人只看了实验室的高分就以为高枕无忧，而现场数据里其实早就亮着红灯。
顺下来，一个务实的排查顺序是这样：先看现场数据里三项指标哪一项不合格，再拆开那一项对应的几段耗时，找到最耗时的那一段，最后才动手改对应的东西。跳过前面几步直接改图片、改服务器，本质是在赌自己一开始就猜对了。速度优化最大的浪费，是花了一堆力气，优化了一个本来就不是瓶颈的环节。
最后提醒一句，不要为了跑分而跑分。有些做法能让实验室分数变好看，却让真实的体验变差，比如把首屏内容故意延后加载来抢指标时间。用户不会看你的分数，他们只会用自己的手指投票。指标是拿来定位问题的工具，不是拿来交差的成绩单，一旦本末倒置，优化就变成了一种自我安慰，数字好看，该慢还是慢。
网站慢这件事值得花时间，但要把力气花在对的地方。先用三个指标判断问题出在加载、响应还是稳定性，再往下一层找是哪一段造成的，最后才去动代码和配置。这套顺序走下来，你会发现升级服务器未必是答案，而答案往往就藏在那些被忽略了好几年的静态资源上。
申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！
