低碳 Web 实践指南

现状和问题

2023年7月6日,世界迎来有记录以来最热的一天。气候变化是如今人类面临的最大健康威胁。据世界卫生组织预测2030年至2050年期间,气候变化预计每年将造成约25万人死亡。这是人们可以真切感受到的变化,而背后的主要推手是碳排放。

而在万物互联的数字化时代,碳排放很重要的来源之一是互联网,全球三分之二的人口预计将在2023年通过互联网连接。随着人们对数据和网络服务的需求日益增长,互联网在数据中心、网络通信和终端用户设备等各个环节都消耗了大量电力,其碳排放也在不断增加。如果我们将 Web 视为一个国家,那么它将在电力消耗方面排名第三,在污染方面排名第四。

过去十年内,页面传输资源大小在PC端和移动端分别增长162.5% 和 392%。目前大多数 Web 应用:

  • 托管在由化石燃料提供动力的机器中

  • 旨在获得用户注意力,增加内容和交互,强化用户参与度和忠诚度

  • 已经开始关注并重视无障碍设计,但是尚未从设计角度考虑对环境的影响

  • 开发者在实现时一般不会考虑可持续性与碳效率,大多情况下考虑的是性能和可靠性等维度

如何通过技术让 Web 应用改善对环境的影响和减少碳排放,是值得IT从业者思考和解决的问题。但我们首先可以做的,是开始构建低碳的 Web 网站。

构建绿色低碳 Web 应用

没有度量指标,就没有最佳实践,毕竟我们只能优化那些可以被观测的碳排指标。所以在探讨构建低碳 Web 应用的技术手段之前,我们需要了解表征网站碳排的指标——页面权重(Page Weight)。页面权重指网页的字节大小,代表用户访问网页时,通过互联网传输的数据量总和。

常见的 Web 碳排放计算工具,诸如Ecograder、 Website Carbon Calculator、Beacon,均基于页面权重。诚然,页面权重可能不是统计网站碳排放的最佳指标,但它是目前我们能找到的最佳碳排代理值。

随着 Web 技术的发展,用户访问的网站早已不是单纯的 HTML 文件,而是具有多种资源的 Web 应用。一般这些数据资源可以分为以下五类:

  1. 构成网页的 HTML 文件

  2. 网页中嵌入的图像和多媒体资源(视频、音频等)

  3. 修饰网页样式的 CSS 文件

  4. 提供网页交互性的 JavaScript 文件

  5. 网页集成的第三方服务(页面分析工具、表单工具、聊天机器人等)

页面每增加一个数据资源,意味着该资源在存储、传输和页面呈现等过程中消耗的能源,都会影响页面的数据传输量,增加页面的能源消耗。我们可以以“减少页面数据资源,降低页面数据传输量”为出发点,采取措施“降本增效”——精简压缩 Web 应用,只在必要时消耗能源;提高应用的能源利用率,优化应用性能。

这并不意味着,我们只能寄希望于开发人员,敦促他们通过技术手段落实相关举措。如果我们着眼于软件开发生命周期(SDLC),在每个交付阶段落地相应举措,团队中的不同角色的成员都能参与其中,各司其职,为低碳 Web 保驾护航。

需求分析阶段

软件膨胀(Software bloat)是一个老生常谈的话题,Web 应用中往往充斥着冗余的功能,甚至在企业软件领域,可能有 50% 的功能几乎从未被使用过,80% 的功能价值很低或没有价值。冗余臃肿的复杂应用,不但难以维护与扩展,而且会增加应用的运行成本,导致能源浪费。实现低碳 Web 应用,并不意味着我们只能通过技术手段进行“压缩”,我们也可以“压缩”需求,从源头减少能源消耗,构建一个功能精简、小而全的应用。

面对客户急切的声音:“我们需要这个功能,它对我们特别重要,我们现在就想要”,我们需要引导他们思考功能背后的价值:它真的可用、有用?它是仅有的解决方案吗?它是否可以使用现有功能替代?同时,更小的应用也意味着更低的开发成本和更短的交付周期。

设计阶段

