这是个几乎每个网站都会遇到的落差：你在办公室的电脑上打开，瞬间就出来了；客户在路上用手机点开你发的链接，等了五秒还在白屏。
原因不神秘：你测试的条件和客户的条件差了好几个数量级。
你的电脑是有线网或者强 WiFi，CPU 快，浏览器缓存里已经有了这个站的全部资源——你反复刷新过很多次。客户是 4G，信号可能只有两格，手机是三年前的中端机，第一次访问，什么缓存都没有。
下面四个是造成落差最主要的原因，按影响大小排。
一、字体
这一条在中文网站上尤其严重，而且极其容易被忽略，因为它在你的电脑上根本不下载——你的系统里已经有那个字体了。
问题是这样产生的：设计的时候指定了一个漂亮的中文字体。有这个字体的设备直接用本地的，没有的设备就要下载。而一个完整的中文字体文件通常是几 MB——因为它要包含几万个汉字。
我们自己的站上就踩过：正文的字体列表最后落到了一个网络字体上，结果页面里出现的汉字全部触发下载，实测接近 1MB。而这 1MB 在你的电脑上是不会发生的，因为你的系统有那个字体，本地直接命中。
处理办法有几层：
正文只用系统字体。各个系统都自带质量不错的中文字体，正文用它们，一个字节都不用下载。视觉上的差别，远小于五秒白屏的差别。
只有标题用自定义字体，而且只打包用到的字。标题上的汉字通常就那么两三百个，把它们单独提取出来做成子集文件。我们最后的结果是 49KB，比原来小了二十倍。
用本地字体优先的写法。字体声明里可以先列本地字体名，设备上有就直接用，没有才下载文件。这样大部分用户根本不会触发下载。
二、图片
第二大的一块，而且原因最简单：直接把相机或者手机拍的原图传上去了。
一张手机拍的照片通常是 3 到 8MB，尺寸四千像素宽。而它在网页上显示的宽度可能只有 800 像素。浏览器会把它缩小显示，但下载的是完整的原图。
三张这样的图，就是二十多 MB。在 4G 上这是十几秒。
要做的事：按实际显示尺寸生成几个版本，让浏览器按屏幕大小挑；转成更高效的格式；首屏之外的图片延迟加载。这些现在都是标准做法，工具链自动就能做，问题只在于有没有人配。
自查方法很简单：在手机上打开你的网站，看开发者工具里的总传输量。企业官网的首页控制在 1MB 以内是合理的，超过 3MB 就该查了。
三、脚本
页面上每加一个第三方服务，就多一段要下载和执行的脚本：统计代码、聊天插件、广告像素、地图、字体服务、评论系统。
每个单独看都不大，加起来经常超过页面本身。而且脚本和图片不同——图片下载慢只是显示晚，脚本还要占用 CPU 执行，在中低端手机上这个差别很明显。
要做的事：列一遍你的网站上到底装了哪些第三方，逐个问”这个现在还有人看吗”。停用的活动像素、换掉的统计工具、试用过的聊天插件，经常还留在页面上跑。
四、内容要等程序算完才显示
如果你的网站是每次访问现拼页面的（WordPress 这类），那么访客要等服务器查数据库、拼好页面、传回来，然后才开始渲染。这段时间里手机屏幕是空的。
这一段在你的电脑上也存在，只是你感觉不到——因为你的网络快，而且你多半在离服务器近的地方测。
要做的事：加缓存，让重复访问不用每次都算；或者更彻底一点，把页面提前生成成静态文件。我们的站改成后者之后，页面到达时间稳定在 40 到 60 毫秒，之前是 200 毫秒起步、偶尔 500 毫秒以上。
怎么在自己的电脑上模拟客户的环境
不需要真的去买台旧手机。浏览器的开发者工具里有两个开关，打开就能接近真实情况：
网络限速。网络面板里可以选”慢速 4G”这类预设，它会模拟真实的带宽和延迟。
禁用缓存。同一个面板里勾上，这样每次刷新都是”第一次访问”。这一条特别重要——不勾的话你测的永远是最好的情况。
再加一条：用无痕窗口测。避免插件和登录状态干扰。
这三个一起打开，你看到的就接近客户第一次点开你链接时看到的东西了。多数人第一次这么测的时候都会吃一惊。
一个更重要的判断
做完上面这些，还要问一句：值不值得继续优化下去？
从 5 秒优化到 2 秒，收益巨大。从 1.5 秒优化到 1.2 秒，用户基本感知不到，而工作量可能比前一步还大。
性能优化是有边际递减的。先把上面四条里明显的问题解决掉——通常字体和图片两项就能解决大半——剩下的看情况。把时间花在内容和转化上，往往回报更高。
我们交付项目时会把这四项作为基础检查跑一遍，不作为加价项目。方法上面写完了，你也可以自己对着查。