可持续的网络设计，摘录

在20世纪50年代，许多人在精英运行的社区中已经开始相信在不到4分钟的时间里不可能运行一英里。自19世纪末以来，赛跑者一直在尝试它，并且开始得出人体根本不是为任务建造的结论。

但是在1956年5月6日，Roger Bannister让每个人都惊讶。这是一个寒冷的潮湿的一天，牛津，英格兰 - 条件没有人预计将自己借给创纪录 - 而且禁止队的速度只是在3：59.4中运行一英里，成为纪录纪录的第一个人在四分钟内。

基准中的这种转变有深刻的影响;世界现在知道四分钟的英里是可能的。班尼斯特的记录持续了四十六天，当时它被澳大利亚赛跑者约翰兰迪抢走了。然后一年后，三名跑步者都在同一种族中击败了四分钟的屏障。从那以后，超过1,400名赛跑者正式四分钟内跑一英里;目前的记录是3：43.13，由摩洛哥运动员Hicham El Guerrouj举办。

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

为可持续网络建立标准＃section2.

在大多数主要行业，环境绩效的关键指标已经相当完善，如汽车每加仑行驶里程或家庭每平方米的能源。计算这些指标的工具和方法也是标准化的，这使得每个人在进行环境评估时都保持一致。然而，在网站和应用程序的世界里，我们不需要遵守任何特定的环境标准，直到最近才获得了我们甚至需要进行环境评估的工具和方法。

可持续网页设计的主要目标是减少碳排放。但是，实际衡量有限度的金额几乎是不可能的₂由网页制作。我们无法测量笔记本电脑上排气管道的烟雾。我们的网站的排放远处，不在视线和心中，出于燃烧的煤炭和天然气的发电站。我们无法从网站或应用程序追溯电子的电子电台，其中产生电力，实际上知道所产生的温室气体的确切量。那么我们该怎么办？

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

1. 数据传输
2. 碳强度的电力

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

数据传输＃第3部分

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

对于网页，通过测量，可以最容易地估计单一访问的数据传输页面重量，这意味着第一次访问页面时，页面的转移大小在千字节中。使用任何现代Web浏览器中的开发人员工具衡量它相当容易。通常，您的网络托管帐户将包括任何Web应用程序的总数据传输的统计信息（图2.1）。

页面重量作为度量标准的好处是它允许我们在级别播放字段上比较网页的效率而不使不断变化的流量卷混淆问题。

减少页面重量需要大范围。到2020年初，设置HTTP存档分类为“移动”，中位数重量为1.97 MB，分类为“Mobile”为“Mobile”和1.77 MB，以来，桌面增加36％，近乎移动页面重量在同一时期翻了一番（图2.2）。大约一半的数据传输是图像文件，使图像在平均网站上的单个最大碳排放来源。

历史清楚地向我们展示了我们的网页可以更小，如果我们将我们的思想设置为它。虽然大多数技术变得更加节能，但包括数据中心和传输网络等网络的潜在技术，网站本身是一种随着时间的推移而变得效率的技术。

您可能熟悉绩效预算的概念，作为将项目团队创建更快的用户体验的方式。例如，我们可能会指定网站必须在宽带连接上最多一次加载一秒钟，并在3G连接上进行三秒钟。驾驶时的速度限很大，绩效预算是上限而不是模糊的建议，因此目标应始终在预算下进入。

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

我们可以参考行业平均值的基准，使用来自HTTP存档等源的数据来设置页面重量预算。我们还可以对竞争对手或正在更换的网站的旧版本进行基准重量。例如，我们可能会设置最大页面重量预算，如我们最有效的竞争对手，或者我们可以将较低的基准设置为保证我们在课堂上最好。

如果我们希望将其带到一个下一个级别，那么我们也可以开始查看我们的网页的传输大小以重复访问者。虽然页面重量第一次访问是最容易测量的最简单的事情，但易于比较类似的基础，如果我们也开始在其他场景中查看传输大小，我们就可以了解更多。例如，加载同一页面多次加载相同页面的访问者可能会在其浏览器中缓存高百分比，这意味着它们不需要在后续访问时传输所有文件。同样，在同一网站上导航到新页面的访客可能每次都不需要加载完整页面，因为来自标题和页脚等区域的一些全球资产可能已经在其浏览器中缓存。在下一级细节下测量传输规模可以帮助我们更多地学习关于如何优化定期访问我们页面的用户效率的更多信息，并使我们能够为第一次访问之外的其他方案设置页面重量预算。

在整个设计和开发过程中，页面重量预算很容易跟踪。虽然他们实际上并没有直接告诉我们碳排放和能量消耗分析，但他们可以清楚地表明相对于其他网站的效率。随着转移大小是能耗的有效模拟，我们实际上可以使用它来估算能量消耗。

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