用户行为与 Web 应用的能耗效率息息相关,每当用户开始使用 Web 应用,用户所使用的设备就会开始持续消耗能量,增加 Web 应用的数据传输。用户行为对 Web 应用能耗的影响,可能也远超我们的想象——预计 52% 的数字产品碳排放源于用户设备。为了最大程度地减少应用的使用能耗,我们可以优化用户旅程,精简用户的操作流程,确保用户通过最少的步骤达成目标。

此外,我们也需要从设计出发,思考如何延长 Web 应用的寿命。Web 应用能兼容老旧设备,相当于延长了设备的使用寿命,因为用户不需要为兼容应用而更换设备。

除了用户体验,也有很多可以参考的绿色可持续设计,例如:

  1. 采用更节能的配色方案:黑色是显示器上能耗最低的颜色,深色模式和深色背景更为节能。

  2. 减少使用自定义字体:尽可能使用系统字体,避免客户端加载额外的字体文件,增加页面数据传输量。

  3. 更节能地使用图片:图片是最常见的静态资源,更节能地使用图片资源,比如使用高分辨率但文件更小的 WebP 格式图片文件,可以大幅减少页面权重。

  4. 非必要不添加动效和视频:动效与视频可以提升用户体验,但也会增加页面加载时的能耗。

开发阶段

减少页面权重

减少 Web 应用页面权重最直接的方法,就是避免一切不必要的数据传输:

  1. 设定页面权重阈值:将页面确保的数据传输量保持在尽可能低的水平。通常建议页面权重应小于 1 MB,最好能够不大于 500 KB。

  2. 页面只加载必要的资源,优化页面请求:

    • 对于页面组件、CSS 文件及静态资源,可以使用懒加载策略,Critical CSS 策略,参考 Import on Interaction和 Import on Visibility 等实践,只在需要时加载资源。

    • 删除未被使用的 CSS 和 JS 文件,减少 HTML 中的 CSS 及 JS 内联代码。

    • 压缩 CSS 和 JS 文件,删除文件中不必要的字符,使用文本压缩使文件更小。

    • 在开发中引入功能全面的工具库和框架可能会成为应用的负担,毕竟我们并不会百分百使用引入框架的功能。通过选择模块化的 JS 框架,使用代码替代或者按需加载一些体量庞大的工具库,减少代码文件大小。

  3. 按需使用三方服务:在许多数字产品和服务中,追踪用户数据以及插入广告的第三方服务往往会耗费大量能源。此外,这些服务也会严重侵犯用户隐私,并明显降低用户体验。第三方服务如果需要跟踪数据,应向用户说明收集的内容和使用方式。要尽可能选择侵入性最小、效率最高的方式收集数据,确保只收集所需的数据,并且支持用户关闭追踪。

  4. 采用 PWA 应用架构:渐进式 Web 应用(Progressive Web App,PWA)通过在用户设备上缓存关键信息和信息资产以改善用户体验并减少数据传输。用户在访问 PWA 缓存数据时,可以实现零网络数据传输。数据缓存不但可以减少由数据传输引起的碳排放,还可以改善网络连接不稳定对用户体验的影响。相较于本地应用程序和传统 Web 应用,PWA 用户响应速度更快,能耗更低,碳排放更少。

提升应用能源利用率

在开发过程中,我们往往并不会优先考虑运行应用产生的能源消耗,以及应用运行的硬件性能。一段低效代码会随着 Web 应用的运行,会持续影响应用的能耗水平,我们可能已经造成了难以预计的计算资源浪费。开发人员不应只考虑通过更简单、更快速的方式实现功能,还应考虑功能的性能与能耗,选择更低碳的方式实现功能:

  1. 遵循DRY(Don’t repeat yourself )原则: 在编码过程中需要重视代码的复用性。那些只能使用一次的代码,不但难以维护,浪费开发时间,也会浪费运算资源与能源。

  2. 使用更高效的算法和设计模式。虽然算法的时间效率和软件碳强度并不总是成正比,但它们仍然相关。

  3. 删除或重构未被使用的功能。这不但提高了能源效率,也使软件更容易维护。

  4. 选择效率更高的编程语言:编译型语言往往比解释型语言最节能。Python 在 27 种语言中排名耗电量最高,Python 应用程序可能会在大规模处理、存储和网络传输中产生巨大的能量消耗。

测试阶段

