三秒打不开，多数时候不是前端做得差。按 F12 打开浏览器自带的工具，看「等待」那一个数，就能判断该找网络、找后端，还是找前端。
打开一个网页，像打一通电话。先查号码，等接通，等对方开口，听对方说话，最后你记下内容。五步各有各的等待，加起来才是你感觉到的三秒。
对应到网站上，这五步各有名字，也各有负责人。
| 五步 | 在网站上是哪一步 | 谁负责 | 多久算久 |
|---|---|---|---|
| 查号码 | 找到网站在哪台服务器，叫域名解析 | 网络 | 超过 0.1 秒算慢 |
| 等接通 | 和服务器建立连接、商量加密方式 | 网络、服务器 | 同城来回超过两三趟算慢 |
| 等开口 | 服务器开始回话前的等待，叫首字节时间 | 后端、缓存 | 0.8 秒内好，0.8 到 1.8 偏慢，1.8 以上差 |
| 听说话 | 把网页的文字和图片下载下来 | 网络、图片大小 | 首屏内容超过 500KB 算重，约两张手机照片 |
| 记笔记 | 浏览器把内容排好、画到屏幕上 | 前端 | 2.5 秒内出现算好 |
第 3 步和第 5 步有官方口径。首字节时间 0.8 秒以内算好。超过 0.8 秒偏慢，超过 1.8 秒算差（web.dev 的首字节说明）。首屏最大那块内容 2.5 秒内出现算好（同一站点的说明）。
「按 75% 的用户算」的意思是：把访客从慢到快排一队，看第 75% 位置那个人等了多久。不看最快的，也不看最慢的。其余三条是经验线，只用来决定先查哪一段。
怎么量第 3 步。按 F12 打开开发者工具，点「网络」标签，英文界面叫 Network。刷新页面，点列表第一条，右侧找「计时」（Timing），看「等待」（Waiting）。这个数就是对方开口前，你等了多久。
看完这个数，再决定找谁。三种情况，三种人。
- 等待时间长，服务器自己的记录里只花了几十毫秒：问题在路上，找网络或加速服务商。
- 等待时间长，服务器记录也慢：后端慢，查数据库和接口。
- 等待时间短，画面还是慢：前端，图太大、脚本排队、接口一个等一个。
把三条并排看，责任就分出去了。这也解释了为什么换前端常常没用：前端只管最后一段，通常不到半秒。
还有一个常见误判：把总时间当成后端慢。3.2 秒里可能有 1.4 秒在下载图片，等对方开口只花了 0.4 秒。两个数混在一起，钱就会花在没慢的地方。
把 3.2 秒拆开，可能是这样：查号码 0.15 秒，接通 0.25 秒，等开口 0.9 秒，下载 1.6 秒，画出来 0.3 秒。最长的是下载，不是后端。这张账不拆，改谁都是碰运气。
不想开开发者工具，一条命令也能测第三步。
curl -o /dev/null -s \
-w "等开口 %{time_starttransfer} 秒\n" https://你的域名/同一台电脑、同一个网络，连跑三遍，取中间那个数。只跑一遍的数，别拿去跟服务商对账。
为什么先看这一步：它一头连着网络，一头连着服务器。这一段慢，前端做什么都白做。
五步各自怎么改，按花钱少、见效快的顺序排。
查号码。超过 0.1 秒，多半是域名绕的圈太多。让服务商把跳转减到一层，图片、字体、统计收在同一个域名下。验证：再按 F12，这一段的耗时掉到几十毫秒。
等接通。加密方式老旧、证书不全，每样都要多等一个来回。让服务商开新版加密，补齐证书，首屏资源别散在四五个域名上。
等开口。这一段归后端。首页、栏目页这类不常变的内容，让加速服务直接返回（常见做法），不用每次都问数据库。数据库慢就加索引，一次页面少查几次。
听说话。内容太重。首屏大图压到 200KB 以内，视频不要自动播放，列表页先放小图。验证：同样网络下，这一步的耗时减半。
记笔记。脚本和字体挡住了显示。首屏用不到的脚本延后加载，几个接口改成同时请求，字体别等下载完才显示文字。
五步里最容易被忽略的是第三步。用户看到白屏，往往不是下载慢，是服务器还没开始回话。这时候换更大的带宽、换更好的路由器，都没有用。
加速服务为什么有用：它把你的网页复制到离用户近的机房。查号码和等接通都变短，第三步也可能直接命中缓存。这是五步里唯一一次改动能同时压掉三段。
有些慢花钱也改不了。服务器在国外，一个来回就要 0.2 秒，光速摆在那里。这种只能把内容搬到离用户近的机房，改代码没用。
也有一种情况确实该动前端：等待时间很短，首屏却两秒后才出现。说明内容早就到了，是浏览器画得慢。这时候压图、减脚本、延后加载，才花在对的地方。
一个页面里通常有几十个请求。别凭感觉，按耗时排序，看最上面那三条。两条是图片就先压图，两条是接口就先看后端。
首屏出现，不等于加载完成。地址栏的转圈停了，可能只是主文件下载完，图还在路上。用户觉得快不快，看的是内容出现那一下。所以盯 2.5 秒这个数，别盯加载完成。
同一个网站，手机比电脑慢一截。手机网络一个来回要 50 到 100 毫秒，握手两趟就是 0.2 秒起。首屏资源越少越好，这不是技术偏好，是算术。
先测手机，别先测电脑。手机的网络和芯片都比电脑弱，同一个页面在手机上总是更慢。先测手机，拿到的数才是保守的那个。
单台电脑测的是这台电脑的网络。你在办公室宽带下测，客户在地铁里用手机，两个数差一倍很正常。要看真实用户的数据，取第 75% 位置那个数，别看平均。平均会被少量快请求拉低。
一次只改一处。同时换服务器、换图、改脚本，测出来降了也不知道是谁的功劳，下次出问题还是找不到原因。
把这五个数记在同一张纸上，按日期排。三个月后回看，就知道每次改版到底动了哪一段。
改完一周后再测一次。缓存、流量、服务器负载都会变，一次的数据不代表稳定。同一个页面，工作日早上和周末晚上测出来能差一倍。
合同里可以这么写：首屏 2.5 秒内出现，等开口 0.8 秒以内，按 75% 的用户算。做不到就复测，不看演示机。这三个数写进去，比「性能优化」四个字有用。
报修时把这张纸给对方看。说「第三步 1.2 秒」，比说「网站很慢」有用得多。
跟服务商谈的时候，把五步拆开问：这段归谁、改完复测到多少。一句「我们优化性能」没有验收标准，五个数字有。
先拿一张纸，把这五个数写下来，再谈要不要改版、要不要换技术。表建不起来，所有关于前端不行的判断，都只是猜。
