减少网络上的碳排放

已发表: 2022-03-10

快速总结 ↬不幸的是，网站并不像我们希望的那样环保。本文包含一些尝试清理它们的想法和经验。

与许多其他开发人员一样，过去几年有关网络巨大能源需求的报告促使我查看自己的网站，看看我能做些什么来最大程度地减少它们的影响。这篇文章将介绍我在这方面的一些经验，以及我目前对优化网站以减少碳排放的想法，以及一些可以用来改进自己页面的实际示例。

但首先，坦白：当我第一次听说网站对环境的影响时，我不太相信。毕竟，数字化应该对地球更好，不是吗？

几十年来，我一直参与各种绿色和环保组织。在那段时间里，我不记得有人讨论过网络可能对环境造成的影响。重点始终放在减少消耗和远离燃烧化石燃料上。唯一一次提到互联网是一种无需砍伐更多树木或无需通勤即可相互交流的工具。

所以，当人们第一次开始谈论互联网与航空业的碳排放量相似时，我有点怀疑。

排放

很难想象庞大的硬件网络允许您向服务器发送页面请求，然后接收响应。我们大多数人并不住在数据中心，将信号从一台计算机传输到另一台计算机的电缆通常埋在我们的脚下。当你看不到一个正在运行的过程时，整个事情会感觉有点像魔术——某些公司坚持在他们的产品名称中添加“云”和“无服务器”这样的词并没有帮助。

因此，长期以来，我对互联网的看法有点昙花一现，一种海市蜃楼。然而，当我开始写这篇文章时，我做了一个小小的思考实验：一个信号从我正在写的电脑经过多少个硬件才能到达房子外面？

答案相当令人震惊：3 根猫电缆、一个交换机、2 个电源线适配器、一个路由器和调制解调器、一根 RJ11 电缆和几米长的电线。突然间，那海市蜃楼开始显得更加稳固。

当然，网络（任何，通过扩展，我们制作的网站）确实有碳足迹。互联网的所有服务器、路由器、交换机、调制解调器、中继器、电话机柜、光电转换器和卫星上行链路都必须由从地球上提取的金属和从原油中提炼的塑料制成。然后，为了向全球估计有 200 亿台联网设备提供数据，它们需要消耗电力，而电力在产生时也会释放碳（即使可再生电力也不是碳中和的，尽管它比化石燃料好得多）。

准确测量这些排放量可能是不可能的——每台设备都是不同的，为它们供电的能量在一天中可能会有所不同——但我们可以通过查看功耗、用户群和很快。使用此数据估算单个页面的碳排放量的一个工具是网站碳计算器。据它称，测试的平均页面“每次浏览页面会产生 1.76 克二氧化碳”。

如果您习惯于认为您所做的工作基本上对环境无害，那么这种认识可能会非常令人沮丧。好消息是，作为开发人员，我们可以做很多事情。

推荐阅读：提高网站性能如何帮助拯救地球

跳跃后更多！继续往下看↓

性能和排放

如果我们记得浏览网站会消耗电力，而发电会释放碳，那么我们就会知道页面的排放量在很大程度上取决于服务器和客户端为了显示页面而必须执行的工作量。此外，页面所需的数据量，以及它必须经过的路线的复杂性，将决定网络本身释放的碳量。

比如下载和渲染example.com，可能会比苹果主页耗电少很多，而且速度也会快很多。实际上，我们所说的是高排放和缓慢的页面加载只是相同根本原因的两个症状。

当然，理论上讨论这种关系很好，但是有一些真实世界的数据来支持它会很好。为此，我决定进行一些研究。根据 MOZ 的说法，我编写了一个简单的命令行界面程序来列出 Internet 上 500 个最受欢迎的网站，并根据 Google 的 PageSpeed Insights 和网站碳计算器检查它们的主页。

一些检查超时（通常是因为相关页面加载时间过长），但总的来说，我在 2021 年 7 月 14 日成功收集了 400 多个页面的结果。您可以下载结果摘要来检查自己，但为了提供视觉指示，我将它们绘制在下面的图表中：

图表显示在 0 PageSpeed 下几乎 6 克碳的趋势，在 100 PageSpeed 下降至 1 克碳。 — 400 个热门网站的 Carbon 与 PageSpeed。（大预览）

如您所见，虽然各个网站之间的差异非常大，但更快的页面呈现出较低排放的强烈趋势。 PageSpeed 得分为 100 的网站的平均平均排放量约为 1 克碳，而得分为 0 的网站预计排放量接近 6 克。尽管有许多网站的碳排放量非常低，但我觉得这有点令人放心速度和高排放，大多数结果都集中在图表的右下角。

采取行动

一旦我们了解页面的大部分排放源于性能不佳，我们就可以开始采取措施减少它们。导致网站排放的许多因素都超出了我们作为开发人员的控制范围。例如，我们无法选择用户访问我们页面的设备或决定他们的请求通过的网络基础设施，但我们可以采取措施来提高我们网站的性能。

