可持续网页设计，节选

编辑注：我们很高兴分享汤姆·格林伍德（Tom Greenwood）所著《可持续网页设计》（A Book Apart出版）第二章的节选内容。

在20世纪50年代，许多精英跑步社区开始相信人类不可能在四分钟内跑完一英里。自19世纪末以来，跑步者一直在尝试突破这一极限，并逐渐得出结论：人体根本不适合完成这项任务。

但在1956年5月6日，罗杰·班尼斯特（Roger Bannister）让所有人惊讶。那天英国牛津寒冷潮湿，没人期望这种条件能打破纪录，但班尼斯特做到了，他以3分59.4秒的成绩跑完一英里，成为纪录簿上第一个在四分钟内完成一英里的人。

这一基准的转变产生了深远影响；世界现在知道四分钟一英里是可能的。班尼斯特的纪录仅保持了46天，就被澳大利亚跑步者约翰·兰迪（John Landy）打破。一年后，三名跑步者在同一场比赛中一起打破了四分钟障碍。自那时起，超过1400名跑步者正式在四分钟内跑完一英里；当前纪录是3分43.13秒，由摩洛哥运动员希查姆·埃尔·盖鲁伊（Hicham El Guerrouj）保持。

当我们相信某事是可能的时，我们会取得更多成就，而只有当我们看到别人已经做到时，我们才会相信它是可能的——就像人类跑步速度一样，我们对网站性能的硬限制也是如此。

建立可持续网页的标准

在大多数主要行业中，环境性能的关键指标已经相当成熟，例如汽车的每加仑英里数或房屋的每平方米能耗。计算这些指标的工具和方法也已标准化，这使得在进行环境评估时每个人都能保持一致。然而，在网站和应用程序的世界中，我们不受任何特定环境标准的约束，直到最近才获得了进行环境评估所需的工具和方法。

可持续网页设计的主要目标是减少碳排放。然而，几乎不可能实际测量网页产品产生的二氧化碳量。我们无法测量笔记本电脑排气管排出的烟雾。我们网站的排放物远在天边，看不见也想不到，来自燃烧煤炭和天然气的发电站。我们无法追踪从网站或应用程序产生的电子回发电站，并确切知道产生的温室气体量。那么我们该怎么做？

如果我们无法测量实际的碳排放，那么我们需要找到可以测量的东西。可用作碳排放指标的主要因素包括：

• 数据转移
• 电力碳强度

让我们看看如何使用这些指标来量化我们创建的网站和网络应用程序的能耗，进而量化碳足迹。

数据转移

大多数研究人员使用每千兆字节千瓦时（kWh/GB）作为衡量网站或应用程序使用时通过互联网传输数据量的能效指标。这为能耗和碳排放提供了一个很好的参考点。根据经验，传输的数据越多，数据中心、电信网络和终端用户设备使用的能源就越多。

对于网页，单次访问的数据转移可以通过测量页面权重来最容易地估计，即首次访问页面时的传输大小（以千字节为单位）。使用任何现代网页浏览器的开发者工具很容易测量。通常，您的网络托管账户会包括任何网络应用程序的总数据转移统计（图2.1）。

图2.1：Kinsta托管仪表板显示数据转移和流量量。如果将数据转移除以访问次数，您会得到每次访问的平均数据，这可以用作效率指标。

页面权重作为指标的好处是，它允许我们在公平的竞争环境中比较网页的效率，而不会因不断变化的流量量而混淆问题。

减少页面权重需要广泛的范围。到2020年初，HTTP Archive分类为“桌面”的设置中，中位页面权重为1.97 MB，“移动”为1.77 MB，桌面自2016年1月以来增加了36%，移动页面权重在同一时期几乎翻倍（图2.2）。大约一半的数据转移是图像文件，使图像成为普通网站上碳排放的最大单一来源。

历史清楚地告诉我们，我们的网页可以更小，只要我们下定决心。虽然大多数技术变得越来越节能，包括网络的底层技术如数据中心和传输网络，但网站本身是一种随着时间推移效率降低的技术。

