页面重量至关重要

# 大小确实很重要 来源：https://nh3.dev/blog/05-bloat ## 页面权重随时间变化的图表 我想从这张我制作的图表说起\[1\]数据于2026年7月27日获取，由HTTP归档（https://httparchive.org/）慷慨提供——基于大约447KB的轻量级页面（https://httparchive.org/reports/page-weight）——我强烈建议你去看看，恰好它遵循了本文提出的原则。图表是用R语言的tidyverse（https://tidyverse.org/）元包绘制的。 你注意到了什么？ ……上升趋势？ 你觉得这合理吗？网页内容真的比30年前好了130倍，才配得上从大约200KB增长到中位数约2.5MB的代价吗？我认为不是。 图片、视频和文本——*真正的*内容——变得更容易获取也更普遍——这无疑是好事——但我发现自己对互联网的现状感到失望。我们那些88x31像素的老式横幅呢？曾经的魅力去哪了？让小巧高效的网站成为常态的匠心去哪了？ 如今我在网络上爬行，被AI生成的垃圾内容、广告（以及AI生成的广告）所拖累，背后是几兆字节的不可读压缩JavaScript，伪装成时尚现代的用户界面，被剥离了任何个性、意义或记忆。披着羊皮的狼。不过，这并非意味着不存在一个以性能为导向、可能同样沮丧的亚文化群体。而我正是在号召你们来纠正这种疯狂。 基于HTML和CSS构建的静态网页提供了一种简单、精简且安全的方式与世界互动、分享想法、撰写文章、进行研究——随便你说什么。即使是世界上的创业者兼开发者，也能学会通过“老派方式”蓬勃发展。我认为“静态”这个词有点用词不当——你只需要一个简单的HTTP服务器、一点CSS和一些毅力，就能完成很多事情。注意缺少JavaScript——它并不像你想的那么必要。那些优化“开发者体验”的Web框架已经失去了我的信任。它们的速度和易用性所创造的债务，最终完全由用户以巨大的负载形式来偿还。分析工具、跟踪代码和弹窗只会碍手碍脚，当你剥开这些腐烂且疯狂生长的表层时，你会看到互联网可靠的砖石结构：HTML和CSS。那才是*真正*内容所在。注意，这并非说JavaScript必然有害，但我认为它为一种不尊重用户的态度提供了温床。这一点也适用于Web之外的软件——Electron应用为了开发便利和跨平台承诺，浪费你的时间、内存和空间。它们不尊重你——至少在我看来如此——它们把用户视为可消耗品。如果你要参与不断增长的互联网，要警惕追随这类设计趋势，同时尊重你的客户和同行。 有一种观点四处流传，说我们这些“黑客”\[2\]如RFC-1983中定义，DOI:10.1787/RFC1983 (https://doi.org/10.17487/RFC1983)。只从自己的技术角度出发，并且持有只在我们社交圈内有意义的激进哲学。事实并非如此。优化和减轻用户负担的思维方式甚至可以延伸到主流的、大型的跨国公司——虽然罕见，但确实存在。速度的影响，尽管对普通人来说并不明显，但会转化为我们所有人都能感受到的烦恼。相反，麦马斯特-卡公司（https://www.mcmaster.com/）的优秀领导和才华横溢的开发团队帮助创建了一个极简主义的网站，成为现代建筑行业的标杆，同时却极其主流。打开他们的网页。我鼓励你。看看它加载得有多快，当有人对你说“现在的网站就是更复杂了，所以当然更大”这种谎言时，记住这一点。这个目录包含*数千*种独特的产品，但不仅由于巧妙的工程设计加载迅速，而且实际上*使用起来很愉快*。麦马斯特-卡的体验是工程师和UI设计师的梦想。它不杂乱。不像eBay或Amazon等其他商业目录那样充斥着无尽的嵌套下拉菜单和笨拙的搜索功能（如果你用过eBay，我肯定你知道我在说什么）。 但这种极简主义、功能重于形式的态度，怎么可能在企业界推广开来？难道股东不追求时尚现代的设计？产品经理不要求看起来比竞争对手更好吗？ 是的，通常是这样，对吧？我认为这是因为糟糕的领导层跟风了现代UI趋势这笔“铅漆”，向投资者承诺分红。事实上，这种心态与商业世界的需求是虚假的对立。实际上，当某样东西很“无聊”且“只是能用”时，用户会一次次回来。如果你处于领导地位，试着把这个案例研究视为一个被激励的机会。如果你是一个普通的非技术用户，欣赏平凡，停下来闻闻玫瑰花香。最后——也是最可能的情况——如果你是一名开发者，请被那些在无聊老网站后台运作的精妙技巧所启发： - 使用图片地图集来减少网络请求。它们只发送一张长条图。 - 使用固定宽度的图片——避免昂贵的DOM重绘。这个网站尽可能跳过所有重新布局。 - 内联关键CSS以防止布局偏移。 - 当你悬停在链接上时预加载页面，这样点击时就已经准备好了。利用假设和启发式方法来改善用户体验，牺牲*他们*服务器的工作量——在我看来，这与“大膨胀”截然相反。注意他们如何尊重你的时间，并且认为你的时间比他们的计算资源更有价值。 - 通过Service Worker进行客户端缓存——他们（字面意义上）阻止你发送不必要的请求。 - JavaScript打包。虽然他们确实用了不少JavaScript，但他们很谨慎，只包含每个页面实际使用的部分。 ……还有更多我可能还没发现的技巧。 我的观点是，快速不仅*可行*，而且*有益*\[3\]这一说法得到Web.dev的《为什么速度很重要》（https://web.dev/learn/performance/why-speed-matters）以及Ikášová, Tereza & Klepek, Martin. (2024). 《网站性能对商业销售的影响》，《金融互联网季刊》，20, 81-91. DOI:10.2478/fiqf-2024-0007 (https://doi.org/10.2478/fiqf-2024-0007) 以及其他易查资料的支持。这只是我读到的内容。——并且容易理解（有研究报告称，零售网站加载时间仅差0.1秒，转化率分别提高8%和10%，订单价值增长9.2%和1.9%；旅游网站分别为1.9%\[4\]德勤的《毫秒即百万》PDF (https://www.deloitte.com/content/dam/assets-zone2/ie/en/docs/services/consulting/2023/Milliseconds_Make_Millions_report.pdf)）。这才是留住用户的关键——而不是用无用的AI聊天机器人和似乎总是挡住点击、反复弹出的横幅来烦扰你。 至于那些与膨胀作斗争的个体（希望包括你在内），互联网上也有一片属于他们的空间。当然，我不是指那些流行的聊天平台，比如Discord、Telegram和X（前Twitter）。它们受制于政治、立法、破产的反复无常，并且只是把你的（元）数据卖给最高出价者——字面意思。不，我指的是网络环、IRC、XMPP、邮件列表以及其他小众的极客社区（比如这个！）。大众媒体让你成为产品。努力掌控你周围的技术，如果可能的话拥有它们，以免它们支配你。政府越来越习惯于剥夺你的自由（至少在世界上某些地方是这样）。无论你信不信，或者是否符合你所在的地方，保持、实践和维护你的权利对你来说仍然很重要。这是现代网络不尊重你——作为个体——的又一种方式。所以，如果你需要一个加入这些隐藏在公众视线之外的小众社区的信号，也许这就是了（考虑一下nh3.dev (https://nh3.dev/)？） 好了，不多说了。 ## TL;DR 用老方式制作网站——无论你是否是个人——尊重用户的时间、隐私和资源。你可以在Cloudflare的扫描服务（https://radar.cloudflare.com/scan/）的“网络”选项卡下检查你的性能和页面权重，看看你目前的状况。 ### 额外的深度阅读/实用建议 - 基于页面权重的俱乐部（顾名思义）： - 250KB.club (https://250kb.club/) - 512KB.club (https://512kb.club/) - 1MB.club (https://1mb.club/) - No-JS俱乐部（https://no-js.club/）（顾名思义）。 - Danluu关于网络膨胀的文章（https://danluu.com/web-bloat/）聚焦于连接速度。 - 这个三部曲。你可以随意打开并借鉴他们的想法/CSS/态度： - 这就是他妈的一个网站。（http://motherfuckingwebsite.com/） - 这是一个更好的他妈网站。（http://bettermotherfuckingwebsite.com/） - 这是一个最好的他妈网站。（http://bestmotherfuckingwebsite.com/） - 对比度叛乱（https://contrastrebellion.com/）关于对比度的文章，体现了功能重于形式的更广泛前提。 - 这个专门介绍系统字体堆栈（https://systemfontstack.com/）的网站；它们几乎总是应该被优先使用（在我看来）。