建立可持续网络的标准
在大多数主要行业中，环境绩效的关键指标已经相当成熟，例如汽车每加仑英里数或家庭每平方米能源。计算这些指标的工具和方法也是标准化的，这让每个人在进行环境评估时都能保持一致。然而，在网站和应用程序的世界中，我们并没有遵守任何特定的环境标准，而且直到最近我们才获得了进行环境评估所需的工具和方法。
可持续网页设计的主要目标是减少碳排放。然而，几乎不可能实际测量网络产品产生的 CO 2量。我们无法测量笔记本电脑排气管排出的烟雾。我们网站的排放很远，看不见也想不到，来自燃烧煤炭和天然气的发电站。我们无法将电子从网站或应用程序追溯到发电的发电站，也无法真正知道产生的温室气体的确切数量。那么我们该怎么办？
如果我们不能测量实际的碳排放量，那么我们需要找到我们可以测量的东西。可用作碳排放指标的主要因素有：
- 数据传输
- 电力碳强度
让我们看看如何使用这些指标来量化我们创建的网站和 Web 应用程序的能源消耗，进而量化碳足迹。
数据传输
大多数研究人员在测量使用网站或应用程序时通过 Internet 传输的数据量时，使用每 GB 千瓦时 (kWh/GB) 作为能源效率指标。这为能源消耗和碳排放提供了一个很好的参考点。根据经验，传输的数据越多，数据中心、电信网络和最终用户设备使用的能源就越多。
对于网页，单次访问的数据传输最容易通过测量页面权重来估算，这意味着页面的传输大小（以千字节为单位）在有人第一次访问该页面时。在任何现代 Web 浏览器中使用开发人员工具进行测量都相当容易。通常，您的网络托管帐户将包含任何网络应用程序的总数据传输统计数据（图 2.1）。
图 2.1： Kinsta 托管仪表板显示数据传输以及流量。如果按访问次数划分数据传输，则得到每次访问的平均数据，可以作为效率的衡量标准。
将页面权重作为衡量标准的好处在于，它允许我们在公平竞争的环境中比较网页的效率，而不会将问题与不断变化的流量混淆。
减少页面重量需要很大的范围。到 2020 年初，HTTP Archive 归类为“桌面”的设置页面重量中值为 1.97 MB，“移动”设置为 1.77 MB，自 2016 年 1 月以来，桌面页面重量增加了 36% ，同期移动页面重量几乎翻了一番（图 2.2）。大约一半的数据传输是图像文件，这使得图像成为普通网站上最大的碳排放源。
历史清楚地告诉我们，只要我们下定决心，我们的网页可以更小。虽然大多数技术变得越来越节能，包括网络的底层技术，如数据中心和传输网络，但网站本身是一种随着时间的推移变得越来越低效的技术。
图 2.2：来自 HTTP Archive 的历史页面权重数据可以告诉我们很多关于未来可能发生的事情。
您可能熟悉绩效预算的概念，它是让项目团队专注于创建更快的用户体验的一种方式。例如，我们可以指定网站必须在宽带连接上最多加载一秒，在 3G 连接上加载最多三秒。就像驾驶时的速度限制一样，性能预算是上限而不是模糊的建议，因此目标应该始终低于预算。
为快速性能而设计通常会减少数据传输和排放，但并非总是如此。Web 性能通常更多的是关于加载时间的主观感知，而不是底层系统的真正效率，而页面重量和传输大小是更客观的衡量标准和更可靠的可持续网页设计基准。
我们可以使用来自 HTTP Archive 等来源的数据，参考行业平均基准来设置页面权重预算。我们还可以将页面权重与竞争对手或我们正在替换的旧版本网站进行对比。例如，我们可以将最大页面重量预算设置为与我们最高效的竞争对手相同，或者我们可以将基准设置得更低以确保我们在同类产品中是最好的。
如果我们想把它提升到一个新的水平，那么我们也可以开始查看我们网页的传输大小以供重复访问者使用。尽管第一次访问的页面权重是最容易衡量的，并且很容易在同类基础上进行比较，但如果我们也开始查看其他场景中的传输大小，我们可以学到更多。例如，多次加载同一页面的访问者可能会将大部分文件缓存在浏览器中，这意味着他们不需要在后续访问时传输所有文件。同样，导航到同一网站上新页面的访问者可能不需要每次都加载整个页面，因为来自页眉和页脚等区域的一些全局资产可能已经缓存在他们的浏览器中。
在整个设计和开发过程中，页面重量预算很容易跟踪。尽管它们实际上并没有直接告诉我们碳排放和能源消耗分析，但它们为我们提供了相对于其他网站的效率的明确指示。由于传输大小是能源消耗的有效模拟，我们实际上也可以用它来估计能源消耗。
总之，减少数据传输转化为能源效率，这是减少网络产品碳排放的关键因素。我们的产品效率越高，它们使用的电力就越少，并且需要燃烧的化石燃料也就越少。但正如我们接下来将看到的，由于所有网络产品都需要一些电力，因此考虑电力的来源也很重要。
电力碳强度
无论能源效率如何，数字产品造成的污染程度取决于用于为其供电的能源的碳强度。碳强度是一个术语，用于定义每千瓦时电力产生的 CO 2克数 (gCO 2 /kWh)。这差异很大，可再生能源和核能的碳强度极低，低于 10 gCO 2 /kWh（即使考虑到它们的建设）；而化石燃料的碳强度非常高，约为 200-400 gCO 2 /kWh。
大多数电力来自国家或州电网，来自各种不同来源的能源与不同水平的碳强度混合在一起。互联网的分布式特性意味着网站或应用程序的单个用户可能同时使用来自多个不同电网的能源；巴黎的一个网站用户使用法国国家电网的电力为其家庭互联网和设备供电，但该网站的数据中心可能位于美国达拉斯，从德克萨斯电网获取电力，而电信网络使用达拉斯和巴黎。
我们无法控制 Web 服务的全部能源供应，但我们确实可以控制我们托管项目的位置。由于数据中心使用任何网站的大部分能源，将数据中心定位在低碳能源区域将显着减少其碳排放。丹麦初创公司 Tomorrow 报告并绘制了这些用户提供的数据，浏览他们的地图可以看出，例如，选择法国数据中心的碳排放量将显着低于荷兰数据中心（图 2.3）。
图 2.3：明天的电力地图显示了各国电力碳强度的实时数据。
也就是说，我们不想让我们的服务器离用户太远；通过电信网络传输数据需要能量，数据传输得越远，消耗的能量就越多。就像食物里程一样，我们可以将数据中心到网站核心用户群的距离视为“兆字节里程”——我们希望它尽可能小。
使用距离本身作为基准，我们可以使用网站分析来识别我们的核心用户群所在的国家、州甚至城市，并测量从该位置到我们托管公司使用的数据中心的距离。这将是一个有点模糊的指标，因为我们不知道用户的精确质心或数据中心的确切位置，但我们至少可以大致了解一下。
例如，如果一个网站托管在伦敦，但主要用户群位于美国西海岸，那么我们可以查找从伦敦到旧金山的距离，即 5,300 英里。那是一条很长的路！我们可以看到，将其托管在北美某个地方，最好是在西海岸，将显着减少距离，从而减少用于传输数据的能量。此外，将我们的服务器放置在更靠近访问者的位置有助于减少延迟并提供更好的用户体验，因此是双赢的。
将其转换回碳排放
如果我们将碳强度与能源消耗的计算结合起来，我们就可以计算出我们网站和应用程序的碳排放量。我的团队创建的一个工具通过在加载网页时测量通过电线传输的数据、计算相关的电量，然后将其转换为 CO 2的数字来实现这一点（图 2.4）。它还考虑了网络托管是否由可再生能源供电。
如果您想将其提升到一个新的水平并根据您项目的独特方面更准确地定制数据，本书随附的能源和排放工作表将向您展示如何进行。
图 2.4：网站碳计算器显示 Riverford Organic 网站如何体现他们对可持续发展的承诺，既低碳又托管在使用可再生能源的数据中心。
有了为我们的项目计算碳排放量的能力，我们实际上可以将页面权重预算更进一步，并设置碳预算。CO 2不是 Web 项目中常用的指标；我们更熟悉千字节和兆字节，并且可以相当容易地查看设计选项和文件来评估它们有多大。将其转化为碳增加了一层不那么直观的抽象——但碳预算确实将我们的注意力集中在我们试图减少的主要事情上，并支持可持续网页设计的核心目标：减少碳排放。
浏览器能量
在我们的数字项目中，数据传输可能是最简单、最完整的能源消耗模拟，但通过给我们一个数字来代表数据中心、电信网络和最终用户设备中使用的能源，它无法为我们提供深入了解系统任何特定部分的效率。
我们可以更详细地了解系统的一部分是最终用户设备使用的能源。随着前端网络技术变得越来越先进，计算负载越来越多地从数据中心转移到用户的设备上，无论是手机、平板电脑、笔记本电脑、台式机，还是智能电视。现代网络浏览器允许我们使用 CSS 和 JavaScript 即时实现更复杂的样式和动画。此外，Angular 和 React 等 JavaScript 库允许我们创建应用程序，其中“思考”工作部分或全部在浏览器中完成。
所有这些进步都令人兴奋，并为网络服务社会和创造积极体验开辟了新的可能性。然而，用户的网络浏览器中的更多计算意味着他们的设备使用更多的能量。这不仅对环境有影响，而且对用户体验和包容性也有影响。在用户设备上施加繁重处理负载的应用程序可能会无意中排除使用较旧、较慢设备的用户，并导致手机和笔记本电脑上的电池消耗更快。此外，如果我们构建的 Web 应用程序需要用户拥有最新的、功能强大的设备，那么人们会更频繁地丢弃旧设备。这不仅对环境不利，而且给社会上最贫穷的人带来了不成比例的经济负担。
部分原因是工具有限，部分原因是设备型号众多，很难衡量最终用户设备上的网站能耗。我们目前拥有的一个工具是 Safari 浏览器的开发者控制台中的 Energy Impact 监视器（图 2.5）。
图 2.5： Safari 中的能源影响计量器（右侧）显示了网站如何消耗 CPU 能源。
您知道当您加载一个网站并且您的计算机的冷却风扇开始疯狂旋转时，您认为它可能真的起飞了吗？这基本上就是这个工具正在测量的内容。
它向我们展示了加载网页时 CPU 使用的百分比和 CPU 使用的持续时间，并使用这些数据生成能源影响等级。它没有为我们提供以千瓦为单位的用电量的精确数据，但它提供的信息可用于衡量您的网站使用能源的效率并设定改进目标。