图2.2：HTTP Archive的历史页面权重数据可以教我们很多关于未来可能性的东西。

您可能熟悉性能预算的概念，作为一种让项目团队专注于创造更快用户体验的方式。例如，我们可能指定网站在宽带连接上最多加载一秒，在3G连接上加载三秒。就像驾驶时的速度限制一样，性能预算是上限而不是模糊建议，因此目标应始终是低于预算。

设计快速性能通常会导致数据转移和排放减少，但并不总是如此。网页性能通常更多关于加载时间的主观感知，而不是底层系统的真实效率，而页面权重和传输大小是更客观的衡量标准，也是可持续网页设计更可靠的基准。

我们可以参考行业平均值的基准来设置页面权重预算，使用来自HTTP Archive等来源的数据。我们还可以根据竞争对手或我们正在替换的网站旧版本对页面权重进行基准测试。例如，我们可以将最大页面权重预算设置为等于我们最有效的竞争对手，或者设置更低的基准以保证我们是同类最佳。

如果我们想更上一层楼，我们还可以开始查看重复访问者的网页传输大小。尽管首次访问的页面权重是最容易测量的，并且易于在同类基础上进行比较，但如果我们开始查看其他场景中的传输大小，我们可以学到更多。例如，多次加载同一页面的访问者很可能在浏览器中缓存了高比例的文件，这意味着他们在后续访问中不需要传输所有文件。同样，导航到同一网站新页面的访问者可能不需要每次加载完整页面，因为来自页眉和页脚等区域的某些全局资产可能已经缓存在他们的浏览器中。在这种更详细的级别测量传输大小可以帮助我们了解更多关于如何为经常访问我们页面的用户优化效率，并使我们能够为首次访问之外的额外场景设置页面权重预算。

页面权重预算在整个设计和开发过程中易于跟踪。尽管它们不直接告诉我们碳排放和能耗分析，但它们给出了相对于其他网站效率的清晰指示。由于传输大小是能耗的有效类比，我们实际上也可以使用它来估计能耗。

总之，减少数据转移转化为能源效率，这是减少网页产品碳排放的关键因素。我们的产品越高效，它们使用的电力就越少，燃烧化石燃料发电的需求就越少。但正如我们接下来将看到的，由于所有网页产品都需要一些电力，考虑电力的来源也很重要。

电力碳强度

无论能效如何，数字产品造成的污染水平取决于为其供电的能源的碳强度。碳强度是一个术语，用于定义每千瓦时电力产生的二氧化碳克数（gCO2/kWh）。这变化很大，可再生能源和核能的碳强度极低，低于10 gCO2/kWh（即使考虑其建设）；而化石燃料的碳强度非常高，大约为200–400 gCO2/kWh。

大多数电力来自国家或州电网，其中来自各种不同来源的能源以不同水平的碳强度混合在一起。互联网的分布式性质意味着网站或应用程序的单个用户可能同时使用来自多个不同电网的能源；巴黎的网站用户使用法国国家电网的电力为家庭互联网和设备供电，但网站的数据中心可能在美国达拉斯，从德克萨斯电网获取电力，而电信网络使用从达拉斯到巴黎之间各地的能源。

我们无法控制网络服务的全部能源供应，但我们确实对托管项目的位置有一些控制。由于数据中心使用任何网站的相当大比例的能源，将数据中心设在低碳能源地区将切实减少其碳排放。丹麦初创公司Tomorrow报告并映射这些用户贡献的数据，瞥一眼他们的地图显示，例如，选择法国的数据中心将比荷兰的数据中心碳排放显著降低（图2.3）。

图2.3：Tomorrow的electricityMap显示各国电力碳强度的实时数据。

也就是说，我们不想将服务器设在离用户太远的地方；通过电信网络传输数据需要能源，数据传播越远，消耗的能源就越多。就像食物里程一样，我们可以将数据中心到网站核心用户群的距离视为“兆字节英里”——我们希望它尽可能小。

