网页可持续性介绍

人们通常认为数字技术是“清洁的”，因为数字活动不会像工厂或汽车那样产生可见的污染。事实上，互联网约占全球碳排放的 4%，相当于整个航空业的排放量。

数字领域环境影响的很大一部分来自电力使用，这些电力通常来自化石燃料。燃烧化石燃料会产生二氧化碳 (CO2)，通常称为碳排放。这种电力不仅为用户设备供电，还促进了数据存储和网络传输，并支持我们数字基础设施硬件的制造。 来源

考虑碳排放仅仅是使我们的 Web 应用程序更可持续的一个方面。在构建 Web 应用程序时，还有许多其他相互关联的因素需要考虑，以便做出更可持续的选择。

不断扩展的技术行业需要更多的数据中心，这些数据中心不仅耗能巨大，而且需要**大量**的水来冷却。硅芯片在制造过程中也需要大量的水。全球范围内，水资源短缺正成为一个越来越令人担忧的问题，气候变化将加剧这一问题。社区依赖的重要水资源正越来越多地被转移以支持数字基础设施。

全球每年产生约 4000 万吨电子废物。笔记本电脑、智能手机和平板电脑等旧设备经常被随意丢弃，没有得到妥善回收，通常是在全球南部，在那里它们造成污染并危害脆弱的生态系统。在进行回收的地方，回收活动往往是在剥削性的条件下进行的。

设备制造和电池技术（对向可再生能源转型越来越重要）依赖于贵金属的开采。开采这些自然资源具有极大的破坏性，它正在摧毁景观和社区。

设备制造过程中的有害化学物质很容易进入自然环境，在那里造成危害。

弱势群体最有可能遭受我们数字生活方式带来的环境影响，而且最不可能从中受益。我们必须确保向越来越可持续的实践过渡不会无意中将负担转移到那些已经承担了最大成本的人身上。

您可能认为，任何个人为减少 Web 环境影响所做出的努力都不过是沧海一粟。但是，作为科技工作者，我们与其他行业相比，处于相对权力的位置。我们构建的产品可能被数千甚至数百万用户使用。我们做出的任何改进，在扩展到这种程度时，都有可能产生巨大的影响。

减少我们构建的产品所造成的碳排放是一个明显的起点，同时还要继续全面思考并牢记数字可持续性的其他方面。

近年来，使我们的网站对用户更快地访问成为越来越重要的关注点。好消息是，Web 性能和可持续性之间存在很大的重叠：快速网站**通常**是低碳网站！

优化我们的网站可以减少存储和传输的数据量，以及用户设备消耗的电量。可持续地构建也可以帮助延长用户设备的使用寿命，减少升级和更换的需要。

诸如 WebPageTest 和 Google 的 PageSpeedInsights 等工具可以帮助我们衡量 Web 性能并优先考虑改进。WebPageTest 还具有一个相对较新的 碳控制 功能来衡量我们网站的环境影响。 Website Carbon 是另一个用于了解网站环境影响的工具。

虽然工具无法衡量所有内容，但它们为理解我们网站的影响提供了一个良好的起点，并提供了一些改进建议。

图像在页面大小方面是一个主要贡献者，占 Web 上数据传输的近一半。我们可以通过使用更小、更少的图像以及优化和压缩我们使用的图像来减少这种影响。

使用 `srcset` 和 ``，我们可以为用户的设备提供最合适的图像——为支持现代图像格式（如 WebP）的设备提供现代（更小）的图像格式，并确保低分辨率设备不需要下载巨大的、高分辨率的图像。

`lazyload` HTML 属性得到了良好的支持，可以防止在用户滚动到需要的位置之前下载图像。

字体是另一个可以显著影响页面大小的资源，因此它们非常适合优化。我们可以通过限制使用的 Web 字体的数量来减少这种负担。如果需要特定字体的多种粗细和样式，我们可以考虑使用可变字体。

提供现代字体格式，例如 Web 开放字体格式 2.0 (WOFF2)，通常会比旧的 TrueType 字体 (TTF) 文件减少有效负载。我们也可以考虑子集化字体——如果网站只需要一种语言，则提供有限的字形集合。

自托管您的字体将节省网络请求，并让您拥有更多控制权。

