> 什么是可持續(xù)網(wǎng)頁設(shè)計？

> 可持續(xù)網(wǎng)站有什么好處？

> 你如何創(chuàng)建一個可持續(xù)的網(wǎng)站？

1）優(yōu)化視覺內(nèi)容和延遲加載

2) CSS 精靈

3) 減少電子郵件

4) 優(yōu)化設(shè)計工作流程

5) 移動優(yōu)先設(shè)計

6) 縮小 HTML 和 CSS 資源

7) 托管

8）明智地選擇字體

9) 層次結(jié)構(gòu)、導(dǎo)航和鏈接

10) 使用更少的網(wǎng)頁

隨著組織尋找每一個減少排放和最小化碳足跡的機(jī)會，可持續(xù)網(wǎng)頁設(shè)計是一項不斷發(fā)展的運(yùn)動。如果您遵循響應(yīng)式網(wǎng)頁設(shè)計和移動優(yōu)先實(shí)踐，那么您已經(jīng)在使用更環(huán)保的數(shù)字產(chǎn)品減少對環(huán)境的影響。

根據(jù)BBC 的一篇文章，為什么你的上網(wǎng)習(xí)慣沒有你想象的那么干凈，互聯(lián)網(wǎng)占“全球溫室氣體排放量的 3.7%”。– 包括設(shè)備、網(wǎng)站、應(yīng)用程序、數(shù)據(jù)中心和所有支持基礎(chǔ)設(shè)施。

本文著眼于設(shè)計師、工程師和企業(yè)如何通過為客戶制作環(huán)保數(shù)字產(chǎn)品和網(wǎng)站來減少排放。

什么是可持續(xù)網(wǎng)頁設(shè)計？

可持續(xù)網(wǎng)頁設(shè)計是優(yōu)化數(shù)字產(chǎn)品和網(wǎng)站以減少帶寬和功耗的過程。組織必須使用幾個關(guān)鍵的減排策略，包括：

> 設(shè)計

> Web開發(fā)

> 內(nèi)容與營銷

> 托管

> 項目管理

> 商業(yè)運(yùn)作

如您所見，可持續(xù)網(wǎng)頁設(shè)計超越了設(shè)計和開發(fā)，以進(jìn)行整體影響評估，以減少溫室氣體排放。

可持續(xù)網(wǎng)站有什么好處？

設(shè)計一個可持續(xù)的網(wǎng)站或數(shù)字產(chǎn)品不僅有利于氣候變化；它還可以創(chuàng)造商業(yè)價值并降低成本。最顯著的節(jié)省之一是托管。

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

網(wǎng)站性能也與轉(zhuǎn)化率增加相關(guān)，頁面速度是谷歌排名因素之一。

因此，優(yōu)化網(wǎng)站和應(yīng)用程序性能的企業(yè)可以從成本節(jié)約和更高的收入中受益，從而形成更可持續(xù)的商業(yè)模式。

你如何創(chuàng)建一個可持續(xù)的網(wǎng)站？

這里有 10 個可持續(xù)的網(wǎng)頁設(shè)計技巧，它們可以提高性能、節(jié)省資金、增加用戶體驗(yàn)并減少網(wǎng)站對環(huán)境的影響。

1）優(yōu)化視覺內(nèi)容和延遲加載

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

對于視頻內(nèi)容，設(shè)計師應(yīng)該使用WebM而不是 MP4 和 GIF。WebM 更小并且針對網(wǎng)絡(luò)進(jìn)行了優(yōu)化。

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

2) CSS 精靈

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

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

3) 減少電子郵件

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

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

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

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

4) 優(yōu)化設(shè)計工作流程

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

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

5) 移動優(yōu)先設(shè)計

適合移動設(shè)備的網(wǎng)站必須更輕，才能在智能手機(jī)上更快地加載。因此，采用移動優(yōu)先的設(shè)計策略意味著設(shè)計師在保護(hù)環(huán)境的同時為用戶創(chuàng)造價值。

6) 縮小 HTML 和 CSS 資源

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

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

7) 托管

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

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

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

8）明智地選擇字體

眾所周知，字體會降低頁面速度，尤其是自定義的自托管字體?？紤]使用與所有瀏覽器兼容的 18 種網(wǎng)絡(luò)安全字體之一來設(shè)計您的網(wǎng)站——這意味著瀏覽器不需要下載其他文件。

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

開發(fā)人員還可以使用其他技巧來自定義字體，例如預(yù)加載和 CSS 優(yōu)化。

9) 層次結(jié)構(gòu)、導(dǎo)航和鏈接

層次結(jié)構(gòu)和導(dǎo)航在幫助用戶快速查找內(nèi)容和完成任務(wù)方面發(fā)揮著至關(guān)重要的作用。設(shè)計人員應(yīng)優(yōu)先考慮頁眉中的基本導(dǎo)航（最多 4-5 個）和頁腳中的輔助鏈接。

層次結(jié)構(gòu)幫助用戶更快地識別重要內(nèi)容并完成任務(wù)。視覺層次也是用戶體驗(yàn)和網(wǎng)站可訪問性的關(guān)鍵因素。

團(tuán)隊?wèi)?yīng)定期對損壞的內(nèi)部和外部鏈接進(jìn)行網(wǎng)站審核，以確保用戶永遠(yuǎn)不會因?yàn)樗缆?404 錯誤而浪費(fèi)服務(wù)器請求。對內(nèi)部鏈接使用 301 重定向，并為損壞的外部鏈接尋找新資源。

10) 使用更少的網(wǎng)頁

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

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

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