Introduction to web sustainability. Learn how you can contribute to building a greener and sustainable web. A vibrant gradient background with one artwork of two hands cradling the image of planet and the other artwork of a green recycle symbol.

Web 可持續性簡介

閱讀時間 8 分鐘

隨著氣候變化的影響日益明顯和頻繁,它正迅速成為全球各國政府、社群和公司議程上的重中之重。我們知道,減少溫室氣體排放對於緩解氣候變化的最嚴重影響並確保一個宜居和可持續的未來至關重要。

每個行業都必須發揮作用,包括我們網路行業。在本文中,我們將探討我們數字生活方式的一些環境影響,並討論網路設計師和開發人員如何為更可持續的實踐做出貢獻。

數字技術如何增加碳排放

人們常常認為數字技術是“清潔”的,因為數字活動不像工廠或汽車那樣產生可見的汙染。事實上,網際網路約佔全球碳排放量的4%,這一數字相當於整個航空業的排放量。

數字景觀的環境影響很大一部分源於電力使用,而電力通常來自化石燃料。燃燒化石燃料會產生二氧化碳(CO2),通常稱為碳排放。這些電力不僅為使用者的裝置供電,還促進了網路之間的資料儲存和傳輸,並支援我們數字基礎設施硬體的製造。顯示碳排放源的餅圖,52%來自裝置使用,29%來自資料儲存和傳輸,19%來自硬體生產 來源

數字可持續性面臨的挑戰

考慮碳排放只是使我們的網路應用程式更可持續的一個方面。在構建網路時,還有許多其他相互關聯的因素需要考慮,以便做出更可持續的選擇。

用水量

不斷擴大的科技行業需要更多的資料中心,這些資料中心不僅耗能,而且需要**大量**的水進行冷卻。矽晶片在製造過程中也需要大量的水。缺水正成為全球日益關注的問題,並將因氣候變化而加劇。社群賴以生存的重要水源正越來越多地被轉移來支援數字基礎設施。

電子垃圾處理

全球每年產生約4000萬噸電子垃圾。舊裝置,如筆記型電腦、智慧手機和平板電腦,經常被隨意丟棄,未能得到妥善回收,往往流向南方國家,在那裡造成汙染並破壞脆弱的生態系統。即使進行了回收,也常常是在剝削性的條件下進行的。

材料提取

裝置製造和電池技術(對向可再生能源過渡越來越重要)依賴於貴金屬的開採。提取這些自然資源極具破壞性,它們正在摧毀景觀和社群。

化學汙染

裝置製造過程中的有害化學物質很容易進入自然環境,造成危害。

社會不平等和氣候正義

弱勢群體最有可能遭受我們數字生活方式的環境影響,而獲益的可能性最小。我們必須確保向日益可持續實踐的過渡不會無意中將負擔轉移到那些已經承擔最大成本的人身上。

網路專業人士改善數字可持續性的可行步驟

您可能認為,任何減少網路環境影響的個人努力都只是杯水車薪。但作為科技工作者,與其他行業相比,我們處於相對有利的地位。我們構建的產品可能會被成千上萬甚至數百萬使用者使用。當我們將其規模化時,我們做出的任何改進都有可能產生巨大的影響。

減少我們所構建產品造成的碳排放是一個顯而易見的起點,同時也要繼續進行整體思考,並牢記數字可持續性的其他方面。

提高網頁效能以降低碳排放的方法

在近幾年,讓我們的網站對使用者來說更快已成為一個日益關注的焦點。好訊息是,網頁效能和可持續性之間存在很大的重疊:快速的網站**通常**是低碳網站!

最佳化我們的網站可以減少儲存和傳輸的資料量,以及使用者裝置消耗的電量。可持續地構建網站也有助於延長使用者裝置的使用壽命,減少升級和更換的需求。

利用工具評估效能和影響

WebPageTest和Google的PageSpeedInsights這樣的工具可以幫助我們衡量網頁效能並確定改進的優先順序。WebPageTest還有一個相對較新的Carbon Control功能,用於衡量我們網站的環境影響。Website Carbon是另一個用於瞭解網站環境影響的工具。

A screenshot of part of WebPageTest's home page showing the experimental Carbon Control feature with the text Introducing Carbon Control, New in WebPageTest - Measure your site's carbon footprint and run No-Code Experiments to find ways to improve

雖然工具無法衡量一切,但它們為理解我們網站的影響提供了一個良好的起點,併為改進提供了一些想法。

減小圖片尺寸

圖片是頁面重量的重要貢獻者,佔網絡資料傳輸量的近一半。我們可以透過使用更少、更小的圖片,以及最佳化和壓縮我們使用的圖片來減少這種影響。

使用srcset<picture>,我們可以為使用者的裝置提供最合適的圖片——為支援它們的裝置提供現代(更小)的圖片格式(如WebP),並確保低解析度裝置無需下載巨大、高解析度的圖片。

