可持续网页设计（节选）
确立可持续网页标准
在大多数主要行业中，环境绩效的关键指标已经相当成熟，例如汽车的每加仑英里数或房屋的每平方米能耗。计算这些指标的工具和方法也已标准化，使每个人在进行环境评估时都能保持一致。然而，在网站和应用领域，我们并未受到任何特定环境标准的约束，直到最近才获得了进行环境评估所需的工具和方法。
可持续网页设计的主要目标是减少碳排放。但实际上测量网络产品产生的二氧化碳量几乎是不可能的。我们无法测量笔记本电脑排气管排出的烟雾。我们网站的排放物远在天边，来自燃烧煤炭和天然气的发电站，既看不见也想不到。我们无法将网站或应用的电子追溯到发电站，并确切了解产生的温室气体量。那么我们该怎么做？
如果我们无法测量实际的碳排放，那么我们需要找到可以测量的指标。可用作碳排放指标的主要因素包括：
- 数据传输
- 电力的碳强度
让我们看看如何利用这些指标来量化我们创建的网站和网络应用的能量消耗，进而量化碳足迹。
数据传输
大多数研究人员在测量网站或应用使用时通过互联网传输的数据量时，使用每千兆字节千瓦时（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显示了各国电力碳强度的实时数据。
也就是说，我们不想将服务器设在离用户太远的地方；通过电信网络传输数据需要能量，数据传播的距离越远，消耗的能量就越多。就像食物里程一样，我们可以将数据中心到网站核心用户群的距离视为“兆字节里程”——我们希望它尽可能小。
使用距离本身作为基准，我们可以使用网站分析来识别核心用户群所在的国家、州甚至城市，并测量从该位置到我们托管公司使用的数据中心的距离。这将是一个有些模糊的指标，因为我们不知道用户的确切质心或数据中心的确切位置，但我们至少可以得到一个粗略的概念。
例如，如果一个网站托管在伦敦，但主要用户群在美国西海岸，那么我们可以查找从伦敦到旧金山的距离，即5,300英里。那是一段很长的路！我们可以看到在北美某处托管，理想情况下在西海岸，将显著减少距离，从而减少传输数据所用的能量。此外，将服务器设在更靠近访问者的位置有助于减少延迟并提供更好的用户体验，所以这是双赢。
转换回碳排放
如果我们将碳强度与能量消耗计算结合起来，我们可以计算网站和应用的碳排放。我的团队创建的一个工具通过测量加载网页时的数据传输，计算相关的电量，然后将其转换为二氧化碳数字（图2.4）。它还考虑了虚拟主机是否由可再生能源供电。
如果您想更上一层楼，并将数据更准确地调整到您项目的独特方面，本书附带的能量和排放工作表将向您展示如何操作。
图2.4：Website Carbon Calculator显示Riverford Organic网站如何体现他们对可持续性的承诺，既是低碳的，又托管在使用可再生能源的数据中心。
有了计算项目碳排放的能力，我们实际上可以将页面重量预算更进一步，并设定碳预算。CO2不是网络项目中常用的度量标准；我们更熟悉千字节和兆字节，并且可以相当容易地查看设计选项和文件以评估它们的大小。将其转换为碳增加了一层不那么直观的抽象——但碳预算确实让我们专注于我们试图减少的主要事物，并支持可持续网页设计的核心目标：减少碳排放。
浏览器能量
数据传输可能是我们数字项目中能量消耗最简单和最完整的类比，但通过给我们一个数字来表示数据中心、电信网络和终端用户设备中使用的能量，它无法提供系统任何特定部分效率的见解。
我们可以更详细查看的系统部分是终端用户设备使用的能量。随着前端网络技术变得越来越先进，计算负载正越来越多地从数据中心转移到用户设备，无论是手机、平板电脑、笔记本电脑、台式机还是智能电视。现代网页浏览器允许我们使用CSS和JavaScript实时实现更复杂的样式和动画。此外，Angular和React等JavaScript库允许我们创建“思考”工作部分或完全在浏览器中完成的应用。
所有这些进步都令人兴奋，并为网络服务社会和创造积极体验开辟了新的可能性。然而，用户网页浏览器中更多的计算意味着他们的设备使用更多的能量。这不仅对环境有影响，而且对用户体验和包容性也有影响。对用户设备施加沉重处理负载的应用可能无意中排除了使用较旧、较慢设备的用户，并导致手机和笔记本电脑的电池消耗更快。此外，如果我们构建要求用户拥有最新、强大设备的网络应用，人们会更频繁地丢弃旧设备。这不仅对环境不利，而且给社会中最贫困的人带来了不成比例的经济负担。
部分因为工具有限，部分因为有如此多不同型号的设备，很难测量终端用户设备上的网站能量消耗。我们目前确实拥有的一个工具是Safari浏览器开发者控制台内的能量影响监视器（图2.5）。
图2.5：Safari中的能量影响表（右侧）显示网站如何消耗CPU能量。
您知道当您加载一个网站时，您计算机的冷却风扇开始如此疯狂地旋转，以至于您认为它可能真的会起飞吗？这基本上就是这个工具正在测量的。
它显示加载网页时使用的CPU百分比和CPU使用时长，并使用这些数字生成能量影响评级。它不提供以千瓦为单位的用电量的精确数据，但它提供的信息可用于基准测试您的网站使用能量的效率，并设定改进目标。