可持续网页设计：降低碳排放的技术策略
建立可持续网络标准
在大多数主要行业中，环境性能的关键指标已经相当成熟，例如汽车的每加仑英里数或房屋的每平方米能耗。计算这些指标的工具和方法也已标准化，使每个人在进行环境评估时都能保持一致。然而，在网站和应用程序的世界中，我们并没有受到任何特定的环境标准约束，直到最近才获得了进行环境评估所需的工具和方法。
可持续网页设计的主要目标是减少碳排放。然而，几乎不可能实际测量网络产品产生的二氧化碳量。我们无法测量笔记本电脑排气管排出的烟雾。我们网站的排放物远在天边，来自燃烧煤炭和天然气的发电站，既看不见也想不到。我们无法将网站或应用程序的电子追溯到发电站，并确切知道产生的温室气体量。那么，我们该怎么办？
如果我们无法测量实际的碳排放，那么我们需要找到可以测量的东西。可以用作碳排放指标的主要因素是：
- 数据传输
- 电力碳强度
让我们看看如何使用这些指标来量化我们创建的网站和网络应用程序的能耗，进而量化碳足迹。
数据传输
大多数研究人员使用每千兆字节千瓦时（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：网站碳计算器显示Riverford Organic网站如何体现他们对可持续性的承诺，既是低碳的，又托管在使用可再生能源的数据中心。
有了计算项目碳排放的能力，我们实际上可以将页面重量预算更进一步，并设置碳预算。二氧化碳不是网络项目中常用的指标；我们更熟悉千字节和兆字节，并且可以相当容易地查看设计选项和文件以评估它们的大小。将其转换为碳增加了一层不那么直观的抽象——但碳预算确实让我们专注于我们试图减少的主要事物，并支持可持续网页设计的核心目标：减少碳排放。
浏览器能源
数据传输可能是我们数字项目中最简单和最完整的能耗类比，但通过给我们一个数字来表示数据中心、电信网络和终端用户设备中使用的能源，它无法提供系统任何特定部分效率的见解。
我们可以更详细查看的系统部分是终端用户设备使用的能源。随着前端网络技术的进步，计算负载越来越多地从数据中心转移到用户的设备，无论是手机、平板电脑、笔记本电脑、台式机还是智能电视。现代网络浏览器允许我们使用CSS和JavaScript实时实现更复杂的样式和动画。此外，Angular和React等JavaScript库允许我们创建应用程序，其中“思考”工作部分或完全在浏览器中完成。
所有这些进步都令人兴奋，并为网络服务社会和创造积极体验开辟了新的可能性。然而，用户网络浏览器中的更多计算意味着他们的设备使用更多能源。这不仅对环境有影响，而且对用户体验和包容性也有影响。对用户设备施加重处理负载的应用程序可能会无意中排除使用较旧、较慢设备的用户，并导致手机和笔记本电脑的电池消耗更快。此外，如果我们构建要求用户拥有最新、强大设备的网络应用程序，人们会更频繁地扔掉旧设备。这不仅对环境不利，而且给社会中最贫困的人带来了不成比例的经济负担。
部分因为工具有限，部分因为设备型号如此之多，很难测量终端用户设备上的网站能耗。我们目前拥有的一个工具是Safari浏览器开发者控制台内的能源影响监视器（图2.5）。
图2.5：Safari中的能源影响表（右侧）显示网站如何消耗CPU能源。
您知道当您加载一个网站时，您计算机的冷却风扇开始如此疯狂地旋转，以至于您认为它可能真的会起飞吗？这基本上就是这个工具测量的东西。
它向我们显示加载网页时使用的CPU百分比和CPU使用持续时间，并使用这些数字生成能源影响评级。它不提供以千瓦为单位的用电量的精确数据，但它提供的信息可用于基准测试您的网站如何使用能源并设定改进目标。