作者 | 付瑩,梁晶,孫郁儼

現(xiàn)狀和問題

2023年7月6日，世界迎來有記錄以來最熱的一天。氣候變化是如今人類面臨的最大健康威脅。據(jù)世界衛(wèi)生組織預(yù)測2030年至2050年期間，氣候變化預(yù)計每年將造成約25萬人死亡。這是人們可以真切感受到的變化，而背后的主要推手是碳排放。

而在萬物互聯(lián)的數(shù)字化時代，碳排放很重要的來源之一是互聯(lián)網(wǎng)，全球三分之二的人口預(yù)計將在2023年通過互聯(lián)網(wǎng)連接。隨著人們對數(shù)據(jù)和網(wǎng)絡(luò)服務(wù)的需求日益增長，互聯(lián)網(wǎng)在數(shù)據(jù)中心、網(wǎng)絡(luò)通信和終端用戶設(shè)備等各個環(huán)節(jié)都消耗了大量電力，其碳排放也在不斷增加。如果我們將 Web 視為一個國家，那么它將在電力消耗方面排名第三，在污染方面排名第四。

過去十年內(nèi)，頁面?zhèn)鬏斮Y源大小在PC端和移動端分別增長162.5% 和 392%。目前大多數(shù) Web 應(yīng)用：

• 托管在由化石燃料提供動力的機器中
• 旨在獲得用戶注意力，增加內(nèi)容和交互，強化用戶參與度和忠誠度
• 已經(jīng)開始關(guān)注并重視無障礙設(shè)計，但是尚未從設(shè)計角度考慮對環(huán)境的影響
• 開發(fā)者在實現(xiàn)時一般不會考慮可持續(xù)性與碳效率，大多情況下考慮的是性能和可靠性等維度

如何通過技術(shù)讓 Web 應(yīng)用改善對環(huán)境的影響和減少碳排放，是值得IT從業(yè)者思考和解決的問題。但我們首先可以做的，是開始構(gòu)建低碳的 Web 網(wǎng)站。

構(gòu)建綠色低碳 Web 應(yīng)用

沒有度量指標(biāo)，就沒有最佳實踐，畢竟我們只能優(yōu)化那些可以被觀測的碳排指標(biāo)。所以在探討構(gòu)建低碳 Web 應(yīng)用的技術(shù)手段之前，我們需要了解表征網(wǎng)站碳排的指標(biāo)——頁面權(quán)重（Page Weight）。頁面權(quán)重指網(wǎng)頁的字節(jié)大小，代表用戶訪問網(wǎng)頁時，通過互聯(lián)網(wǎng)傳輸?shù)臄?shù)據(jù)量總和。

常見的 Web 碳排放計算工具，諸如Ecograder、 Website Carbon Calculator、Beacon，均基于頁面權(quán)重。誠然，頁面權(quán)重可能不是統(tǒng)計網(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ù)（頁面分析工具、表單工具、聊天機器人等）

頁面每增加一個數(shù)據(jù)資源，意味著該資源在存儲、傳輸和頁面呈現(xiàn)等過程中消耗的能源，都會影響頁面的數(shù)據(jù)傳輸量，增加頁面的能源消耗。我們可以以“減少頁面數(shù)據(jù)資源，降低頁面數(shù)據(jù)傳輸量”為出發(fā)點，采取措施“降本增效”——精簡壓縮 Web 應(yīng)用，只在必要時消耗能源；提高應(yīng)用的能源利用率，優(yōu)化應(yīng)用性能。

這并不意味著，我們只能寄希望于開發(fā)人員，敦促他們通過技術(shù)手段落實相關(guān)舉措。如果我們著眼于軟件開發(fā)生命周期(SDLC)，在每個交付階段落地相應(yīng)舉措，團隊中的不同角色的成員都能參與其中，各司其職，為低碳 Web 保駕護(hù)航。

圖片

需求分析階段

軟件膨脹（Software bloat）是一個老生常談的話題，Web 應(yīng)用中往往充斥著冗余的功能，甚至在企業(yè)軟件領(lǐng)域，可能有 50% 的功能幾乎從未被使用過，80% 的功能價值很低或沒有價值。冗余臃腫的復(fù)雜應(yīng)用，不但難以維護(hù)與擴展，而且會增加應(yīng)用的運行成本，導(dǎo)致能源浪費。實現(xiàn)低碳 Web 應(yīng)用，并不意味著我們只能通過技術(shù)手段進(jìn)行“壓縮”，我們也可以“壓縮”需求，從源頭減少能源消耗，構(gòu)建一個功能精簡、小而全的應(yīng)用。