性能优化是一个很宽泛的话题，很多阅读这篇文章的人可能比我有更多的经验，但是我想简单提一下我最近在优化各种页面的加载速度和碳排放时观察到的一些事情。

在移动设备上渲染要慢得多

我最近重新设计了我的个人博客，以使其更加用户友好。我的爱好之一是摄影，该网站以前有一张全高的标题图片。

网站上树木的全高图像。没有可见的内容。 — 显示全高图像标题的旧主页。（大预览）

虽然该设计在展示我的照片方面做得很好，但滚动过去是一种完全的痛苦，尤其是在浏览博客文章页面时。然而，我不想失去在标题中有照片的感觉，最终决定将其用作页面标题的背景。

全高标题一直使用srcset以尽可能快地加载，但图像在高分辨率屏幕上仍然非常大，我在移动设备上为旧设计最长的内容绘制 (LCP) 时间几乎是 3秒。新设计的一大优势是它允许我将图像缩小很多，从而将 LCP 时间减少到大约 1.5 秒。

在笔记本电脑和台式机上，人们不会注意到差异，因为这两个版本都在不到一秒的时间内，但在功能更弱的移动设备上，这非常引人注目。这种变化对碳排放有何影响？之前每次观看 0.31 克，之后每次观看 0.05 克。 解码和渲染图像非常耗费资源，并且随着图像变大而呈指数增长。

图像的大小并不是唯一会影响解码时间的因素。格式也很重要。 Google 的 Lighthouse 通常建议以下一代格式提供图像以减少需要下载的数据量，但新格式的解码速度通常较慢，尤其是在移动设备上。通过线路发送更少的数据对环境更好，但是消耗更多的能量来解码可能会抵消这种好处。与大多数事情一样，测试是这里的关键。

从我自己尝试向 Zola 静态站点生成器添加对 AVIF 编码的支持的测试中，我发现 AVIF 在相同质量下承诺比 JPG 小得多的文件大小，它的编码时间要长几个数量级； bunny.net 的观察结果表明，WebP 的性能优于 AVIF 多达 100 倍。这样做时，服务器会消耗电力，我想知道，对于访问者数量少的网站，切换到新格式是否实际上最终会增加排放并降低性能。

当然，图像并不是现代网页中唯一需要长时间处理的组件。小的 JavaScript 文件，取决于它们正在做什么，可能需要很长时间才能执行，并且可能会出现与图像相同的潜在陷阱。

推荐阅读：卑微的img元素和核心网络生命力

往返加起来

对性能和排放产生惊人影响的另一件事是您的数据来自哪里。传统观点长期以来一直认为，从中央内容交付网络 (CDN) 为诸如框架之类的资产提供服务将提高性能，因为对于用户而言，从本地节点获取数据通常比从中央服务器获取数据要快。例如，jQuery 可以选择从 CDN 加载，它的维护者说这可以提高性能，但 Harry Roberts 的实际测试表明，自托管资产通常更快。

这也是我的经历。我最近帮助一个游戏网站提高了性能。该网站使用了一个相当大的 CSS 框架，并通过 CDN 加载其所有第三方资产。我们切换到自托管所有资产并从框架中删除未使用的组件。

所有优化都没有导致网站的视觉变化，但它们共同将Lighthouse 得分从 72 提高到 98 ，并将碳排放量从每次浏览 0.26 克减少到 0.15。

只发送你需要的东西

这很好地引出了仅向用户发送他们实际需要的数据的主题。我曾在（并访问过）许多网站上工作过，这些网站以穿着西装的人互相微笑的库存图片为主。某些组织似乎有一种心态，他们所做的事情真的很无聊，并且添加照片会以某种方式说服公众。

我可以理解这背后的想法，因为有很多关于人们花在阅读上的时间是如何减少的文章。我们被反复告知，文本正在过时；现在所有人感兴趣的都是视频和互动体验。

从这个角度来看，库存照片可以被视为活跃页面的有用工具，但眼动追踪研究表明，人们会忽略不相关的图像。当人们不看您的图像时，图像也可能是空白空间。当每个字节都需要花钱，导致气候变化，并减慢加载时间时，如果他们真的如此，对每个人都会更好。

同样，对于图像可以说的内容可以用于不是页面核心内容的所有其他内容。如果某些东西不能以有意义的方式为用户体验做出贡献，那么它就不应该存在。我暂时不会提倡我们都开始提供无样式的页面——有些人，比如有阅读障碍的人，确实发现大块文本难以阅读，而其他用户几乎肯定会觉得这样的页面很无聊并转到其他地方——但是我们应该批判性地审视我们网站的每一个部分，以考虑它们是否在赚钱。

可访问性和环境

另一个性能和排放融合的领域是可访问性领域。有一种常见的误解认为，使网站易于访问涉及向页面添加aria属性和 JavaScript，但通常您遗漏的内容比您输入的内容更重要，这使得可访问的网站相对轻量级和高性能。

使用标准元素