聊天窗口小部件、分析脚本和社交媒体嵌入等第三方代码在页面大小和数据传输方面通常是最糟糕的罪魁祸首。如果您无法完全避免这些代码，请考虑使用交互式导入模式，其中加载会延迟到用户与窗口小部件交互时才进行。

Paul Irish 的 Lite YouTube Embed 提供了一种简便的方法来延迟加载重量级 YouTube 嵌入。

JavaScript 比 HTML 和 CSS 更耗费资源，大多数网站都过度依赖它。仔细考虑您的项目是否真的需要 JavaScript 框架，并使用 Bundlephobia 等工具评估代价高昂的依赖项。您可能可以使用本机 API 代替。

动态导入可以帮助减少前端 JavaScript 包的大小，并防止用户下载在稍后才需要的代码。

有关更多见解，建议您阅读 Jeremy Wagner 的 负责的 JavaScript 资源。

除了压缩图像之外，缩小、压缩和摇树优化您的代码，所有这些都有助于减少数据传输。此外，我们可以确保尽可能多地缓存内容。Harry Roberts 提供了一份关于平民缓存控制的出色指南。

确保我们的 Web 主机使用可再生能源是减少我们网站碳排放的重要一步。不幸的是，区分真正的绿色认证和绿色洗脑和营销声明并不总是容易的。 绿色 Web 基金会的主机目录列出了提供“绿色”认证证明的公司。

我的第三方是否环保？是一个工具，它检查第三方依赖项的碳影响，包括它们是否使用环保主机。

我们可以通过观察我们在哪里以及何时运行高能耗进程来减少对化石燃料发电的依赖。

• 通过利用电力来自可再生能源比例更高的地区的服务器（空间转移）。
• 通过在一天中电网需求较低的时间或可间歇性太阳能或风能发电量较高的时段运行进程（时间转移）。

绿色软件基金会提供了一些关于此主题的出色资源。

通过在设计阶段考虑可持续性，我们最有可能将我们产品的环境影响降至最低。更环保的设计可能包括使用更节能的颜色。蓝色比红色或绿色更耗能，在有机发光二极管 (OLED) 屏幕上，深色方案可以节省能量，因为黑色像素是“关闭”的。

网站可以设计为尽量减少视频和大型图像的使用，尤其是避免自动播放视频，或者尽可能使用 SVG 代替照片。

用户旅程也起着重要作用：用户在您的网站上点击来点击去花费了多少时间？因为他们找不到要找的东西，他们加载了比需要更多资源？

我们不仅可以采取措施解决我们构建的产品的环境影响，还可以通过与 Web 社区的其他成员分享我们的知识来产生更广泛的影响。这可能包括在您的工作场所组建一个环境行动小组，在您自己的博客上写作，发表演讲，或在社交网络上分享技巧。

我们越能使围绕 Web 可持续性的对话正常化，我们就能产生更大的影响。

我们的个人努力固然重要，但当我们作为更广泛的社区的一部分共同努力时，我们才能产生最大的影响。

• ClimateAction.tech 是一个科技工作者社区，他们共同努力在公司、组织和行业中播种气候行动。这是一个与志同道合的人进行对话并获得采取行动灵感的绝佳场所。
• 可持续 Web 设计社区组正在努力定义一套构建可持续网站的指南。加入该小组，或通过Github做出贡献。

虽然这可能感觉像是逆流而上，但对于我们这些在 Web 上工作的人来说，有很多机会更可持续地构建并减少我们构建的产品的环境影响。第一步是了解我们行动和选择的意义，然后我们可以开始探索我们可以采取哪些措施来减轻对地球的负担。每一份努力都至关重要。

我相信您会发现本文中分享的信息和技巧很有价值。请随时在Discord 或GitHub 上留下您的反馈、想法或问题。

除了这里提供的技巧外，还有很多其他资源可以指导您构建更可持续的 Web。

• 绿色 Web 基金会
• 绿色软件基金会
• 可持续 Web 设计
• 可持续 Web 设计（书籍），作者：Tom Greenwood
• 全球浪费（书籍），作者：Gerry McGovern
• Web 可持续性指南 (WSG) 1.0（社区组报告草案）