资深Web开发的经验之谈：为什么你开发的网页不应该大于14KB？
作者丨Nathaniel 译者丨明知山 策划丨Tina 虽然我们生活在一个宽带无处不在、4/5G 几乎全覆盖的时代，但网站加载缓慢还是常态，就算我们打开一个以文本为中心的新闻网站，都可能需要至少 30 秒才能开始阅读。毕竟在内容膨胀时代，一张照片就能轻易超过 1MB 大小，许多网站为了显示几段文本，还会单独加载至少 10MB 的 JS 和自定义字体。
对此，对优化和极简主义充满热情的资深 Web 开发 Nathaniel 告诉我们，你应该让你的网页尽力控制在 14KB 以内，而且即使对于以富媒体为中心的网站，这条 14KB 的规则可能仍然值得遵循。如果 14KB 不足以用于最终布局，则需要优先考虑“首屏”字节，可以用发送给访问者的前 14KB 数据来渲染一些有用的东西，减少用户还没有开始阅读就流失掉的机会。网页越小，加载速度就越快——这一点都不奇怪。
但令人感到惊讶的是，14KB 网页的加载速度比 15KB 要快得多——可能快 612 毫秒——而 15KB 和 16KB 网页之间的加载速度差异微乎其微。
这是 TCP 慢启动算法导致的。本文将介绍这个算法、它的原理以及为什么你应该关注它。但首先我们需要快速过一遍一些基础知识。
1 TCP 是什么传输控制协议（Transmission Control Protocol，TCP）是一种使用 IP 协议可靠地发送数据包的方法——有时被称为 TCP/IP。
当浏览器向你的网站（或图像或样式表）发出请求时，它会使用 HTTP 请求。HTTP 建立在 TCP 之上，一个 HTTP 请求通常由许多 TCP 数据包组成。IP 只是一个将数据包从互联网上的一个位置发送到另一个位置的系统。IP 没有检查数据包是否成功到达目的地的方法。
对于网站来说，确保所有的数据到达请求端是非常关键的，否则我们可能会因为丢失数据包无法获得完整的网页。但在网络的其他应用场景中，这一点并不那么重要——比如流媒体直播视频。
TCP 是 IP 的扩展，浏览器和网站服务器通过它告诉对方哪些数据包已经成功到达。
服务器发送一些数据包，然后等待浏览器已经收到数据包的响应（这叫确认或 ACK），然后它继续发送更多的数据包——或者如果它没有收到 ACK，将再次发送相同的数据包。
2 什么是 TCP 慢启动TCP 慢启动是一种算法，服务器用它来确定一次可以发送多少数据包。
当浏览器第一次连接到服务器时，服务器无法知道它们之间的带宽是多少。带宽是指在单位时间内网络可以传输的数据量。通常以比特 / 秒（b/s）为单位。我们可以用管道来作类比——把带宽想象成每秒从管道流出多少水。
服务器不知道网络连接可以处理多少数据——所以它先发送少量且安全的数据——通常是 10 个 TCP 数据包。如果这些数据包成功地到达网站访问者，他们的计算机返回确认（ACK），表示数据包已经被收到了。然后，服务器发送更多的数据包，但这一次它将数据包的数量增加了一倍。
这个过程会不断重复，直到数据包丢失，服务器没有收到 ACK。（此时，服务器会继续发送数据包，但速度较慢）。
这就是 TCP 慢启动的要点——在现实当中，虽然算法各不相同，但这是它的基本原理。
3 那么 14KB 这个数字是怎么来的大多数 Web 服务器的 TCP 慢启动算法都是从发送 10 个 TCP 数据包开始的。
TCP 数据包最大长度为 1500 字节。这个最大值不是由 TCP 规范设置的，它来自于以太网标准。
每个 TCP 数据包的标头占了 40 个字节，其中 16 个字节用于 IP，另外 24 个字节用于 TCP。
这样每个 TCP 数据包还剩下 1460 个字节。10 x 1460 = 14600 字节，或大约 14KB！
因此，如果你能把网站的网页——或网页的关键部分——压缩到 14KB，就可以为访问者节省大量的时间——他们和网站服务器之间的往返时间。
一个数据往返能有多糟糕？但人们非常没有耐心——一个数据往返可能会出奇地长，具体多长取决于延迟……延迟是指数据包从源传输到目的地所花费的时间。如果带宽是每秒钟可以通过管道的水的数量，那么延迟就是一滴水进入管道后从另一端流出所花费的时间。
下面是一个关于延迟有多糟糕的例子。
卫星网络卫星网络是由环绕地球轨道的卫星提供的，在人烟稀少的地区、石油钻井平台、游轮以及飞机上，人们可以使用这种网络。
为了说明这种糟糕的延迟，我们想象一群在石油钻井平台工作的兄弟把骰子忘在了家里，他们需要通过 missingdice.com（少于 14KB）来玩《龙与地下城》游戏。
首先，他们中的一个用手机发出一个网页请求……
手机将请求发送到钻井平台的 WiFi 路由器，路由器将数据发送给平台上的卫星天线，我们假设这可能需要 1 毫秒时间。
然后，卫星天线将数据发送到地球轨道上方的卫星。
通常，这是通过在地球表面上方 35786 公里处运行的轨道卫星实现的。光速为 299792458 米 / 秒，所以信息从地球发送到卫星需要 120 毫秒。然后，卫星将信息传回地面接收站，这又需要 120 毫秒。
然后，地面站必须将请求发送到位于地球任意位置的服务器（当光通过光纤电缆传输时，速度会降至每秒 200000000 米）。如果地面站和服务器之间的距离等于纽约到伦敦之间的距离，那么大约需要 28 毫秒，如果地面站和服务器之间的距离等于纽约到悉尼之间的距离，则需要 80 毫秒——所以我们姑且定一个 60 毫秒的数字（这个数字便于计算）。
然后，服务器需要处理请求，这可能需要 10 毫秒，然后服务器再次将它发送出去。
回到地面站，进入太空，回到卫星天线，然后回到无线路由器，再到手机上。
手机 -> WiFi 路由器 ->卫星天线 ->卫星 -> 地面站 -> 服务器 -> 地面站 -> 卫星 -> 卫星天线 -> WiFi 路由器 -> 手机如果我们算一下，就是 10 + ( 1 + 120 + 120 + 60 ) x 2 = 612 毫秒。
这是每次往返额外的 612 毫秒——也许这看起来不是很长时间，但你的网站可能只是为了获取第一个资源就需要许多个往返。
另外，HTTPS 在完成第一个往返之前需要额外的两次往返——这使延迟达到了 1836 毫秒！
对于生活在陆地上的人，延迟又是怎样的卫星网络似乎是一个极端的例子——我选择它作为例子是因为它能够充分说明了网络延迟这个问题——但对于生活在陆地上的人来说，延迟可能比这更糟糕，原因有很多。
2G 网络的延迟通常在 300 毫秒到 1000 毫秒之间；
3G 网络的延迟可以在 100 毫秒到 500 毫秒之间；
嘈杂的移动网络——比如在一个异常拥挤的地方，比如音乐节；
处理大流量的服务器；
其他一些不好的东西。
不稳定的网络连接也会导致数据包丢失——导致需要另一个往返来获取丢失的数据包。
4 了解了 14KB 法则，接下来可以做些什么当然，你应该让你的网页尽可能的小——你爱你的访客，你希望他们开心。将每个页面的大小控制在 14KB 以内是一个不错的主意。
这 14KB 可以是压缩数据——所以实际上可以对应大约 50KB 的未压缩数据——这已经非常慷慨了。要知道，阿波罗 11 的制导计算机只有 72KB 内存。
去掉自动播放的视频、弹出窗口、Cookie、Cookie 横幅、社交网络按钮、跟踪脚本、JaScript 和 CSS 框架，以及所有其他人们不喜欢的垃圾——你可能就能实现 14KB 法则。
假设你已经尽力将所有内容控制在 14KB 以内，但仍然做不到——但 14KB 法则仍然很有用。
你可以用发送给访问者的前 14KB 数据来渲染一些有用的东西——例如一些关键的 CSS、JS 和解释如何使用你的应用程序的前几段文本。
需要注意的是，14KB 法则包含了 HTTP 标头——这些是未压缩的（即使是 HTTP/2 的第一个响应），也包含图片，所以你应该只加载在页面上方的内容，并保持它们最小，或者使用占位符，让访问者知道他们在等待一些更好的内容。
关于这个法则的一些注意事项14KB 法则更像是一种经验之谈，而不是计算的基本法则。
一些服务器已经将 TCP 慢启动初始窗口从 10 个数据包增加到 30 个；
有时服务器知道它可以从更大数量的数据包开始传输，因为它使用 TLS 握手来建立一个更大的窗口；
服务器可以缓存路由可管理的数据包数量，并在下一次连接时发送更多的数据包；
还有其他需要注意的地方——这里有一篇文章更深入地探讨关于为什么 14KB 法则并不总是这么回事。
（https://www.tunetheweb.com/blog/critical-resources-and-the-first-14kb/）。
HTTP/2 和 14KB 法则有一种观点认为，在使用 HTTP/2 时，14KB 法则不再适用。我已经读了所有我能读到的关于这个问题的东西，但我还没有看到任何证据表明使用 HTTP/2 的服务器已经停止使用 TCP 慢启动（从 10 个数据包开始）。
HTTP/3 和 QUIC与 HTTP/2 类似，有一种观点认为 HTTP/3 和 QUIC 将废除 14KB 法则——事实并非如此。实际上，QUIC 仍然建议使用 14KB 法则。
原文链接：
https://endtimes.dev/why-your-website-should-be-under-14kb-in-size/
今日好文推荐TypeScript 遭库开发者嫌弃：类型简直是万恶之源
80 岁 Unix 大神还在修复 AWK 代码；华为全线收缩和关闭边缘业务；小鹏汽车回应苹果汽车前工程师窃密认罪案｜Q 资讯
Oracle 首席执行官 Larry Ellison 陷入新官司：吹过的牛，变成了砸自己脚的石头
活动推荐9 月 17-18 日，QCon 全球软件开发大会将在北京富力万丽酒店举办。内容涵盖前端新基建与前沿技术、WebAssembly 的落地进展、Rust 实战与语言实现、数据湖存储底座、资效平衡的架构设计、云原生微服务架构新趋势、云原生时代的可观测技术落地、测试环境治理、云原生架构变革、AI 基础架构、开源运营、分布式数据库、下一代大数据系统、业务安全合规、工程师成长实践、研发效能提升、DevOps、移动生态、基础设施运维……来自华为、腾讯、百度、阿里、蚂蚁、火山引擎、网易、美团、快手、小红书、涛思、OPPO、大疆、德邦、华泰证券、PingCAP、OpenResty、Second State、DCloud 等国内外一线大咖分享 100+ 精彩演讲，点击底部【阅读原文】直达大会官网。
大会门票火热售卖中，组团购票享更多折扣，感兴趣的同学联系票务经理：15600537884（电话同微信）。
标签：
相关文章：
百度SEM高效推广专家
深企专业网站定制专家
网站SEO优化秘籍，轻松提升排名！
专业网站建站，双倍性价比，如何做到？,公司名字被网站利用推广
温州有哪些知名客服外包公司？
外链都有哪些形式？网站推广公司来分享
域名交易，如何快速变现？,营销推广的段子怎么说
如何精挑细选ebay跨境电商热销品？
网络关键词霸屏优化
濮阳SEO优化，关键词+疑问，提升排名秘诀？,seo优化集锦
“无数据状态，死链已处理”
外贸SEO：全球市场拓展的关键工具
服装行业岗位概览：从设计师到销售顾问的职责与挑战
关键词+搜索量，如何提升效果？,关键词发贴排名
电商运营助理面试要问hr什么问题
快手长视频怎么录制呢？
电子商务专业，未来就业前景如何？,推广动画片的营销方式
网络营销应该如何的去学习
“天然营养，尽在每一滴鲜奶”
网站设计，专业打造
年薪和年收入的区别
拓客推广，企业市场突破的秘密武器是什么？
AI写作神器，创作无限！
贝壳找房申请业务数据转换专利，减少程序开发成本和后期运维开销“姑娘，不是什么照片都能随便发的！”哈哈哈亮点都看到了:)
物通网账号如何获取？
小米申请通信技术专利，提高终端接入NTN网络的成功率“春分4不吃，吃了春难安”，明日春分，4不吃指啥？家人要管住嘴
快速掌握SEO技巧，网站流量翻倍增长！
如何解除京东绑定的手机号？
淘宝格子铺免费推广如何操作？开通条件是什么？
佣金变现神器，轻松赚钱平台
惠州企业SEO培训，如何快速提升网站排名？,葡挞的营销推广策略
一键优化，免费下载360大师版
写作神器，高效创作，轻松驾驭！
企业网站推广应避免哪些问题？
创新百种营销，一语道破天机
余额宝上限多少？如何解除限制？
滁州网站优化，如何用关键词拉近客户心？,宜昌网站建设设计服务
GIDLE女神降临，闪耀舞台！
广告推广平台有哪些？目前最主流的是这9类平台！
运营助理面试
“关键词霸屏，速登搜索引擎巅峰”
长沙房价持续攀升，最新走势揭秘！
SEO优化，关键词策略，提升网站排名！
站群利器，企业营销加速器
油城视觉先锋设计工作室
杭州抖音SEO推广公司收费情况如何？
淘宝聚划算活动效果好吗？参加值不值？
闲鱼商品真伪如何保障？
专业网络推广，助力品牌腾飞！
创业公司该如何做品牌热传播与产品冷启动？
