現(xiàn)狀和問題
2023年7月6日，世界迎來有記錄以來最熱的一天。氣候變化是如今人類面臨的最大健康威脅。據(jù)世界衛(wèi)生組織預(yù)測(cè)2030年至2050年期間牌芋，氣候變化預(yù)計(jì)每年將造成約25萬人死亡。這是人們可以真切感受到的變化松逊，而背后的主要推手是碳排放躺屁。
而在萬物互聯(lián)的數(shù)字化時(shí)代，碳排放很重要的來源之一是互聯(lián)網(wǎng)经宏，全球三分之二的人口預(yù)計(jì)將在2023年通過互聯(lián)網(wǎng)連接犀暑。隨著人們對(duì)數(shù)據(jù)和網(wǎng)絡(luò)服務(wù)的需求日益增長(zhǎng)，互聯(lián)網(wǎng)在數(shù)據(jù)中心烁兰、網(wǎng)絡(luò)通信和終端用戶設(shè)備等各個(gè)環(huán)節(jié)都消耗了大量電力耐亏，其碳排放也在不斷增加。如果我們將 Web 視為一個(gè)國(guó)家沪斟，那么它將在電力消耗方面排名第三广辰，在污染方面排名第四。
過去十年內(nèi)币喧，頁面?zhèn)鬏斮Y源大小在PC端和移動(dòng)端分別增長(zhǎng)162.5% 和 392%轨域。目前大多數(shù) Web 應(yīng)用：
托管在由化石燃料提供動(dòng)力的機(jī)器中
旨在獲得用戶注意力袱耽，增加內(nèi)容和交互杀餐，強(qiáng)化用戶參與度和忠誠(chéng)度
已經(jīng)開始關(guān)注并重視無障礙設(shè)計(jì)，但是尚未從設(shè)計(jì)角度考慮對(duì)環(huán)境的影響
開發(fā)者在實(shí)現(xiàn)時(shí)一般不會(huì)考慮可持續(xù)性與碳效率朱巨，大多情況下考慮的是性能和可靠性等維度
如何通過技術(shù)讓 Web 應(yīng)用改善對(duì)環(huán)境的影響和減少碳排放史翘，是值得IT從業(yè)者思考和解決的問題。但我們首先可以做的冀续，是開始構(gòu)建低碳的 Web 網(wǎng)站琼讽。
構(gòu)建綠色低碳 Web 應(yīng)用
沒有度量指標(biāo)，就沒有最佳實(shí)踐洪唐，畢竟我們只能優(yōu)化那些可以被觀測(cè)的碳排指標(biāo)钻蹬。所以在探討構(gòu)建低碳 Web 應(yīng)用的技術(shù)手段之前，我們需要了解表征網(wǎng)站碳排的指標(biāo)——頁面權(quán)重（Page Weight）凭需。頁面權(quán)重指網(wǎng)頁的字節(jié)大小问欠，代表用戶訪問網(wǎng)頁時(shí)肝匆，通過互聯(lián)網(wǎng)傳輸?shù)臄?shù)據(jù)量總和。
常見的 Web 碳排放計(jì)算工具顺献，諸如Ecograder旗国、 Website Carbon Calculator、Beacon注整，均基于頁面權(quán)重能曾。誠(chéng)然，頁面權(quán)重可能不是統(tǒng)計(jì)網(wǎng)站碳排放的最佳指標(biāo)肿轨，但它是目前我們能找到的最佳碳排代理值寿冕。
隨著 Web 技術(shù)的發(fā)展，用戶訪問的網(wǎng)站早已不是單純的 HTML 文件萝招，而是具有多種資源的 Web 應(yīng)用蚂斤。一般這些數(shù)據(jù)資源可以分為以下五類：
構(gòu)成網(wǎng)頁的 HTML 文件
網(wǎng)頁中嵌入的圖像和多媒體資源（視頻、音頻等）
修飾網(wǎng)頁樣式的 CSS 文件
提供網(wǎng)頁交互性的 JavaScript 文件
網(wǎng)頁集成的第三方服務(wù)（頁面分析工具槐沼、表單工具曙蒸、聊天機(jī)器人等）
頁面每增加一個(gè)數(shù)據(jù)資源，意味著該資源在存儲(chǔ)岗钩、傳輸和頁面呈現(xiàn)等過程中消耗的能源纽窟，都會(huì)影響頁面的數(shù)據(jù)傳輸量，增加頁面的能源消耗兼吓。我們可以以“減少頁面數(shù)據(jù)資源臂港，降低頁面數(shù)據(jù)傳輸量”為出發(fā)點(diǎn)，采取措施“降本增效”——精簡(jiǎn)壓縮 Web 應(yīng)用视搏，只在必要時(shí)消耗能源审孽；提高應(yīng)用的能源利用率，優(yōu)化應(yīng)用性能浑娜。
這并不意味著佑力，我們只能寄希望于開發(fā)人員，敦促他們通過技術(shù)手段落實(shí)相關(guān)舉措筋遭。如果我們著眼于軟件開發(fā)生命周期(SDLC)打颤，在每個(gè)交付階段落地相應(yīng)舉措，團(tuán)隊(duì)中的不同角色的成員都能參與其中漓滔，各司其職编饺，為低碳 Web 保駕護(hù)航。
需求分析階段
軟件膨脹（Software bloat）是一個(gè)老生常談的話題响驴，Web 應(yīng)用中往往充斥著冗余的功能透且，甚至在企業(yè)軟件領(lǐng)域，可能有 50% 的功能幾乎從未被使用過豁鲤，80% 的功能價(jià)值很低或沒有價(jià)值秽誊。冗余臃腫的復(fù)雜應(yīng)用罕邀，不但難以維護(hù)與擴(kuò)展，而且會(huì)增加應(yīng)用的運(yùn)行成本养距，導(dǎo)致能源浪費(fèi)诉探。實(shí)現(xiàn)低碳 Web 應(yīng)用，并不意味著我們只能通過技術(shù)手段進(jìn)行“壓縮”棍厌，我們也可以“壓縮”需求肾胯，從源頭減少能源消耗，構(gòu)建一個(gè)功能精簡(jiǎn)耘纱、小而全的應(yīng)用敬肚。
面對(duì)客戶急切的聲音：“我們需要這個(gè)功能，它對(duì)我們特別重要束析，我們現(xiàn)在就想要”艳馒，我們需要引導(dǎo)他們思考功能背后的價(jià)值：它真的可用、有用员寇？它是僅有的解決方案嗎弄慰？它是否可以使用現(xiàn)有功能替代？同時(shí)蝶锋，更小的應(yīng)用也意味著更低的開發(fā)成本和更短的交付周期陆爽。
設(shè)計(jì)階段
用戶行為與 Web 應(yīng)用的能耗效率息息相關(guān)，每當(dāng)用戶開始使用 Web 應(yīng)用扳缕，用戶所使用的設(shè)備就會(huì)開始持續(xù)消耗能量慌闭，增加 Web 應(yīng)用的數(shù)據(jù)傳輸。用戶行為對(duì) Web 應(yīng)用能耗的影響躯舔，可能也遠(yuǎn)超我們的想象——預(yù)計(jì) 52% 的數(shù)字產(chǎn)品碳排放源于用戶設(shè)備驴剔。為了最大程度地減少應(yīng)用的使用能耗，我們可以優(yōu)化用戶旅程粥庄，精簡(jiǎn)用戶的操作流程丧失，確保用戶通過最少的步驟達(dá)成目標(biāo)。
此外飒赃，我們也需要從設(shè)計(jì)出發(fā)利花，思考如何延長(zhǎng) Web 應(yīng)用的壽命科侈。Web 應(yīng)用能兼容老舊設(shè)備载佳，相當(dāng)于延長(zhǎng)了設(shè)備的使用壽命，因?yàn)橛脩舨恍枰獮榧嫒輵?yīng)用而更換設(shè)備臀栈。
除了用戶體驗(yàn)蔫慧，也有很多可以參考的綠色可持續(xù)設(shè)計(jì)，例如：
采用更節(jié)能的配色方案：黑色是顯示器上能耗最低的顏色权薯，深色模式和深色背景更為節(jié)能。
減少使用自定義字體：盡可能使用系統(tǒng)字體，避免客戶端加載額外的字體文件拄衰，增加頁面數(shù)據(jù)傳輸量寞射。
更節(jié)能地使用圖片：圖片是最常見的靜態(tài)資源，更節(jié)能地使用圖片資源苫纤，比如使用高分辨率但文件更小的 WebP 格式圖片文件，可以大幅減少頁面權(quán)重。
非必要不添加動(dòng)效和視頻：動(dòng)效與視頻可以提升用戶體驗(yàn)马靠，但也會(huì)增加頁面加載時(shí)的能耗。
開發(fā)階段
減少頁面權(quán)重
減少 Web 應(yīng)用頁面權(quán)重最直接的方法蔼两，就是避免一切不必要的數(shù)據(jù)傳輸：
設(shè)定頁面權(quán)重閾值：將頁面確保的數(shù)據(jù)傳輸量保持在盡可能低的水平甩鳄。通常建議頁面權(quán)重應(yīng)小于 1 MB，最好能夠不大于 500 KB额划。
-
頁面只加載必要的資源妙啃，優(yōu)化頁面請(qǐng)求:
對(duì)于頁面組件、CSS 文件及靜態(tài)資源俊戳，可以使用懶加載策略揖赴，Critical CSS 策略，參考 Import on Interaction和 Import on Visibility 等實(shí)踐抑胎，只在需要時(shí)加載資源储笑。
刪除未被使用的 CSS 和 JS 文件，減少 HTML 中的 CSS 及 JS 內(nèi)聯(lián)代碼圆恤。
壓縮 CSS 和 JS 文件突倍，刪除文件中不必要的字符，使用文本壓縮使文件更小盆昙。
在開發(fā)中引入功能全面的工具庫和框架可能會(huì)成為應(yīng)用的負(fù)擔(dān)羽历，畢竟我們并不會(huì)百分百使用引入框架的功能。通過選擇模塊化的 JS 框架淡喜，使用代碼替代或者按需加載一些體量龐大的工具庫秕磷，減少代碼文件大小。
按需使用三方服務(wù)：在許多數(shù)字產(chǎn)品和服務(wù)中炼团，追蹤用戶數(shù)據(jù)以及插入廣告的第三方服務(wù)往往會(huì)耗費(fèi)大量能源澎嚣。此外，這些服務(wù)也會(huì)嚴(yán)重侵犯用戶隱私瘟芝，并明顯降低用戶體驗(yàn)易桃。第三方服務(wù)如果需要跟蹤數(shù)據(jù)，應(yīng)向用戶說明收集的內(nèi)容和使用方式锌俱。要盡可能選擇侵入性最小晤郑、效率最高的方式收集數(shù)據(jù)，確保只收集所需的數(shù)據(jù)，并且支持用戶關(guān)閉追蹤造寝。
采用 PWA 應(yīng)用架構(gòu)：漸進(jìn)式 Web 應(yīng)用（Progressive Web App磕洪，PWA）通過在用戶設(shè)備上緩存關(guān)鍵信息和信息資產(chǎn)以改善用戶體驗(yàn)并減少數(shù)據(jù)傳輸。用戶在訪問 PWA 緩存數(shù)據(jù)時(shí)诫龙，可以實(shí)現(xiàn)零網(wǎng)絡(luò)數(shù)據(jù)傳輸析显。數(shù)據(jù)緩存不但可以減少由數(shù)據(jù)傳輸引起的碳排放，還可以改善網(wǎng)絡(luò)連接不穩(wěn)定對(duì)用戶體驗(yàn)的影響签赃。相較于本地應(yīng)用程序和傳統(tǒng) Web 應(yīng)用叫榕，PWA 用戶響應(yīng)速度更快，能耗更低姊舵，碳排放更少晰绎。
提升應(yīng)用能源利用率
在開發(fā)過程中，我們往往并不會(huì)優(yōu)先考慮運(yùn)行應(yīng)用產(chǎn)生的能源消耗括丁，以及應(yīng)用運(yùn)行的硬件性能荞下。一段低效代碼會(huì)隨著 Web 應(yīng)用的運(yùn)行，會(huì)持續(xù)影響應(yīng)用的能耗水平史飞，我們可能已經(jīng)造成了難以預(yù)計(jì)的計(jì)算資源浪費(fèi)尖昏。開發(fā)人員不應(yīng)只考慮通過更簡(jiǎn)單、更快速的方式實(shí)現(xiàn)功能构资，還應(yīng)考慮功能的性能與能耗抽诉，選擇更低碳的方式實(shí)現(xiàn)功能：
遵循DRY（Don't repeat yourself ）原則： 在編碼過程中需要重視代碼的復(fù)用性。那些只能使用一次的代碼吐绵，不但難以維護(hù)迹淌，浪費(fèi)開發(fā)時(shí)間，也會(huì)浪費(fèi)運(yùn)算資源與能源己单。
使用更高效的算法和設(shè)計(jì)模式唉窃。雖然算法的時(shí)間效率和軟件碳強(qiáng)度并不總是成正比，但它們?nèi)匀幌嚓P(guān)纹笼。
刪除或重構(gòu)未被使用的功能纹份。這不但提高了能源效率，也使軟件更容易維護(hù)廷痘。
選擇效率更高的編程語言：編譯型語言往往比解釋型語言最節(jié)能蔓涧。Python 在 27 種語言中排名耗電量最高，Python 應(yīng)用程序可能會(huì)在大規(guī)模處理笋额、存儲(chǔ)和網(wǎng)絡(luò)傳輸中產(chǎn)生巨大的能量消耗元暴。
測(cè)試階段
我們可以將碳排量和代碼能耗效率作為測(cè)試驗(yàn)收的一部分，以下是一些檢測(cè)工具：
-
碳排放計(jì)算工具：
在線計(jì)算工具：Ecograder鳞陨、Website Carbon Calculator 和 Ecoping 等網(wǎng)站提供估算網(wǎng)頁碳排放的在線服務(wù)昨寞。
CO2.js: 是一個(gè) JavaScript 開源庫，用于估算網(wǎng)站厦滤、應(yīng)用和軟件在使用時(shí)產(chǎn)生的碳排放援岩。
Sitespeed sustainability plugin：Sitespeed 是一款 Web 性能監(jiān)控工具，可以給出頁面碳排相關(guān)報(bào)告掏导。
WebPageTest Carbon Control: WebPageTest 是一款開源網(wǎng)絡(luò)性能工具享怀，其中Carbon Control 模塊可以估算每次訪問的碳足跡以及部署服務(wù)是否使用可再生能源。
-
代碼能耗效率掃描工具：
CAST GreenIT Index: 自動(dòng)化代碼能耗分析工具趟咆，可以掃描靜態(tài)代碼中的能耗缺陷并給出相關(guān)修復(fù)建議添瓷。
ecoCode: SonarQube 的一款插件，可以檢測(cè)代碼中能源過度消耗等問題值纱，旨在減少軟件在代碼級(jí)別的環(huán)境足跡鳞贷。
Carbon CI pipeline tooling: Green Software Foundation 開發(fā)的靜態(tài)代碼掃描工具，可估算應(yīng)用的碳排量并集成 CI虐唠。
部署階段
在部署階段搀愧，使用可再生能源的托管服務(wù)部署 Web 應(yīng)用是最便捷有效的減碳實(shí)踐。你可以使用Green Web Foundation首頁提供的 Green Hosting 掃描工具檢測(cè)應(yīng)用的部署服務(wù)是否使用可再生能源疆偿。通常云服務(wù)供應(yīng)商會(huì)提供Green Hosting服務(wù)咱筛，但如果當(dāng)前你使用的供應(yīng)商尚未提供此類服務(wù)，可以考慮更換到支持Green Hosting的服務(wù)商杆故。這會(huì)是一個(gè)重要的決策迅箩，但實(shí)施起來其實(shí)并不復(fù)雜，也不會(huì)增加成本处铛。此外饲趋，數(shù)據(jù)傳輸?shù)奈锢砭嚯x越短，傳輸階段消耗的能源就越少撤蟆。請(qǐng)盡量選擇將服務(wù)部署在離用戶更近的區(qū)域篙贸，尤其是分發(fā)靜態(tài)資源的 CDN 服務(wù)。
實(shí)踐經(jīng)驗(yàn)分享
在Thoughtworks的一個(gè)內(nèi)部項(xiàng)目上枫疆，借助優(yōu)化一個(gè)主要的JS資源大芯舸ā（從3.12MB 減小至 648KB），結(jié)合每月用戶訪問量和開源工具 CO2.js估算出每月數(shù)據(jù)傳輸減少了17GB息楔，碳排放降低了79%寝贡。這僅僅是優(yōu)化了一個(gè)JS資源，如果每個(gè)頁面上的內(nèi)容都做到有用值依、可用和被使用圃泡，在技術(shù)上也能通過壓縮、緩存等方式減少資源大小愿险，累加在一起會(huì)產(chǎn)生巨大的影響颇蜡，特別是對(duì)于訪問量很大的 Web 應(yīng)用价说。
目前很多IT從業(yè)者和公司已經(jīng)開始重視網(wǎng)站對(duì)環(huán)境的影響。Valentino (fashion house)與Karma Metrix公司合作來衡量其頁面和網(wǎng)站的能源性能并減少其影響风秤。WordPress的Mailchimp插件的開發(fā)者通過減少其中一個(gè)文件20KB鳖目，每月可節(jié)省約59噸二氧化碳。Branch是由一群關(guān)注數(shù)字化技術(shù)與環(huán)境可持續(xù)性的人共同創(chuàng)建的在線雜志缤弦。Branch實(shí)現(xiàn)了一種設(shè)計(jì) —— 需求響應(yīng)领迈，利用來自電網(wǎng)強(qiáng)度和用戶位置的數(shù)據(jù)，按照當(dāng)前用戶所在地的能源情況呈現(xiàn)不同的界面碍沐。例如當(dāng)電網(wǎng)需求較低且可再生能源比例較高時(shí)狸捅，該網(wǎng)站顯示了自動(dòng)加載所有圖像，視頻和媒體內(nèi)容的完整體驗(yàn)累提。當(dāng)電網(wǎng)需求高且可再生能源利用較少時(shí)尘喝，會(huì)通過強(qiáng)調(diào)替代文本（alt text）的方式來展示媒體內(nèi)容。用戶可以選擇點(diǎn)擊展示內(nèi)容斋陪，但內(nèi)容不會(huì)自動(dòng)加載瞧省。
此外，W3C的可持續(xù)網(wǎng)頁設(shè)計(jì)社區(qū)目前正在合作制定一套指導(dǎo)方針鳍贾，以幫助從事 Web 工作的人群創(chuàng)建更環(huán)保的數(shù)字產(chǎn)品和服務(wù)鞍匾，希望如同 Web Accessibility 權(quán)威標(biāo)準(zhǔn)WCAG（Web Content Accessibility Guidelines）一樣，建立互聯(lián)網(wǎng)的環(huán)境標(biāo)準(zhǔn)骑科。目前有一個(gè)草案提議在HTTP headers加入請(qǐng)求的碳排放數(shù)據(jù)橡淑，以便服務(wù)提供商和消費(fèi)者可以就網(wǎng)絡(luò)使用情況做出更明智的決策。
不止低碳
技術(shù)手段可以幫助減少 Web 對(duì)環(huán)境的影響咆爽，但不僅僅是減碳梁棠。
當(dāng)我們創(chuàng)建更易于訪問的數(shù)字產(chǎn)品來消除內(nèi)容障礙時(shí)，通常還會(huì)提高性能和效率斗埂，從而會(huì)使用更少的資源符糊。這意味著在助力 Web 無障礙性的同時(shí)，也提高了性能呛凶。
摩爾定律指出每 18 個(gè)月硬件的運(yùn)算能力就會(huì)提升一倍男娄，但軟件卻無法跟上硬件的進(jìn)步。維爾特定律提到軟件變慢的速度永遠(yuǎn)快過硬件變快的速度漾稀，軟件效率每18個(gè)月減半模闲，從而抵消了摩爾定律的所有好處。因此相比新設(shè)備崭捍，軟件在老舊設(shè)備上會(huì)耗費(fèi)越來越多的資源尸折，造成不必要的碳排放，而低碳實(shí)踐可以減少頁面權(quán)重殷蛇，所以一定程度上可以幫助精簡(jiǎn)軟件实夹，讓軟件在舊設(shè)備上運(yùn)行順暢橄浓，延長(zhǎng)舊設(shè)備更換周期，減少浪費(fèi)亮航。
據(jù)《2022年中國(guó)可持續(xù)消費(fèi)報(bào)告》統(tǒng)計(jì)荸实，消費(fèi)者對(duì)低碳消費(fèi)生活方式的理解主要集中在“綠色出行”(72.51%)、“環(huán)保材料”(66.68%)塞赂、“循環(huán)再生”(65.79%)泪勒、“垃圾分類”(60.76%)昼蛀、 “節(jié)水節(jié)電”(60.33%)宴猾、“新能源車”(60.14%)這幾項(xiàng)，而絕大多數(shù)互聯(lián)網(wǎng)用戶尚未注意互聯(lián)網(wǎng)也是需要綠色低碳的叼旋。實(shí)現(xiàn)綠色互聯(lián)網(wǎng)之路需要實(shí)踐者和使用者共同努力仇哆，因此可以借助 Web 應(yīng)用的低碳實(shí)踐構(gòu)建用戶意識(shí)。公眾低碳消費(fèi)意識(shí)越來越強(qiáng)夫植，也有利于我們?nèi)ホ`行負(fù)責(zé)任技術(shù)讹剔。
作為IT從業(yè)者，我們應(yīng)該踐行負(fù)責(zé)任技術(shù) —— 積極思考并探索技術(shù)的價(jià)值详民、不可測(cè)的后果和負(fù)面的影響延欠，主動(dòng)管理、減緩和降低技術(shù)的風(fēng)險(xiǎn)與傷害沈跨。我們是一切實(shí)踐的關(guān)鍵起點(diǎn)由捎，如何在早期最大限度避免把人所固有的認(rèn)知偏見和思維慣性帶入到設(shè)計(jì)和開發(fā)中顯得尤為重要。
總結(jié)和展望
Web 應(yīng)用作為碳排放的一個(gè)重要來源饿凛，我們需要將低碳 Web 實(shí)踐融入到日常應(yīng)用開發(fā)的過程中狞玛。在業(yè)界，已經(jīng)有很多在低碳 Web 方面的研究涧窒，從 Web 應(yīng)用的設(shè)計(jì)到部署運(yùn)維都提供了相應(yīng)的工具和最佳實(shí)踐供大家參考心肪。本文將相關(guān)實(shí)踐以軟件生命周期為主線進(jìn)行了整理匯總，同時(shí)也分享了簡(jiǎn)單的案例纠吴，供同業(yè)人員進(jìn)行參考和了解硬鞍。
隨著氣候變化的影響日益增大，部分國(guó)家已經(jīng)開始著手制定相關(guān)標(biāo)準(zhǔn)和政策戴已，而我們 Web 從業(yè)者需要從意識(shí)膳凝、實(shí)踐等多方入手，在優(yōu)化 Web 應(yīng)用的時(shí)候恭陡，不僅僅為了性能和體驗(yàn)而優(yōu)化蹬音，也為了可持續(xù)而優(yōu)化，共同構(gòu)建綠色地球休玩。
Optimizing for the Planet, Not Just Performance.
文/Thoughtworks 付瑩&梁晶&孫郁儼
原文鏈接：低碳 Web 實(shí)踐指南-Thoughtworks洞見