lazyload HTML屬性得到了很好的支援,它可以防止圖片在使用者滾動到需要它們的位置之前被下載。

最佳化字型

字型是另一個會顯著影響頁面重量的資源,因此非常適合最佳化。我們可以透過限制我們使用的網頁字型的數量來減輕這種負擔。如果某個特定字型的多種粗細和樣式是必需的,我們可以考慮使用可變字型

提供現代字型格式,如Web Open Font Format 2.0 (WOFF2),通常比舊的TrueType Font (TTF)檔案能減小負載。我們也可以考慮字型子集化——如果網站上只需要一種語言,則提供有限的字形集合。

自行託管字型可以節省網路請求,並讓你擁有更多控制權。

處理第三方嵌入

第三方程式碼,如聊天小部件、分析指令碼和社交媒體嵌入,通常是頁面重量和資料傳輸的最大問題。如果你無法完全避免這些,可以考慮使用按互動載入模式,即載入被推遲到使用者與小部件互動為止。

Paul Irish的Lite YouTube Embed提供了一種簡單的方法來延遲載入沉重的YouTube嵌入。

減少JavaScript使用

JavaScript比HTML和CSS更耗費資源,而大多數網站過度依賴它。仔細考慮你的專案是否真的需要JavaScript框架,並使用Bundlephobia等工具評估昂貴的依賴項。你或許可以使用原生API。

動態匯入可以幫助減少初始JavaScript包的大小,並防止使用者下載直到很久以後才需要的程式碼。

如需進一步見解,Jeremy Wagner的Responsible JavaScript是一本推薦的讀物。

通用最佳化技巧

壓縮、縮小和搖樹最佳化你的程式碼,以及壓縮圖片,都將有助於減少資料傳輸。此外,我們可以確保儘可能地快取。Harry Roberts提供了一份關於普通使用者的快取控制的優秀指南。

選擇綠色網路託管

確保我們的網路託管商使用可再生能源是減少我們網站碳排放的重要一步。不幸的是,要區分真正的綠色資質和“漂綠”以及營銷宣傳並不總是那麼容易。Green Web Foundation的託管目錄列出了提供其“綠色”資質證明的公司。

我的第三方是綠色的嗎?是一個檢查第三方依賴項碳影響的工具,包括它們是否為綠色託管。

透過碳感知計算最佳化能源使用

我們可以透過檢視在何處以及何時執行耗能過程來減少對化石燃料發電的依賴。

  • 利用電力來自可再生能源比例更高的地區的伺服器(空間轉移)。
  • 在電網負荷較低或間歇性太陽能或風能產生更多電力的時段執行程序(時間轉移)。

Green Software Foundation提供了關於此主題的一些精彩資源。

做出更綠色的設計選擇

從設計階段考慮可持續性,我們就能最好地最大限度地減少產品的環境影響。更綠色的設計可能涉及使用能源消耗較少的顏色。藍色比紅色或綠色消耗更多的能量,而在有機發光二極體(OLED)螢幕上,深色主題可以節省能源,因為黑色畫素是“關閉”的。

網站可以設計成最大限度地減少影片和大型圖片的使用,特別是透過避免自動播放影片或儘可能使用SVG而不是照片。

使用者旅程也扮演著重要角色:使用者在您的網站上點選花費了多少時間,因為找不到他們想要的東西而載入了比需要更多的資源?

利用您的權力和特權構建可持續的網路

我們不僅可以採取措施解決我們所構建產品的環境影響,還可以透過與更廣泛的網路社群分享我們的知識來產生更廣泛的影響。這可以包括在您的工作場所建立一個環境行動小組,在您自己的部落格上撰寫文章,發表演講,或在社交網路上分享技巧。

我們越能將網路可持續性的話題常態化,就能產生越大的影響。

與社群合作實現網路可持續性

儘管我們個人的努力很重要,但當我們作為一個更廣泛的社群合作時,才能產生最大的影響。

  • ClimateAction.tech是一個由科技工作者組成的社群,他們共同努力在公司、組織和行業中推動氣候行動。這是一個與志同道合的人交流並獲得行動啟發的絕佳場所。
  • 可持續網頁設計社群小組致力於制定一套構建可持續網站的指南。加入該小組,或透過GitHub貢獻。

總結

儘管這可能感覺像一場艱苦的鬥爭,但對於我們這些從事網路工作的人來說,有很多機會可以更可持續地構建並減少我們所構建產品的環境影響。第一步是認識到我們行為和選擇的影響,然後我們就可以開始探索我們可以採取哪些行動來減輕地球的負擔。每一份努力都很重要。

我希望您覺得本文分享的資訊和技巧很有價值。歡迎您在DiscordGitHub上留下您的反饋、想法或問題。

資源

除了這裡的技巧之外,還有許多其他資源可以指導您構建一個更可持續的網路。