Thread by @nishuang

开发全世界最快的网站，及其他错误

dev.to 上的长文，世界财富 20 强的商业连锁巨头 Kroger 电商网站的开发者，讲述了他对提高网站速度的终极追求。已写了两篇：

dev.to/tigt/making-th…

dev.to/tigt/the-weird…

行文直率+幽默+讽刺+哲学，甚至写了网站太慢版“悲伤的5个阶段”

他的目标是利用公司现有 API，开发一个尽可能快的网站，并把文件控制在 20 KB 以下

为了避免脱离实际，他预设了用户访问这个网站的环境：他们公司卖的最烂的手机（打折时不足 100 元人民币）、慢速 3G

最后的解决方案不是那些酷炫前端 js，而是老套的 MPA 和鲜为人知的流式 HTML / Streamed HTML🌚👀

技术细节就留给工程师们自己阅读了

从产品设计角度说几句网站、APP 的访问速度

网站追求纯技术的快，通常很容易达到物理极限，比如网速就是太慢、比如首页就是有100个商品、比如视频就是4K高清而且码率高到令人流泪…

所以在技术角度之外，还需要从用户感官体验的角度来“加速”网页，让用户感觉很快

从感官体验角度让用户觉得网页/APP页面速度快，用大白话解释，基本原理就是尽快显示东西

有很多实现方法

1，用技术“蛮力”加快传输速度

比如缩小文件字节数、减少文件总数、减少数据库请求、压缩传输文件、本地缓存、用 CDN 加速等…谷歌、脸书们甚至投巨资建造昂贵的海底光缆，也是为了提高传输速度

2，异步地显示内容

比如 APP 先本地画好 UI、再载入内容

比如先画出假内容、再载入真实内容

比如 Lazy Loading 先画出页面、再显示图片

比如 SPA 先一次性画出 UI、每次载入新页面时只载入内容，这样省去重新下载和画 UI 的时间，用第一次的“慢死人”换取以后“都挺快”，让用户心理上感觉“总体很快”

3，Streaming / 流

看视频、看小姐姐直播都是用数据流的方式传输内容。谷歌甚至妄图用流的方式让你玩游戏

前文作者说的那个不常见的 Stream Html，技术上完全不是数据流，但产品设计角度，可以认为它把网页和内容变成了一个挺 low 的视频😂

反面例子是播客 APP，播客节目是静态 MP3 文件、需要下载

4，提供降级 / 精简 / 乞丐内容

比如好的手机版网页是UI和内容都精简的版本，谷歌还制定标准逼你精简

比如网速不佳时看 Netflix，它会立刻让你看低画质视频、而不是转菊花强迫你等高画质视频

反面例子是响应式网页 / Responsive web，且不说这个翻译太傻逼，它在手机上载入完整网页、然后假装手机版

5，优化人机交互时的响应

前面说的都是载入内容，受限于传输速度；下面说操作

最基本原则是及时响应用户的操作，甭管实际上在处理什么，立即用视觉、听觉、触觉的方式，告诉用户：操作成功了

比如我去麦当劳自助点餐，每按一次屏幕它都会“嘀”一声，其实那个触摸屏很难用，但提示音让我觉得它还挺快

同理优化滚屏的响应速度，也直接改善用户感觉

安卓手机万年不变声称自己“像 iPhone 一样丝般顺滑”，高端安卓机甚至提供 120Hz 超高屏幕刷新率

但它让滚屏更顺滑了？还是让滚屏的不顺滑变得更精致了？我也不懂🤷‍♂️

从产品设计角度说，还是老老实实把页面做小一点、轻一点，避免从物理上挑战滚屏的体验

6，优化发布时的响应

按照“1%定律”，只有 1% 的用户会创造内容，所以发布内容是最重要的操作。如果发布时感觉挺快，心理感觉上会觉得这个 APP、网页超快

让用户觉得发布很快，也有很多思路

比如实时提交内容，现在的在线笔记，会持续自动提交和保存到云端，你点保存或者发布按钮，都是秒成功

比如预先提交内容，早年 Instagram 的卖点之一是上传照片特快，因为你一选好照片、它就在后台上传照片，等你终于写好一句文案，照片早就上传好了

比如上传照片时，在界面里先把这张本地照片显示出来，不用傻等上传完毕

比如虽然发表过程是先审后发，但先让作者看到发布成功，而不让他呆等审核通过