我们可以将碳排量和代码能耗效率作为测试验收的一部分,以下是一些检测工具:

  1. 碳排放计算工具:

    • 在线计算工具:Ecograder、Website Carbon Calculator 和 Ecoping 等网站提供估算网页碳排放的在线服务。

    • CO2.js: 是一个 JavaScript 开源库,用于估算网站、应用和软件在使用时产生的碳排放。

    • Sitespeed sustainability plugin:Sitespeed 是一款 Web 性能监控工具,可以给出页面碳排相关报告。

    • WebPageTest Carbon Control: WebPageTest 是一款开源网络性能工具,其中Carbon Control 模块可以估算每次访问的碳足迹以及部署服务是否使用可再生能源。

  2. 代码能耗效率扫描工具:

    • CAST GreenIT Index: 自动化代码能耗分析工具,可以扫描静态代码中的能耗缺陷并给出相关修复建议。

    • ecoCode: SonarQube 的一款插件,可以检测代码中能源过度消耗等问题,旨在减少软件在代码级别的环境足迹。

    • Carbon CI pipeline tooling: Green Software Foundation 开发的静态代码扫描工具,可估算应用的碳排量并集成 CI。

部署阶段

在部署阶段,使用可再生能源的托管服务部署 Web 应用是最便捷有效的减碳实践。你可以使用Green Web Foundation首页提供的 Green Hosting 扫描工具检测应用的部署服务是否使用可再生能源。通常云服务供应商会提供Green Hosting服务,但如果当前你使用的供应商尚未提供此类服务,可以考虑更换到支持Green Hosting的服务商。这会是一个重要的决策,但实施起来其实并不复杂,也不会增加成本。此外,数据传输的物理距离越短,传输阶段消耗的能源就越少。请尽量选择将服务部署在离用户更近的区域,尤其是分发静态资源的 CDN 服务。

实践经验分享

在Thoughtworks的一个内部项目上,借助优化一个主要的JS资源大小(从3.12MB 减小至 648KB),结合每月用户访问量和开源工具 CO2.js估算出每月数据传输减少了17GB,碳排放降低了79%。这仅仅是优化了一个JS资源,如果每个页面上的内容都做到有用、可用和被使用,在技术上也能通过压缩、缓存等方式减少资源大小,累加在一起会产生巨大的影响,特别是对于访问量很大的 Web 应用。

目前很多IT从业者和公司已经开始重视网站对环境的影响。Valentino (fashion house)与Karma Metrix公司合作来衡量其页面和网站的能源性能并减少其影响。WordPress的Mailchimp插件的开发者通过减少其中一个文件20KB,每月可节省约59吨二氧化碳。Branch是由一群关注数字化技术与环境可持续性的人共同创建的在线杂志。Branch实现了一种设计 —— 需求响应,利用来自电网强度和用户位置的数据,按照当前用户所在地的能源情况呈现不同的界面。例如当电网需求较低且可再生能源比例较高时,该网站显示了自动加载所有图像,视频和媒体内容的完整体验。当电网需求高且可再生能源利用较少时,会通过强调替代文本(alt text)的方式来展示媒体内容。用户可以选择点击展示内容,但内容不会自动加载。

此外,W3C的可持续网页设计社区目前正在合作制定一套指导方针,以帮助从事 Web 工作的人群创建更环保的数字产品和服务,希望如同 Web Accessibility 权威标准WCAG(Web Content Accessibility Guidelines)一样,建立互联网的环境标准。目前有一个草案提议在HTTP headers加入请求的碳排放数据,以便服务提供商和消费者可以就网络使用情况做出更明智的决策。

不止低碳

技术手段可以帮助减少 Web 对环境的影响,但不仅仅是减碳。

当我们创建更易于访问的数字产品来消除内容障碍时,通常还会提高性能和效率,从而会使用更少的资源。这意味着在助力 Web 无障碍性的同时,也提高了性能。

摩尔定律指出每 18 个月硬件的运算能力就会提升一倍,但软件却无法跟上硬件的进步。维尔特定律提到软件变慢的速度永远快过硬件变快的速度,软件效率每18个月减半,从而抵消了摩尔定律的所有好处。因此相比新设备,软件在老旧设备上会耗费越来越多的资源,造成不必要的碳排放,而低碳实践可以减少页面权重,所以一定程度上可以帮助精简软件,让软件在旧设备上运行顺畅,延长旧设备更换周期,减少浪费。

