> 什么是可持續網頁設計？

> 可持續網站有什么好處？

> 你如何創建一個可持續的網站？

1）優化視覺內容和延遲加載

2) CSS 精靈

3) 減少電子郵件

4) 優化設計工作流程

5) 移動優先設計

6) 縮小 HTML 和 CSS 資源

7) 托管

8）明智地選擇字體

9) 層次結構、導航和鏈接

10) 使用更少的網頁

隨著組織尋找每一個減少排放和最小化碳足跡的機會，可持續網頁設計是一項不斷發展的運動。如果您遵循響應式網頁設計和移動優先實踐，那么您已經在使用更環保的數字產品減少對環境的影響。

根據BBC 的一篇文章，為什么你的上網習慣沒有你想象的那么干凈，互聯網占“全球溫室氣體排放量的 3.7%”。– 包括設備、網站、應用程序、數據中心和所有支持基礎設施。

本文著眼于設計師、工程師和企業如何通過為客戶制作環保數字產品和網站來減少排放。

什么是可持續網頁設計？

可持續網頁設計是優化數字產品和網站以減少帶寬和功耗的過程。組織必須使用幾個關鍵的減排策略，包括：

> 設計

> Web開發

> 內容與營銷

> 托管

> 項目管理

> 商業運作

如您所見，可持續網頁設計超越了設計和開發，以進行整體影響評估，以減少溫室氣體排放。

可持續網站有什么好處？

設計一個可持續的網站或數字產品不僅有利于氣候變化；它還可以創造商業價值并降低成本。最顯著的節省之一是托管。

大多數托管計劃向您收取服務器空間量以及每月用戶數或帶寬的費用。減小網站的大小可以節省服務器空間，同時降低帶寬和請求。自托管的公司需要更小的數據中心并節省能源費用。

網站性能也與轉化率增加相關，頁面速度是谷歌排名因素之一。

因此，優化網站和應用程序性能的企業可以從成本節約和更高的收入中受益，從而形成更可持續的商業模式。

你如何創建一個可持續的網站？

這里有 10 個可持續的網頁設計技巧，它們可以提高性能、節省資金、增加用戶體驗并減少網站對環境的影響。

1）優化視覺內容和延遲加載

根據HTTP Archive的說法，“圖像是網絡上最流行的資源類型”，占平均網頁大小的 50%。WebP 代替 JPEG 或 PNG 可以將文件大小減少 25-35%，同時提高頁面速度性能。將圖標和徽標切換為 SVG 格式也可以顯著減少頁面重量。

對于視頻內容，設計師應該使用WebM而不是 MP4 和 GIF。WebM 更小并且針對網絡進行了優化。

延遲加載是設計師優化圖像和視頻內容的另一種方式。瀏覽器不會同時加載所有這些資源，而是僅加載首屏內容，然后在用戶滾動時獲取其他圖像和縮略圖。

2) CSS 精靈

CSS sprites是一種古老的視頻游戲技巧，僅通過一個 HTTP 請求即可加載多個圖像。您無需單獨上傳每個文件，而是垂直堆疊圖像并將它們與每個文件之間的裝訂線組合在一起。

開發人員使用 CSS 設置位置和尺寸，隱藏堆棧的其余部分，使其看起來像單頁圖像。CSS Tricks 有一篇關于如何使用 CSS sprites的信息豐富的文章，包括用于自動化流程的包管理器。

3) 減少電子郵件

根據BBC 的一篇文章，“如果英國每個成年人少發一封‘謝謝’電子郵件，每年可以減少 16,433 噸碳排放——相當于減少 3,334 輛柴油車上路。”

組織應審核信件并消除浪費的電子郵件。例如，客戶完成銷售后會收到多少封電子郵件？你能把這些合二為一嗎？

根據營銷大師尼爾帕特爾的說法，營銷人員應該定期清除電子郵件列表。如果您向不活躍的帳戶或不打開或不參與您的內容的客戶發送電子郵件，那么您就是在浪費金錢并增加不必要的碳排放。

另外，請考慮是否有必要在您的電子郵件中包含圖片。普通的文本電子郵件是 4 克二氧化碳，而帶有照片的電子郵件是 50 克二氧化碳。

4) 優化設計工作流程

優化設計工作流程可以減少返工、錯誤和可用性問題。這些問題通常會對影響 UX 以外的部門的資源造成壓力。

DesignOps可以幫助組織優化 UX 工作流程并提高設計效率。構建設計系統還可以幫助減少錯誤并縮短上市時間，同時通過加載更快的更簡潔的用戶界面改善用戶體驗。

5) 移動優先設計

適合移動設備的網站必須更輕，才能在智能手機上更快地加載。因此，采用移動優先的設計策略意味著設計師在保護環境的同時為用戶創造價值。

6) 縮小 HTML 和 CSS 資源

縮小代碼會刪除不必要的空白，減小文件大小并提高頁面速度。開發者還可以組合資源文件，讓瀏覽器的請求更少。

有大量免費工具可用于縮小 HTML 和 CSS，包括用于代碼編輯器和包管理器的插件。縮小 Javascript 稍微復雜一些，因此請讓合格的開發人員來處理。

7) 托管

根據美國能源效率和可再生能源辦公室的數據，數據中心占美國用電量的 2%。因此，切換到綠色網絡主機提供商可以幫助減少能源消耗。

綠色網絡基金會擁有 26 個國家/地區的 342 家綠色托管服務提供商的托管目錄（截至 2021 年 12 月的數據正確）。綠色房東使用風能、太陽能和水力等可再生能源。在某些情況下，托管服務提供商會產生比他們需要的更多的綠色電力，并將其反饋到電網中。

您會很高興地知道，包括 AWS、A2 Hosting、Firebase Hosting 和 Siteground 在內的許多知名企業都被列為美國的綠色托管服務提供商。

8）明智地選擇字體

眾所周知，字體會降低頁面速度，尤其是自定義的自托管字體。考慮使用與所有瀏覽器兼容的 18 種網絡安全字體之一來設計您的網站——這意味著瀏覽器不需要下載其他文件。

如果您使用的是自定義字體，請確保它是 WOFF 或 WOFF2 格式，以便瀏覽器可以讀取和下載它。您還需要在字體堆棧中包含網絡安全字體，否則如果瀏覽器無法處理 WOFF 文件，它將加載 New Times Roman。

開發人員還可以使用其他技巧來自定義字體，例如預加載和 CSS 優化。

9) 層次結構、導航和鏈接

層次結構和導航在幫助用戶快速查找內容和完成任務方面發揮著至關重要的作用。設計人員應優先考慮頁眉中的基本導航（最多 4-5 個）和頁腳中的輔助鏈接。

層次結構幫助用戶更快地識別重要內容并完成任務。視覺層次也是用戶體驗和網站可訪問性的關鍵因素。

團隊應定期對損壞的內部和外部鏈接進行網站審核，以確保用戶永遠不會因為死路 404 錯誤而浪費服務器請求。對內部鏈接使用 301 重定向，并為損壞的外部鏈接尋找新資源。

10) 使用更少的網頁

每次新的頁面訪問都需要瀏覽器向服務器發送請求，服務器返回頁面的內容和資源。您擁有的頁面訪問次數越多，服務器為提供內容而必須做的工作（和能源消耗）就越多。

設計師應該評估每個項目以確定如何減少或合并頁面。對于大多數投資組合、登錄頁面、公司網站、本地企業、SaaS 和應用程序來說，單頁設計通常就足夠了，僅舉幾例。

單頁設計有利于環境，并為移動設備上的訪問者提供更好的用戶體驗，他們只需滾動即可找到所需的內容。