面對客戶急切的聲音：“我們需要這個功能，它對我們特別重要，我們現(xiàn)在就想要”，我們需要引導(dǎo)他們思考功能背后的價值：它真的可用、有用？它是僅有的解決方案嗎？它是否可以使用現(xiàn)有功能替代？同時，更小的應(yīng)用也意味著更低的開發(fā)成本和更短的交付周期。

設(shè)計階段

用戶行為與 Web 應(yīng)用的能耗效率息息相關(guān)，每當(dāng)用戶開始使用 Web 應(yīng)用，用戶所使用的設(shè)備就會開始持續(xù)消耗能量，增加 Web 應(yīng)用的數(shù)據(jù)傳輸。用戶行為對 Web 應(yīng)用能耗的影響，可能也遠(yuǎn)超我們的想象——預(yù)計 52% 的數(shù)字產(chǎn)品碳排放源于用戶設(shè)備。為了最大程度地減少應(yīng)用的使用能耗，我們可以優(yōu)化用戶旅程，精簡用戶的操作流程，確保用戶通過最少的步驟達(dá)成目標(biāo)。

此外，我們也需要從設(shè)計出發(fā)，思考如何延長 Web 應(yīng)用的壽命。Web 應(yīng)用能兼容老舊設(shè)備，相當(dāng)于延長了設(shè)備的使用壽命，因為用戶不需要為兼容應(yīng)用而更換設(shè)備。

除了用戶體驗，也有很多可以參考的綠色可持續(xù)設(shè)計，例如：

• 采用更節(jié)能的配色方案：黑色是顯示器上能耗最低的顏色，深色模式和深色背景更為節(jié)能。
• 減少使用自定義字體：盡可能使用系統(tǒng)字體，避免客戶端加載額外的字體文件，增加頁面數(shù)據(jù)傳輸量。
• 更節(jié)能地使用圖片：圖片是最常見的靜態(tài)資源，更節(jié)能地使用圖片資源，比如使用高分辨率但文件更小的 WebP 格式圖片文件，可以大幅減少頁面權(quán)重。
• 非必要不添加動效和視頻：動效與視頻可以提升用戶體驗，但也會增加頁面加載時的能耗。

開發(fā)階段

減少頁面權(quán)重

減少 Web 應(yīng)用頁面權(quán)重最直接的方法，就是避免一切不必要的數(shù)據(jù)傳輸：

(1) 設(shè)定頁面權(quán)重閾值：將頁面確保的數(shù)據(jù)傳輸量保持在盡可能低的水平。通常建議頁面權(quán)重應(yīng)小于 1 MB，最好能夠不大于 500 KB。

(2) 頁面只加載必要的資源，優(yōu)化頁面請求:

• 對于頁面組件、CSS 文件及靜態(tài)資源，可以使用懶加載策略，Critical CSS 策略，參考 Import on Interaction和 Import on Visibility 等實踐，只在需要時加載資源。
• 刪除未被使用的 CSS 和 JS 文件，減少 HTML 中的 CSS 及 JS 內(nèi)聯(lián)代碼。
• 壓縮 CSS 和 JS 文件，刪除文件中不必要的字符，使用文本壓縮使文件更小。
• 在開發(fā)中引入功能全面的工具庫和框架可能會成為應(yīng)用的負(fù)擔(dān)，畢竟我們并不會百分百使用引入框架的功能。通過選擇模塊化的 JS 框架，使用代碼替代或者按需加載一些體量龐大的工具庫，減少代碼文件大小。

(3) 按需使用三方服務(wù)：在許多數(shù)字產(chǎn)品和服務(wù)中，追蹤用戶數(shù)據(jù)以及插入廣告的第三方服務(wù)往往會耗費大量能源。此外，這些服務(wù)也會嚴(yán)重侵犯用戶隱私，并明顯降低用戶體驗。第三方服務(wù)如果需要跟蹤數(shù)據(jù)，應(yīng)向用戶說明收集的內(nèi)容和使用方式。要盡可能選擇侵入性最小、效率最高的方式收集數(shù)據(jù)，確保只收集所需的數(shù)據(jù)，并且支持用戶關(guān)閉追蹤。

(4) 采用 PWA 應(yīng)用架構(gòu)：漸進(jìn)式 Web 應(yīng)用（Progressive Web App，PWA）通過在用戶設(shè)備上緩存關(guān)鍵信息和信息資產(chǎn)以改善用戶體驗并減少數(shù)據(jù)傳輸。用戶在訪問 PWA 緩存數(shù)據(jù)時，可以實現(xiàn)零網(wǎng)絡(luò)數(shù)據(jù)傳輸。數(shù)據(jù)緩存不但可以減少由數(shù)據(jù)傳輸引起的碳排放，還可以改善網(wǎng)絡(luò)連接不穩(wěn)定對用戶體驗的影響。相較于本地應(yīng)用程序和傳統(tǒng) Web 應(yīng)用，PWA 用戶響應(yīng)速度更快，能耗更低，碳排放更少。