MDN Web Docs 有一些关于可访问性的非常好的教程。在“HTML：可访问性的良好基础”中，他们介绍了可访问性网站的最佳基础如何在于为内容使用正确的 HTML 元素。本文最有趣的部分之一是他们尝试使用div和自定义 JavaScript 重新创建button元素的功能。

这显然是一个最小的示例，但我认为将此按钮版本的大小与使用标准 HTML 元素的大小进行比较会很有趣。在这种情况下，未压缩的假按钮示例重约 1,403 字节，而具有较少 JavaScript 且没有样式的实际button重 746 字节。 div按钮在语义上也毫无意义，因此对于有屏幕阅读器的人来说更难使用，也更难让机器人解析。

推荐阅读：可访问的 SVG：屏幕阅读器用户的完美模式

当扩大规模时，这些事情会有所作为。解析最小标记和 JavaScript 对于浏览器来说更容易，就像对开发人员来说更容易一样。

在更大的范围内，我最近正在重构我工作的网站的 HTML —— 做一些事情，比如删除多余的标题属性和用更多语义等价物替换div 。原始页面的结构如下（为了隐私和简洁，内容被删除）：

 <div class="container"> <section> <div class="row"> <div class="col-md-3"> <aside> <!-- Sidebar content here --> </aside> </div> <div class="col-md-9"> <!-- Main content here --> <h4>Content piece heading</h4> <p> Some items;<br> Item 1 <br> Item 2 <br> Item 3 <br> <br> </p> <!-- More main content here --> </div> </div> </section> </div>

加上完整的内容，它重达 34,168 字节。

重构后结构如下：

 <div class="container"> <div class="row"> <main class="col-md-9 col-md-push-3"> <!-- Main content here --> <h3>Content piece heading</h3> <p>Some items;</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <!-- More main content here --> </main> <aside class="col-md-3 col-md-pull-9"> <!-- Sidebar content here --> </aside> </div> </div>

它重 32,805 字节。

更改目前正在进行中，但根据 WebAIM、Lighthouse 和手动测试，标记已经更易于访问。文件大小也下降了，而且，当平均来自 Chrome 中的五个配置文件的时间时，解析 HTML 的时间减少了大约 2 毫秒。

这些显然是很小的变化，可能不会对用户产生任何感知差异。然而，很高兴知道每个字节都会花费用户和环境——使网站可访问也可以使它更轻一些。

视频

Project Gutenberg 的《威廉莎士比亚全集》的 HTML 版本大约有 7.4 MB 未压缩。根据 Android Authority 在“YouTube 实际使用多少数据？”中的说法，一个 360p YouTube 视频的重量约为每分钟 5 到 7.5 MB，而 1080p 约为 50 到 68。因此，对于莎士比亚所有戏剧的相同带宽量，您将只能获得约 7 秒的高清视频。视频的编码和解码也非常密集，这可能是导致 Netflix 的碳排放量估计高达每小时 3.2 公斤的主要因素。

大多数视频都依赖视觉和听觉组件来传达信息，而大文件需要一定程度的连接性。这显然限制了谁可以从这些内容中受益。使视频可访问是可能的，但远非简单，许多网站根本不打扰。

如果视频只被视为一种渐进增强的形式，这可能不是问题，但我已经记不清我在网络上搜索的次数，以及找到我的信息的唯一方法想要通过观看视频。在 YouTube 上，月平均用户数从 2006 年的 2000 万增长到 2020 年的 20 亿。Vimeo 的用户群也在不断增长。

尽管视频共享网站的访问者人数众多，但许多最受欢迎的网站似乎并不完全符合无障碍立法。与此相反，许多类型的辅助技术旨在使尽可能多的人可以访问纯文本。文本也很容易从一种格式转换为另一种格式，因此可以在许多不同的上下文中使用。

正如我们从莎士比亚的例子中看到的那样，纯文本也非常节省空间，并且它的碳足迹远低于网络上传输的任何其他形式的人类友好信息。

视频可以很棒，许多人通过观看一个实际的过程来学习最好，但它也会让一些人离开并产生环境成本。为了使我们的网站尽可能地轻量级和包容性，我们应该尽可能将文本作为主要的交流方式，并额外提供音频和视频等内容。

推荐阅读：优化视频的大小和质量

综上所述

希望通过简要介绍我尝试使网站更适合环境的经验，可以为您在自己的网站上尝试一些事情提供一些想法。通过网站碳计算器运行一个页面并被告知它每年可能排放数百公斤的二氧化碳可能会非常令人沮丧。幸运的是，网络的庞大规模可以放大积极的变化和消极的变化，即使是小的改进很快也会在每周有数千名访问者的网站上加起来。

尽管我们看到一个有 25 年历史的网站在重新设计后规模增加了 39 倍，但我们也看到网站使用尽可能少的数据，聪明的人正在研究如何在 7 年内交付 WordPress知识库。因此，为了让我们减少网站的碳排放，我们需要让它们更快——这对每个人都有好处。