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

現狀和問題

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 應用。一般這些數據資源可以分為以下五類：

• 構成網頁的 HTML 文件
• 網頁中嵌入的圖像和多媒體資源（視頻、音頻等）
• 修飾網頁樣式的 CSS 文件
• 提供網頁交互性的 JavaScript 文件
• 網頁集成的第三方服務（頁面分析工具、表單工具、聊天機器人等）

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

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

圖片

需求分析階段

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

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

設計階段

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

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

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

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

開發階段

減少頁面權重

減少 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 應用的運行，會持續影響應用的能耗水平，我們可能已經造成了難以預計的計算資源浪費。開發人員不應只考慮通過更簡單、更快速的方式實現功能，還應考慮功能的性能與能耗，選擇更低碳的方式實現功能：

• 遵循DRY（Don't repeat yourself ）原則：在編碼過程中需要重視代碼的復用性。那些只能使用一次的代碼，不但難以維護，浪費開發時間，也會浪費運算資源與能源。
• 使用更高效的算法和設計模式。雖然算法的時間效率和軟件碳強度并不總是成正比，但它們仍然相關。
• 刪除或重構未被使用的功能。這不但提高了能源效率，也使軟件更容易維護。
• 選擇效率更高的編程語言：編譯型語言往往比解釋型語言最節能。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 應用的時候，不僅僅為了性能和體驗而優化，也為了可持續而優化，共同構建綠色地球。