提升應(yīng)用能源利用率

在開發(fā)過程中，我們往往并不會優(yōu)先考慮運行應(yīng)用產(chǎn)生的能源消耗，以及應(yīng)用運行的硬件性能。一段低效代碼會隨著 Web 應(yīng)用的運行，會持續(xù)影響應(yīng)用的能耗水平，我們可能已經(jīng)造成了難以預(yù)計的計算資源浪費。開發(fā)人員不應(yīng)只考慮通過更簡單、更快速的方式實現(xiàn)功能，還應(yīng)考慮功能的性能與能耗，選擇更低碳的方式實現(xiàn)功能：

• 遵循DRY（Don't repeat yourself ）原則：在編碼過程中需要重視代碼的復(fù)用性。那些只能使用一次的代碼，不但難以維護(hù)，浪費開發(fā)時間，也會浪費運算資源與能源。
• 使用更高效的算法和設(shè)計模式。雖然算法的時間效率和軟件碳強度并不總是成正比，但它們?nèi)匀幌嚓P(guān)。
• 刪除或重構(gòu)未被使用的功能。這不但提高了能源效率，也使軟件更容易維護(hù)。
• 選擇效率更高的編程語言：編譯型語言往往比解釋型語言最節(jié)能。Python 在 27 種語言中排名耗電量最高，Python 應(yīng)用程序可能會在大規(guī)模處理、存儲和網(wǎng)絡(luò)傳輸中產(chǎn)生巨大的能量消耗。

測試階段

我們可以將碳排量和代碼能耗效率作為測試驗收的一部分，以下是一些檢測工具：

(1) 碳排放計算工具：

• 在線計算工具：Ecograder、Website Carbon Calculator 和 Ecoping 等網(wǎng)站提供估算網(wǎng)頁碳排放的在線服務(wù)。
• CO2.js: 是一個 JavaScript 開源庫，用于估算網(wǎng)站、應(yīng)用和軟件在使用時產(chǎn)生的碳排放。
• Sitespeed sustainability plugin：Sitespeed 是一款 Web 性能監(jiān)控工具，可以給出頁面碳排相關(guān)報告。
• WebPageTest Carbon Control: WebPageTest 是一款開源網(wǎng)絡(luò)性能工具，其中Carbon Control 模塊可以估算每次訪問的碳足跡以及部署服務(wù)是否使用可再生能源。

(2) 代碼能耗效率掃描工具：

• CAST GreenIT Index: 自動化代碼能耗分析工具，可以掃描靜態(tài)代碼中的能耗缺陷并給出相關(guān)修復(fù)建議。
• ecoCode: SonarQube 的一款插件，可以檢測代碼中能源過度消耗等問題，旨在減少軟件在代碼級別的環(huán)境足跡。
• Carbon CI pipeline tooling: Green Software Foundation 開發(fā)的靜態(tài)代碼掃描工具，可估算應(yīng)用的碳排量并集成 CI。

部署階段

在部署階段，使用可再生能源的托管服務(wù)部署 Web 應(yīng)用是最便捷有效的減碳實踐。你可以使用Green Web Foundation首頁提供的 Green Hosting 掃描工具檢測應(yīng)用的部署服務(wù)是否使用可再生能源。通常云服務(wù)供應(yīng)商會提供Green Hosting服務(wù)，但如果當(dāng)前你使用的供應(yīng)商尚未提供此類服務(wù)，可以考慮更換到支持Green Hosting的服務(wù)商。這會是一個重要的決策，但實施起來其實并不復(fù)雜，也不會增加成本。此外，數(shù)據(jù)傳輸?shù)奈锢砭嚯x越短，傳輸階段消耗的能源就越少。請盡量選擇將服務(wù)部署在離用戶更近的區(qū)域，尤其是分發(fā)靜態(tài)資源的 CDN 服務(wù)。

實踐經(jīng)驗分享

在Thoughtworks的一個內(nèi)部項目上，借助優(yōu)化一個主要的JS資源大?。◤?.12MB 減小至 648KB），結(jié)合每月用戶訪問量和開源工具 CO2.js估算出每月數(shù)據(jù)傳輸減少了17GB，碳排放降低了79%。這僅僅是優(yōu)化了一個JS資源，如果每個頁面上的內(nèi)容都做到有用、可用和被使用，在技術(shù)上也能通過壓縮、緩存等方式減少資源大小，累加在一起會產(chǎn)生巨大的影響，特別是對于訪問量很大的 Web 應(yīng)用。