使用距离本身作为基准，我们可以使用网站分析来识别核心用户群所在的国家、州甚至城市，并测量该位置到我们托管公司使用的数据中心的距离。这将是一个有些模糊的指标，因为我们不知道用户的确切质心或数据中心的确切位置，但至少我们可以得到一个粗略的概念。

例如，如果一个网站托管在伦敦，但主要用户群在美国西海岸，那么我们可以查找从伦敦到旧金山的距离，即5300英里。那是一段很长的路！我们可以看到，在北美某地托管，理想情况下在西海岸，将显著减少距离，从而减少传输数据使用的能源。此外，将服务器设在更靠近访问者的位置有助于减少延迟并提供更好的用户体验，所以这是双赢。

转换回碳排放

如果我们将碳强度与能耗计算结合起来，我们可以计算网站和应用程序的碳排放。我的团队创建的一个工具通过测量加载网页时的数据传输，计算相关的电量，然后将其转换为二氧化碳数字（图2.4）。它还考虑了网络托管是否由可再生能源供电。

如果您想更上一层楼，并将数据更准确地定制到您项目的独特方面，本书附带的能源和排放工作表将向您展示如何操作。

图2.4：网站碳计算器显示Riverford Organic网站如何体现他们对可持续性的承诺，既是低碳的，又托管在使用可再生能源的数据中心。

有了计算项目碳排放的能力，我们实际上可以将页面权重预算更进一步，并设置碳预算。二氧化碳不是网页项目中常用的指标；我们更熟悉千字节和兆字节，并且可以相当容易地查看设计选项和文件以评估它们的大小。将其转换为碳增加了一层不那么直观的抽象——但碳预算确实让我们专注于我们试图减少的主要事物，并支持可持续网页设计的核心目标：减少碳排放。

浏览器能源

数据转移可能是我们数字项目中能耗最简单和最完整的类比，但通过给我们一个数字来表示数据中心、电信网络和终端用户设备中使用的能源，它无法提供系统任何特定部分效率的见解。

我们可以更详细查看的系统一部分是终端用户设备使用的能源。随着前端网页技术变得越来越先进，计算负载越来越多地从数据中心转移到用户的设备，无论是手机、平板电脑、笔记本电脑、台式机还是智能电视。现代网页浏览器允许我们使用CSS和JavaScript实时实现更复杂的样式和动画。此外，如Angular和React等JavaScript库允许我们创建应用程序，其中“思考”工作部分或完全在浏览器中完成。

所有这些进步令人兴奋，并为网页服务社会和创造积极体验开辟了新的可能性。然而，用户网页浏览器中更多的计算意味着他们的设备使用更多的能源。这不仅对环境有影响，而且对用户体验和包容性也有影响。对用户设备施加重处理负载的应用程序可能无意中排除了使用较旧、较慢设备的用户，并导致手机和笔记本电脑电池消耗更快。此外，如果我们构建要求用户拥有最新、强大设备的网络应用程序，人们会更频繁地扔掉旧设备。这不仅对环境不利，而且对社会中最贫困的人造成了不成比例的经济负担。

部分因为工具有限，部分因为设备型号如此之多，很难测量终端用户设备上的网站能耗。我们目前拥有的一个工具是Safari浏览器开发者控制台内的能源影响监视器（图2.5）。

图2.5：Safari中的能源影响仪表（右侧）显示网站如何消耗CPU能源。

您知道当您加载一个网站时，您计算机的冷却风扇开始如此疯狂地旋转，以至于您认为它可能真的起飞吗？这基本上就是这个工具测量的东西。

它显示加载网页时使用的CPU百分比和CPU使用持续时间，并使用这些数字生成能源影响评级。它不提供以千瓦为单位的用电量的精确数据，但它提供的信息可用于基准测试您的网站如何使用能源的效率，并设定改进目标。