低碳 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.mzph.cn/news/19279.shtml

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

相关文章

功率放大器的种类有哪三种类型

功率放大器是一种能将输入信号转换为更高功率输出的电子设备。在电子工程和音频领域中,功率放大器通常被分为三种类型:A类、B类和AB类。下面安泰电子将详细介绍这三种类型的功率放大器及其特点。 A类功率放大器 A类功率放大器是一种基本的线性功率放大器…

Flask简介与基础入门

一、了解框架 Flask作为Web框架,它的作用主要是为了开发Web应用程序。那么我们首先来了解下Web应用程序。Web应用程序 (World Wide Web)诞生最初的目的,是为了利用互联网交流工作文档。 1、一切从客户端发起请求开始。 所有Flask程序都必须创建一个程序…

【电网技术复现】考虑实时市场联动的电力零售商鲁棒定价策略(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

代码随想录算法训练营之JAVA|第十八天| 235. 二叉搜索树的最近公共祖先

今天是第 天刷leetcode,立个flag,打卡60天,如果做不到,完成一件评论区点赞最高的挑战。 算法挑战链接 235. 二叉搜索树的最近公共祖先https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/descriptio…

sql 参数自动替换

需求&#xff1a;看日志时&#xff0c;有的sql 非常的长&#xff0c;参数比较多&#xff0c;无法直接在sql 客户端工具执行&#xff0c;如果一个一个的把问号占位符替换为参数太麻烦&#xff0c;因此写个html 小工具&#xff0c;批量替换&#xff1a; 代码&#xff1a; <!…

从零开始学python(十四)百万高性能框架scrapy框架

前言 回顾之前讲述了python语法编程 必修入门基础和网络编程&#xff0c;多线程/多进程/协程等方面的内容&#xff0c;后续讲到了数据库编程篇MySQL&#xff0c;Redis&#xff0c;MongoDB篇&#xff0c;和机器学习&#xff0c;全栈开发&#xff0c;数据分析&#xff0c;爬虫数…

Java多线程面试21题

并行和并发有什么区别&#xff1f; 并行是指两个或者多个事件在同一时刻发生&#xff1b;而并发是指两个或多个事件在同一时间间隔发生。 并行是在不同实体上的多个事件&#xff0c;并发是在同一实体上的多个事件。 在一台处理器上“同时”处理多个任务&#xff0c;在多台处理…

C++多线程环境下的单例类对象创建

使用C无锁编程实现多线程下的单例模式 贺志国 2023.8.1 一、尺寸较小的类单例对象创建 如果待创建的单例类SingletonForMultithread内包含的成员变量较少&#xff0c;整个类占用的内存空间较小&#xff0c;则可以使用如下方法来创建单例对象&#xff08;如果类的尺寸较大&am…

新SDK平台下载开源全志D1-H/D1s的SDK

获取SDK SDK 使用 Repo 工具管理&#xff0c;拉取 SDK 需要配置安装 Repo 工具。 Repo is a tool built on top of Git. Repo helps manage many Git repositories, does the uploads to revision control systems, and automates parts of the development workflow. Repo is…

C语言的转义字符

转义字符也叫转移序列&#xff0c;包含如下&#xff1a; 转移序列 \0oo 和 \xhh 是 ASCII 码的特殊表示。 八进制数示例&#xff1a; 代码&#xff1a; #include<stdio.h> int main(void) {char beep\007;printf("%c\n",beep);return 0; }结果&#xff1a; …

机器视觉初步14:相机标定原理及应用

相机标定是指通过已知的相机参数&#xff0c;解算相机内部参数矩阵和外部参数矩阵。 文章目录 1.为什么要标定&#xff1f;2.工业场景中常见的标定方法2.1. 使用棋盘格标定板&#xff08;Checkerboard Markers&#xff09;2.2 使用相机自标定2.3. 使用三维物体标定2.4.九孔标…

【Linux】—— 进程的创建和退出

序言&#xff1a; 在上期&#xff0c;我们已经对 Linux的进程的相关知识进行了相关的学习。接下来&#xff0c;我们要学习的便是关于进程控制 的基本知识&#xff01;&#xff01;&#xff01; 目录 &#xff08;一&#xff09;进程创建 1、fork函数初识 2、写时拷贝 3、f…

Docker中容器数据卷

容器数据卷 一.什么是容器数据卷二.使用数据卷方式一&#xff1a;直接使用命令来挂载 -v 三.具名和匿名挂载 一.什么是容器数据卷 docker理念 将应用和环境打包成一个镜像&#xff01; 数据&#xff1f;如果数据都在容器中&#xff0c;那么我们的容器删除&#xff0c;数据就会…

oracle 19c打补丁遭遇OPATCHAUTO-72043OPATCHAUTO-68061

最近&#xff0c;在AIX上的新装oracle 19C数据库基础版本&#xff0c;使用opatchauto打PSU补丁集35037840时遇到了OPATCHAUTO-72043报错&#xff0c;无法正常应用GI补丁。 一、环境描述 操作系统&#xff1a;AIX 数据库版本&#xff1a;oracle rac 19.3.0新装基础版 应用PS…

2023拒绝内卷!两年转行网络安全真实看法!

我目前转行网络安全两年&#xff0c;没啥天分&#xff0c;全靠努力&#xff0c;基本能够得上中级的水平了。看到大家对转行网络安全挺感兴趣&#xff0c;也有挺多争议&#xff0c;想把我的建议和经验告诉大家。 有很多人觉得网络安全已经饱和了&#xff0c;现在选择这个工作&a…

Spring Boot : ORM 框架 JPA 与连接池 Hikari

数据库方面我们选用 Mysql &#xff0c; Spring Boot 提供了直接使用 JDBC 的方式连接数据库&#xff0c;毕竟使用 JDBC 并不是很方便&#xff0c;需要我们自己写更多的代码才能使用&#xff0c;一般而言在 Spring Boot 中我们常用的 ORM 框架有 JPA 和 Mybaties &#xff0c;本…

面试之多线程案例(四)

1.单例模式 单例模式是指在内存中只会创建且仅创建一次对象的设计模式。在程序中多次使用同一个对象且作用相同时&#xff0c;为了防止频繁地创建对象使得内存飙升&#xff0c;单例模式可以让程序仅在内存中创建一个对象&#xff0c;让所有需要调用的地方都共享这一单例对象。…

[React]生命周期

前言 学习React&#xff0c;生命周期很重要&#xff0c;我们了解完生命周期的各个组件&#xff0c;对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1、getDefaultProps() 设置默认的props&#xff0c;也可以用duf…

【数据结构】实现单链表的增删查

目录 1.定义接口2.无头单链表实现接口2.1 头插addFirst2.2 尾插add2.3 删除元素remove2.4 修改元素set2.5 获取元素get 3.带头单链表实现接口3.1 头插addFirst3.2 尾插add3.3 删除元素remove3.4 判断是否包含元素element 1.定义接口 public interface SeqList<E>{//默认…

关于拓扑排序

又重新学了一下拓扑排序&#xff0c;这次发现就十分简单了&#xff0c;拓扑排序的步骤 1.他必须是一个有向无环图&#xff0c;起点我们就是入度为0的点 2.我们首先要输出的就是入度为0的点&#xff0c;然后依次删除这些点连向的点&#xff0c;使这些点的入度-1&#xff0c;如果…