碳强度的电力＃第4部分

无论能量效率如何，数字产品造成的污染程度取决于碳强度用来驱动它们的能量。碳强度是一个用来定义CO的克数的术语₂为每千瓦时的电力生产（GCO₂/ kWh）。这有广泛变化，可再生能源和核极低的碳强度少于10个GCO₂/ kWh（即使在他们的建筑中考虑）;虽然化石燃料有高碳强度大约200-400 GCO₂/ kWh。

大多数电力来自国家或州电网，在那里，各种不同来源的能源混合在一起，碳强度不同。互联网的分布式本质意味着一个网站或应用程序的单个用户可能同时使用来自多个不同网格的能源;巴黎的一个网站用户使用来自法国国家电网的电力来为他们的家庭互联网和设备供电，但该网站的数据中心可能位于美国达拉斯，从德克萨斯州电网供电，而电信网络使用从达拉斯和巴黎之间的任何地方供电。

我们无法控制网络服务的全部能源供应，但我们可以控制我们的项目托管地点。由于数据中心使用的能源占任何网站的很大比例，将数据中心设在低碳能源地区将切实减少其碳排放。丹麦创业公司Tomorrow报道地图此用户贡献的数据在他们的地图上浏览一眼，展示了例如选择法国的数据中心将在荷兰的数据中心具有显着降低的碳排放量（图2.3）。

也就是说，我们不想从用户那里找到我们的服务器;它需要通过电信网络传输数据，并且进一步的数据行进，所以能量越多。就像食物里程一样，我们可以将与“Megabyte Miles”的网站核心用户群中的距离视为“Megabyte Miles” - 我们希望它尽可能小。

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

例如，如果网站托管在伦敦，但主要用户群位于美国的西海岸，那么我们可以查找伦敦到旧金山的距离，这是5,300英里。这是很长的路！我们可以看到托管它在北美的某个地方，理想情况下，在西海岸，将大大减少距离，因此用于传输数据的能量。此外，将我们的服务器更接近我们的访客有助于降低延迟并提供更好的用户体验，因此这是一个双赢。

将其转化为碳排放＃第5部分

如果我们将碳强度与能耗计算结合，我们可以计算我们网站和应用程序的碳排放。通过在加载网页时测量电线上的数据传输来计算我的团队的工具，计算相关的电量，然后将其转换为CO的图形₂（图2.4）。Web托管是否由可再生能源提供支持的问题。

如果您想将其带到下一个级别并更准确地定制数据，以便更准确地到项目的独特方面，能量和排放工作表陪同本书向您展示了如何。

通过计算我们项目的碳排放的能力，我们实际上可以进一步迈出一步一步并设定碳预算。CO.₂不是web项目中常用的度量标准;我们更熟悉千字节和兆字节，可以很容易地查看设计选项和文件来评估它们有多大。将其转化为碳增加了一层不那么直观的抽象层，但碳预算确实把我们的思想集中在我们试图减少的主要事情上，并支持可持续网页设计的核心目标:减少碳排放。

浏览器能量＃第6部分

数据传输可能是最简单、最完整的模拟对能源消费在我们的数字项目,而是给我们一个数字代表的能量用于数据中心、电信网络,和最终用户的设备,它不能为我们提供洞察效率在任何特定的系统的一部分。

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

所有这些进步都是令人兴奋的，开辟了网络可以做些什么来为社会做些什么来开辟新的可能性。但是，用户的Web浏览器中的更多计算意味着其设备使用的更多能量。这不仅仅是环境的影响，而且涉及用户体验和包容性。在用户设备上放置沉重处理负载的应用程序可以无意中排除具有较旧设备的用户，并使电池和笔记本电脑上的电池耗尽更快。此外，如果我们构建要求用户拥有最新，强大的设备的Web应用程序，人们更频繁地丢弃旧设备。这对环境不利，但它对社会最贫穷的贫困人士表示不成比例的金融负担。

部分原因是工具有限，部分原因是设备有太多不同的模型，很难测量终端用户设备上的网站能耗。我们目前使用的一个工具是Safari浏览器开发控制台中的Energy Impact监控器(图2.5）。

你知道你加载网站时，你的电脑的冷却粉丝开始旋转如此疯狂地你认为它可能实际起飞吗？这基本上是这个工具测量的。

它向我们展示了在加载网页时使用的CPU的百分比和CPU使用时间，并使用这些数字来产生能量影响等级。它没有为千瓦使用的电力量提供精确的数据，但它提供的信息可用于基准测试您的网站如何使用能量和设置改进目标。