据《2022年中国可持续消费报告》统计,消费者对低碳消费生活方式的理解主要集中在“绿色出行”(72.51%)、“环保材料”(66.68%)、“循环再生”(65.79%)、“垃圾分类”(60.76%)、 “节水节电”(60.33%)、“新能源车”(60.14%)这几项,而绝大多数互联网用户尚未注意互联网也是需要绿色低碳的。实现绿色互联网之路需要实践者和使用者共同努力,因此可以借助 Web 应用的低碳实践构建用户意识。公众低碳消费意识越来越强,也有利于我们去践行负责任技术。

作为IT从业者,我们应该践行负责任技术 —— 积极思考并探索技术的价值、不可测的后果和负面的影响,主动管理、减缓和降低技术的风险与伤害。我们是一切实践的关键起点,如何在早期最大限度避免把人所固有的认知偏见和思维惯性带入到设计和开发中显得尤为重要。

总结和展望

Web 应用作为碳排放的一个重要来源,我们需要将低碳 Web 实践融入到日常应用开发的过程中。在业界,已经有很多在低碳 Web 方面的研究,从 Web 应用的设计到部署运维都提供了相应的工具和最佳实践供大家参考。本文将相关实践以软件生命周期为主线进行了整理汇总,同时也分享了简单的案例,供同业人员进行参考和了解。

随着气候变化的影响日益增大,部分国家已经开始着手制定相关标准和政策,而我们 Web 从业者需要从意识、实践等多方入手,在优化 Web 应用的时候,不仅仅为了性能和体验而优化,也为了可持续而优化,共同构建绿色地球。

Optimizing for the Planet, Not Just Performance.

文/Thoughtworks 付莹&梁晶&孙郁俨
原文链接:低碳 Web 实践指南-Thoughtworks洞见

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/78735.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java分布式微服务2——声明式Http客户端(Feign)与网关(Gateway)

文章目录 Http声明式客户端FeignFeign介绍与使用Feign自定义配置Feign性能优化Feign最佳实践方案 网关Gateway网关Gateway的作用与搭建路由断言工厂Route Predicate Factory路由过滤器GatewayFilter全局过滤器过滤器执行顺序网关的跨域处理 Http声明式客户端Feign Feign介绍与…

Python魔法解析:探索变量类型的丰富多彩世界!

在Python这个魔法般的编程语言中,变量是连接你与计算机世界的神奇桥梁。然而,这些变量并不是单一的,它们有着丰富多彩的类型。无论你是刚刚踏入编程的大门,还是想要深入了解Python的高级特性,本篇博客将带你探索变量的…

c++学习(特殊类设计)[30]

只能在堆上创建对象的类 如果你想要确保对象只能在堆上创建,可以通过将析构函数声明为私有,并提供一个静态成员函数来创建对象。这样,类的实例化只能通过调用静态成员函数来完成,而无法直接在栈上创建对象。 以下是一个示例&…

【PCIE】PCIE的驱动和pcie的端口驱动关系

pice驱动和pcie端口驱动区别 PCIe的端口服务驱动与PCIe驱动之间存在一定的关系,但它们是不同的概念。 PCIe驱动是用于管理和操作PCIe设备的驱动程序。它负责与硬件进行通信,并实现对PCIe设备的配置、数据传输以及其他相关操作。PCIe驱动通常涉及设备的…

【NLP概念源和流】 05-引进LSTM网络(第 5/20 部分)

一、说明 在上一篇博客中,我们讨论了原版RNN架构,也讨论了它的局限性。梯度消失是一个非常重要的缺点,它限制了RNN对较短序列的建模。香草 RNN 在相关输入事件和目标信号之间存在超过 5-10 个离散时间步长的时间滞时无法学习。这基本上限制了香草RNN在许多实际问题上的应用,…

NestJs Debug配置文件