目前很多IT從業(yè)者和公司已經(jīng)開始重視網(wǎng)站對環(huán)境的影響。Valentino (fashion house)與Karma Metrix公司合作來衡量其頁面和網(wǎng)站的能源性能并減少其影響。WordPress的Mailchimp插件的開發(fā)者通過減少其中一個文件20KB，每月可節(jié)省約59噸二氧化碳。Branch是由一群關(guān)注數(shù)字化技術(shù)與環(huán)境可持續(xù)性的人共同創(chuàng)建的在線雜志。Branch實現(xiàn)了一種設(shè)計 —— 需求響應(yīng)，利用來自電網(wǎng)強度和用戶位置的數(shù)據(jù)，按照當(dāng)前用戶所在地的能源情況呈現(xiàn)不同的界面。例如當(dāng)電網(wǎng)需求較低且可再生能源比例較高時，該網(wǎng)站顯示了自動加載所有圖像，視頻和媒體內(nèi)容的完整體驗。當(dāng)電網(wǎng)需求高且可再生能源利用較少時，會通過強調(diào)替代文本（alt text）的方式來展示媒體內(nèi)容。用戶可以選擇點擊展示內(nèi)容，但內(nèi)容不會自動加載。

此外，W3C的可持續(xù)網(wǎng)頁設(shè)計社區(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)。目前有一個草案提議在HTTP headers加入請求的碳排放數(shù)據(jù)，以便服務(wù)提供商和消費者可以就網(wǎng)絡(luò)使用情況做出更明智的決策。

不止低碳

技術(shù)手段可以幫助減少 Web 對環(huán)境的影響，但不僅僅是減碳。

當(dāng)我們創(chuàng)建更易于訪問的數(shù)字產(chǎn)品來消除內(nèi)容障礙時，通常還會提高性能和效率，從而會使用更少的資源。這意味著在助力 Web 無障礙性的同時，也提高了性能。

摩爾定律指出每 18 個月硬件的運算能力就會提升一倍，但軟件卻無法跟上硬件的進(jìn)步。維爾特定律提到軟件變慢的速度永遠(yuǎn)快過硬件變快的速度，軟件效率每18個月減半，從而抵消了摩爾定律的所有好處。因此相比新設(shè)備，軟件在老舊設(shè)備上會耗費越來越多的資源，造成不必要的碳排放，而低碳實踐可以減少頁面權(quán)重，所以一定程度上可以幫助精簡軟件，讓軟件在舊設(shè)備上運行順暢，延長舊設(shè)備更換周期，減少浪費。

據(jù)《2022年中國可持續(xù)消費報告》統(tǒng)計，消費者對低碳消費生活方式的理解主要集中在“綠色出行”(72.51%)、“環(huán)保材料”(66.68%)、“循環(huán)再生”(65.79%)、“垃圾分類”(60.76%)、 “節(jié)水節(jié)電”(60.33%)、“新能源車”(60.14%)這幾項，而絕大多數(shù)互聯(lián)網(wǎng)用戶尚未注意互聯(lián)網(wǎng)也是需要綠色低碳的。實現(xiàn)綠色互聯(lián)網(wǎng)之路需要實踐者和使用者共同努力，因此可以借助 Web 應(yīng)用的低碳實踐構(gòu)建用戶意識。公眾低碳消費意識越來越強，也有利于我們?nèi)ホ`行負(fù)責(zé)任技術(shù)。

作為IT從業(yè)者，我們應(yīng)該踐行負(fù)責(zé)任技術(shù) —— 積極思考并探索技術(shù)的價值、不可測的后果和負(fù)面的影響，主動管理、減緩和降低技術(shù)的風(fēng)險與傷害。我們是一切實踐的關(guān)鍵起點，如何在早期最大限度避免把人所固有的認(rèn)知偏見和思維慣性帶入到設(shè)計和開發(fā)中顯得尤為重要。

總結(jié)和展望

Web 應(yīng)用作為碳排放的一個重要來源，我們需要將低碳 Web 實踐融入到日常應(yīng)用開發(fā)的過程中。在業(yè)界，已經(jīng)有很多在低碳 Web 方面的研究，從 Web 應(yīng)用的設(shè)計到部署運維都提供了相應(yīng)的工具和最佳實踐供大家參考。本文將相關(guān)實踐以軟件生命周期為主線進(jìn)行了整理匯總，同時也分享了簡單的案例，供同業(yè)人員進(jìn)行參考和了解。

隨著氣候變化的影響日益增大，部分國家已經(jīng)開始著手制定相關(guān)標(biāo)準(zhǔn)和政策，而我們 Web 從業(yè)者需要從意識、實踐等多方入手，在優(yōu)化 Web 應(yīng)用的時候，不僅僅為了性能和體驗而優(yōu)化，也為了可持續(xù)而優(yōu)化，共同構(gòu)建綠色地球。