(事缓则圆,人缓则安,语迟则贵,虎行似病,鹰立似睡。清俞万春《荡寇志》) {"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": &quo…

基于LNMP架构搭建Discuz论坛

LNMP: L---->linux系统,操作系统。 N----->nginx网站服务(前端),提供前端的静态页面服务。同时具有代理、转发的作用。(转发就是转发后端请求,转发PHP),nginx没有处理动态资源的功能,他有…

IO模型-信号驱动IO

linux内核中存在一个信号SIGIO,这个信号就是用于实现信号驱动IO的。当应用程序中想要以信号驱动IO的模型读写硬件数据时,首先注册一个SIGIO信号的信号处理函数,当硬件数据就绪,硬件会发起一个中断,在硬件的中断处理函数中向当前进…

Plus 框架分页合理化问题

需要关闭 MyBatis Plus的分页合理化 RuoYi-Vue-Plus框架默认的Mybatis Plus分页拦截器配置是打开了分页合理化,这样会导致溢出的分页数据本来应该返回空数据,打开之后而会永远返回默认的前10条数据。 /*** mybatis-plus配置类(下方注释有插件介绍)** au…

CSS元素的显示模式

1、现在我想做成小米左侧边栏这样的效果,该怎么做呢? 2、小米商城触碰之后会显示出新的商品案例 3、一碰到之后会出现这个列表 4、这里涉及到了元素显示模式: 5、用人进行划分可以分为男人和女人,根据男人和女人的特性进行相应的…

【ChatGPT 指令大全】怎么利用ChatGPT写报告

目录 选定切入角度 报告开头 大纲生成 草稿撰写 研究报告 提出反对观点 报告总结 研究来源 总结 随着人工智能技术的快速发展,自然语言处理技术在各个领域的应用越来越广泛。其中,ChatGPT作为目前最先进的自然语言处理模型之一,其强…

读写分离实现sharding-jdbc

一、背景 二、使用sharding-JDBC实现 1、导入依赖 2、配置文件(名字要对应) ​​​​​​​ 查询策略(轮询,指定哪个是主库哪个是从库) 允许bean定义覆盖

刷题笔记 day8

1004 最大连续1的个数 III 这道题要求将原数组中的0翻转成1,求出最大元素全是1的子数组长度,看这道题第一感觉还要将里面的0变成1,感觉这道题解决起来很麻烦,但是我们可以转变思路,找出其最大子数组,使得子…

手搓 LLM (不用rnn 不用attention 完全新思路)padding 实验

数据集地址 诗 实验过的几种策略 主体代码 import paddle import numpy as np from tqdm import tqdm import pandas as pd class EmMask(paddle.nn.Layer):def

8.6 day07 休息+剑指offer

文章目录 06从尾到头打印链表03数组中重复的数字04二维数组中的查找05 替换空格06重建二叉树背英语单词,看了二十页 06从尾到头打印链表 从尾到头遍历链表 方法一就是用栈来辅助,栈的结构是先进后出的,将链表中的元素加入到栈中去&#xff0…

无人驾驶实战-第八课(定位算法)

无人驾驶中定位的作用: 定位高精度地图:提供当前位置的静态环境感知 (车道线/交通指示牌/红绿灯/柱子/建筑物/等) 定位动态物体感知:将感知到的动态物体正确放入静态环境 定位获取位置姿态:用于路径规划/决…

单细胞测序基础知识

构建文库 上机测序 根据不同的荧光检测不同的碱基 质量控制(质控QC) 去除低质量的序列 表达定量 统计reads数,进而得到表达矩阵 标准化 让所有样本处在同一起跑线上 主成分分析PCA 图中每个点都代表一个样本,不同颜色…

pycharm、idea、golang等JetBrains其他IDE修改行分隔符(换行符)

文章目录 pycharm、idea、golang系列修改行分隔符我应该选择什么换行符JetBrains IDE,默认行分隔符 是跟随系统修改JetBrains IDE,默认行分隔符 pycharm、idea、golang系列修改行分隔符 一般来说,不同的开发环境和项目对换行格式的使用偏好不同: Windo…

解决vite+vue3项目npm装包失败

报错如下: Failed to remove some directories [ npm WARN cleanup [ npm WARN cleanup D:\\V3Work\\v3project\\node_modules\\vue, npm WARN cleanup [Error: EPERM: operation not permitted, rmdir D:\V3Work\v3project\node_modules\vue\reactivity\…

HTML5中Canvas学习笔记:Canvas

目录 一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么? 二、如何设置一幅canvas图中某个颜色透明? 三、H5 canvas中strokeRect参数如果是小数,如何处理? 四、H5 Canvas中如何画圆角矩形框? 一、HTML中…