什麼是可持續網頁設計，如何實現它？

可持續網頁設計的重要性

網絡技術可以潛在地造福社會和環境，但前提是我們明智地使用它……

隨著可持續發展變得越來越重要，許多企業正在尋找減少碳足蹟的方法。 在對運營進行改變後，下一步的技術影響似乎是合乎邏輯的

網絡對環境的影響已被廣泛宣傳，佔全球排放量的 3.7%。 因此，越來越多的設計師正在尋求使他們的網站可持續發展，以確保他們儘自己的一份力量來保護我們的環境。

如果互聯網是一個國家，那麼它將是第四大污染者。 可持續發展網絡宣言

得益於物聯網等技術進步，開發商可以以以前不可能的方式將可持續設計融入您的家庭或企業！ 網頁設計最新且增長最快的領域之一是可持續網頁設計，其重點是減少網站的碳足跡並提高其能源效率。

然而，儘管可持續網站設計已成為 2023 年的熱門話題，但人們仍然存在一些困惑。

在這篇文章中，我將解釋可持續網頁設計以及如何使您的網站更具環保意識。

讓我首先回答幾個常見問題。

什麼是可持續網站？

可持續網站的設計考慮到了人類、地球和利潤的未來。 它們使用可再生能源，並且消耗量最少。 此外，它們是道德的、增值的且非剝削性的。

為什麼網站應該可持續？

雖然媒體以及社交媒體上的用戶指責大型石油公司是氣候危機的關鍵因素，並指責政客沒有製定切合實際的氣候目標，這已成為一種常見的做法，但並沒有引起太多關注互聯網對環境的影響——儘管其快速增長。

技術是我們職業和個人生活的核心。 連接設備的數量正在增加，預計到 2025 年將達到 557 億。

數字技術造成 4% 的溫室氣體排放 (GHG)，其能源消耗每年增加 9%。

互聯網每年排放 16 億噸溫室氣體。 消除所有這些碳需要用成熟的森林覆蓋世界 1/3 的陸地表面！

這種趨勢就是我們需要環保網站的原因。

什麼是可持續網頁設計？

可持續網頁設計正在構建網站，以盡量減少對環境的影響、節約能源和有效利用資源。 換句話說，可持續網頁設計就是為地球創造良好的網站。

那麼，網站設計如何影響全球排放？

最近的一項研究表明，自 2013 年以來，每天看屏幕的時間增加了近 50 分鐘，美國人平均每天花 7 小時 4 分鐘看屏幕。

當我們上網時，有一個許多人沒有考慮的問題——我們的在線行為可能會如何影響我們周圍的環境。 網站設計通過兩種方式導致全球排放：使用電力或其他資源以及在運營過程中向大氣中排放有害氣體。 這就是可持續網頁設計的用武之地。

乍一看，答案似乎很模糊，但它涉及從字體大小到選擇在網站上發布的圖像的所有內容。 一切都會產生影響，這些小事會隨著時間的推移而累積起來，成為全球碳排放的重要貢獻者。

減少佔地面積的最簡單方法是在設計新站點或維護現有站點時最大限度地減少浪費。 我將在下面概述一些可以實現此目的的方法。

可持續網頁設計的好處

可持續的網頁設計有利於環境並有效提高轉化率。 綠色網站比那些不環保的網站轉換得更好。 可持續網頁設計的顯著優勢包括：

簡單直觀的用戶界面

綠色網站通常具有易於導航的直觀用戶界面。 用戶永遠不會對下一步需要去哪裡感到迷失或困惑。 通過整個網站乾淨、簡單的佈局和周到的信息放置，訪問者可以毫無問題地快速找到他們想要的內容。 企業在設計網站時必須將用戶的需求放在首位。

更快的速度性能

隨著越來越多的互聯網消費者繼續在線訪問內容，企業確保其網站具有移動響應能力變得越來越重要。 移動響應能力可確保網站在正確操作時在智能手機上加載速度更快，從而提高客戶滿意度。

此外，由於大多數移動設備依靠電池供電，因此公司必須確保其站點不會不必要地消耗這些設備的能量。

搜索引擎優化（SEO）

可持續的網頁設計對搜索引擎優化 (SEO) 友好，因為它們不需要更改額外的代碼即可在搜索引擎結果頁面上排名。 因此，擁有一個綠色站點可以讓您在競爭中佔據優勢。

在不同的屏幕尺寸上表現良好

綠色網站的與眾不同之處在於它能夠在不同的屏幕尺寸上表現良好。 無論訪問者使用什麼設備瀏覽，查看內容都不會成為問題。

可持續網頁設計的特點

以下示例展示了各種可持續的網頁設計技術和功能，您可以使用它們來創建美觀、有效的網站。

• 使用極簡主義：可持續網頁設計最關鍵的方面之一是極簡主義。 您可以使用更少的代碼、更少的圖像和更小的文件來創建加載速度更快、使用更少資源的網站。
• 優化圖像：圖像通常是網頁上最重的元素，因此針對網絡優化圖像至關重要。 壓縮它們可以確保它們佔用更少的空間並有效加載，而不會減慢頁面其餘部分的速度。
• 使用 CSS Sprites： CSS Sprites 是一種可持續的網頁設計技術，它將多個圖像組合到一個文件中。 因此，雖然它們需要更多的前期工作，但從長遠來看，它們可以節省帶寬，因為所有圖像數據都存儲在一個地方，而不是分佈在多個頁面上。
• 最大限度地減少 HTML、CSS 和 JavaScript 資源：每次加載網站時，它都必須獲取額外的服務器數據。 因此，減少這些項目將有助於加快您的網站加載速度。 例如，不要使用 Google Analytics 等外部腳本，而是使用 WordPress 中的內置分析工具。 無需導入包含數百個樣式表的整個庫，只需導入有效顯示內容所需的內容即可。
• 利用代碼可重用性：重要的是不要將網頁設計視為一次性過程。 在 PixoLabo，我們會跟踪我們創建的任何腳本或模板，並在可能的情況下重複使用它們。
• 消除冗余文件：網站通常有冗余文件。 例如，擁有index.html 和index.php 文件會浪費不必要的磁盤空間並減慢加載時間。 開發人員有效地消除了這些文件，從而確保減少磁盤空間並加快網頁加載速度。
• 負責任地使用富媒體：設計網站時，您需要關注內容，而不是功能。 如果添加太多功能，則會降低站點速度，因為每次加載時都必須處理更多代碼。
• 集成現成的解決方案：針對最常見的網站問題，存在許多現成的解決方案。 如果可以節省您的時間和精力，您應該在自己創建某些東西之前始終嘗試找到解決方案。 例如，WordPress 已經具有用於集成 Facebook、Twitter 和 LinkedIn 等社交媒體網絡的模塊，因此無需重新發​​明輪子！

了解您的數字足跡

組織的數字足跡隨著其製作內容、推出網站、共享營銷更新、舉辦虛擬研討會、升級雲帳戶以及設計更多應用程序以滿足不斷變化的業務需求而增長。 這是一個例子：

• 一封帶有照片附件的電子郵件可排放多達 50 克的二氧化碳當量。 （e =“當量”，包括二氧化碳以外的溫室氣體。）
• 雖然這看起來似乎很小，但請考慮一下您的組織每天發送多少封電子郵件。
• 現在，將其乘以世界上每個數字化組織。

這只是電子郵件。 很容易看出我們的年溫室氣體排放量是如何達到 16 億噸的。

許多組織不會定期審核其在線狀態，這導致數百萬個網站包含未讀的博客文章、損壞的鏈接、臃腫的圖像和過時的內容。 這些問題會讓用戶感到沮喪、浪費能源、浪費時間和金錢，影響組織的長期可持續性和利潤。

儘管許多組織評估其辦公空間、供應鍊或業務實踐對環境的影響，但他們很少審核其在線資產的碳足跡。 鑑於互聯網的發展速度，這種情況需要改變。

可持續網頁設計實踐

可持續網頁設計是環境保護原則和基於性能的網頁和可用性標準的混合體。 企業和組織可以應用於任何網站、應用程序或在線媒體的生命週期，以最大限度地提高效率、提高可用性並提高性能。

可持續的網頁設計還可以通過綠色託管、碳測量和減少、最大限度地減少電力使用等來減少數字產品和服務對環境的影響。

可持續網頁設計的實踐分為以下幾類：

1. Web 性能優化：資源下載到用戶設備的速度有多快？
2. 內容可查找性：用戶找到所需內容的速度有多快？ 一旦用戶發現該內容，它的適用性如何？
3. 可用性：所有用戶以不同的帶寬速度跨設備和平台完成任務的速度有多快？
4. 綠色虛擬主機：託管您的數字產品和服務的服務器是否由可再生能源供電？

最近，可持續網頁設計詞典中添加了兩個重要的內容：

1. 客戶和項目精神：您的數字項目正在推廣或銷售什麼？ 您如何透明且有效地執行它們？
2. 商業實踐：您的組織如何體現這些相同的原則？

如何使您的網站可持續發展

1 – 從規劃您的用戶旅程開始

如果您不熟悉這個概念，用戶旅程是指用戶在訪問您的網站時為實現特定目標（註冊、購買等）而採取的一系列操作。

出於顯而易見的原因，用戶更喜歡較短的用戶旅程，因為他們不會浪費時間。 不過，除了客戶體驗之外，他們還將訪問更少的頁面來查找他們需要的內容，從而減少訪問過程中的碳排放。

最好熟悉用戶旅程，然後在可以自由設計旅程地圖後調整您的網頁設計。

避免摩擦點的良好用戶體驗（UX）將不可避免地降低能耗並提高客戶滿意度。

2 – 選擇綠色環保的託管提供商

我知道這聽起來有點自私，因為我們最終是一個託管提供商，但現實是，如果您想減少碳足跡，那麼每天為您的網站提供支持的人將很重要。 不幸的是，數據中心消耗了互聯網能源的很大一部分。 我們必須迅速過渡​​到 100% 可再生能源。

選擇具有由可再生能源驅動的可持續託管的提供商是必須做的事情。 查看他們的整體環境政策並檢查您的託管提供商是否採取了額外的措施來彌補二氧化碳排放並參與了其他可持續發展實踐也是一個好主意。

3 – 選擇響應式設計

選擇響應式設計可能看起來不像是一種可持續的網頁設計實踐，但它確實是一種可持續的網頁設計實踐。 響應式設計是一種適應不同屏幕尺寸設備的網頁設計，這在當今多個設備和屏幕訪問互聯網的世界中至關重要。

選擇這種設計意味著您的網站將適應不同的格式，並且您可以減少在此過程中的資源消耗。

如果您注意確保您的網站對於連接速度間歇性或不可靠的移動用戶來說速度超快，這將會有所幫助。 由於大多數網站都在移動優先索引中，谷歌還將通過其移動爬蟲查看網站速度 - 因此優先考慮移動用戶是值得的。

4 – 讓信息易於查找

這與可持續網絡宣言的指導方針非常一致。 對於環保的網頁設計，您應該嘗試使信息易於查找。 可訪問性不僅對於綠色網站至關重要，而且對於更好的用戶體驗也至關重要。

這一切都取決於瀏覽網站的簡單程度。 簡單的導航減少了人們點擊您的網站、搜索必要信息的時間。 這樣做也將有助於為您的客戶提供完全的透明度。

5 – 緩存所有內容！

如果您像許多網站（WordPress、Magento、Drupal 等）一樣使用 PHP 驅動的應用程序，則緩存對於可持續性是必要的。

如果站點沒有緩存，就會使服務器工作更加困難。 每次有人訪問您網站上的頁面時，都必須通過處理 PHP 代碼、查詢數據庫並將其轉換為顯示您網站的 HTML 內容來動態加載頁面內容。

此過程會使用更多服務器的CPU、內存和磁盤，消耗能源。 服務器需要為每個訪問者和每個頁面執行此操作，因此訪問者和頁面越多，消耗的能量就越多。

有了緩存，大部分密集型工作負載僅在訪問者第一次請求頁面時完成。 然後，生成的 HTML 會存儲在緩存中，這樣每個後續頁面加載就不需要執行所有繁重的工作。

此外，您的頁面加載速度更快。 更快的頁面速度不僅對您和您的訪問者來說是雙贏，而且還意味著您的訪問者花在等待頁面加載上的時間更少，在此過程中消耗的能量更少。

緩存網站的方法有很多種； 在 PixoLabo，我們更喜歡使用 WP Rocket 進行頁面緩存。 超快的網站和更好的可持續性——有什麼理由不喜歡呢？

6 – 如果您正在編寫代碼，請確保它是乾淨的代碼

大多數用戶都會使用CMS，但如果您編寫一些代碼，請確保它易於理解和更改，並避免不必要的重複和操作。

7 – 避免不必要的插件和附加組件

此步驟與上述規則相關，但適用於使用 WordPress 等 CMS 的用戶。 有時我們可能會對插件市場提供的所有可能性過於興奮，從而使我們的網站淹沒在不必要的插件中。

面向營銷的插件或我們忘記的重複插件通常就是這種情況。 評估你擁有什麼，然後評估你需要什麼，然後再考慮其他事情。

8 – 避免或限制自定義字體

這一事實可能會讓人感到驚訝，但自定義字體會增加網站的文件大小。

您的自定義字體文件在包含單個粗細時可能很容易超過 200kb。 如果您使用不同的字重和字體，這將不可避免地增加，從而影響速度和能耗。

因此，只有當您認為自定義字體對您的品牌和實際用途至關重要時，您才應該使用它們。

9 – 明智地使用媒體文件（並優化它們！）

不言而喻，您必須優化網站上的所有圖像。 我們從與網站速度（和 SEO）相關的最佳實踐中知道這一點。 有時我們會看到客戶詢問為什麼他們的網站速度很慢，卻發現主頁上有4MB的圖片，因為他們上傳了超大的原圖！ 通過優化這些相同的圖像，可以在不降低質量的情況下提供服務。

Imagify for WordPress 包含自動圖像優化，因此您無需擔心自己執行此操作。 此外，它還可以將圖像轉換為 WebP 等現代文件格式，這些格式比 PNG 或 JPG 圖像小約 25%。

除了優化之外，我們還必須考慮它們的使用是否合理且有目的。

例如，一些產品照片可能是無用的（例如，非常相似的角度）。 在其他情況下，頁面上使用的圖像（例如隨機庫存圖像）可以輕鬆地替換為 SVG 圖形等替代品，或者通過 CSS 樣式實現相同的效果。

10 – 延遲加載首屏內容

您的每個網頁都可能包含大量“非首屏”內容，即除非訪問者向下滾動您的頁面，否則內容不可見。

如果其中包含大量圖像或視頻（其大小可能很大），則所有這些數據都必須通過互聯網傳輸，即使它們可能永遠不會被查看。

延遲加載意味著您僅在用戶向下滾動頁面時才請求此內容。 這些部分將在內容進入視圖之前出現，因此從訪問者的角度來看，就好像它始終存在一樣 - 沒有明顯的差異。

您不僅可以避免傳輸不必要的數據，還可以通過減輕網站的重量來提高 PageSpeed 分數。

有些應用程序具有內置的延遲加載，或者您可以使用插件。 對於 WordPress，LiteSpeed Cache 包括延遲加載功能，能夠加載圖像、視頻、嵌入內容中的任何內容，如果您的頁面超長，甚至可以加載整個 HTML 塊。

11 – 限制視頻和動畫的使用

您不需要讓您的網站看起來像Word頁面，也不需要像瘟疫一樣避免使用視頻和動畫，但就像圖像一樣，要節儉地使用它們。

動畫通常沒有戰術目的，因此盡可能少地使用它們。 對於視頻來說，很大程度上取決於它們的服務目的，因此，如果您認為它們對您的用戶有幫助，請使用它們； 確保它們盡可能優化。

12 – 縮小 HTML、CSS 和 Javascript

同樣，您可能已經這樣做是為了提高速度，但如果您沒有這樣做，讓我們快速回顧一下原因。

您的 HTML、CSS 和 Javascript 代碼通常包含其他數據，例如空格、換行符或註釋。 這些空格或註釋僅有助於開發人員輕鬆閱讀和理解代碼，但對瀏覽器解釋代碼的方式沒有影響。

縮小代碼可以消除所有不必要的重量，減少需要通過互聯網傳輸的文件的大小，並使您的網站加載速度更快。

WP Rocket 可以為 WordPress 處理這方面的問題，但大多數其他應用程序也可以通過插件提供類似的功能。

13 – 刪除不必要的 CSS 和 Javascript

雖然縮小會刪除不必要的數據，但它不會分析您的網站是否使用任何該代碼。

您可能使用過具有許多不同佈局、樣式或功能的主題或頁面構建器，但您從未在網站上的任何地方使用過這些主題或頁面構建器。

所有代碼都將保留在您的 CSS 和 JS 文件中，從而增加了必須通過互聯網傳輸的數據量，並無緣無故地使您的網站加載速度變慢。

手動刪除哪些代碼可能很困難，但對於 WordPress，WP Rocket 允許您自動刪除未使用的 CSS。 此過程會去除未使用的 CSS 並為每個頁面生成唯一的 CSS 文件。 如果您只有幾個頁面，則刪除未使用的 CSS 可能是值得的，但如果您的網站有很多頁面，則使用單個 CSS 文件可能會更有效。

Javascript 的剝離可能會更複雜，儘管 WP Rocket 至少可以延遲它的加載，直到檢測到用戶活動。 延遲 Javascript 可能是合適的，只要首屏內容不需要它。

最終，最好的建議是盡可能避免使用頁面構建器或臃腫的插件，並使用您知道需要的干淨代碼。

14 – 針對不同設備優化您的網站

在多種屏幕尺寸、瀏覽器、設備和帶寬速度上測試您的網站可能非常耗時，但適合移動設備的網頁設計至關重要。 內容和設計的不正確顯示將導致糟糕的用戶體驗和用戶混亂。

他們會花更多的時間去尋找他們想要的東西，消耗更多的精力。

為了避免這種情況，請確保您的設計能夠很好地適應盡可能多的這些變量，以便為用戶提供最佳體驗。

15 – 使用 CDN 來提供您的內容

那麼什麼是CDN？ 內容分發網絡 (CDN) 是位於不同地理位置的服務器網絡。 他們將通過從靠近用戶的位置提供服務來幫助您更快地加載內容。 換句話說，這與速度和用戶體驗有關。

但更重要的是，從可持續發展的角度來看，這有助於減少二氧化碳排放，因為將數據傳輸到世界不同地區需要大量能源。 數據傳輸的距離越遠，需要的能量就越多。

值得一提的是，如果您以某種方式跳過此步驟，通過 CDN 提供的圖像通常會更小。 許多 CDN 將為您提供圖像優化工具，包括減小圖像大小、像素密度、格式和壓縮。

選擇使用可再生能源的 CDN（例如 Cloudflare）至關重要。

16 – 審核您的內容以確保其實現戰略

如果您有一個大型網站，定期審核其內容至關重要。 某些頁面將不可避免地變得過時或不再發揮其作用。 對於知識庫、產品頁面、博客文章等尤其如此。

您可以手動檢查它們，也可以使用 Google Analytics 來評估哪些頁面可能已過時或表現不佳。 然後，您可以決定是用有用的新鮮內容更新它們，還是刪除它們。

17 – 通過抵消碳足跡來減少二氧化碳排放

參與植樹和抵消碳的項目是提高網頁設計和整體業務可持續性的絕佳方式。 樹木是減少二氧化碳排放的絕對贏家，因為它們吸收二氧化碳並將其轉化為氧氣。

我們在 Treebuddy Earth 的朋友可以提供幫助。

讓您的網站氣候友好

採用可持續的網頁設計是利用您的企業作為正義力量的完美方式。 對於什麼是生態意識網站存在很多困惑。 可持續網頁設計正在設計優先考慮地球和人類的網絡服務。

可持續發展的網站必須能夠盈利、保護地球並為人們創造長期價值。 網站碳計算器等工具可提供網站溫室氣體排放量的粗略估計。

要實現網站碳中和，您可以將其託管在綠色能源上。 我們建議供應商表明他們是從值得信賴的綠色能源供應商那裡購買的，並且可以訴諸基於 REC 的綠色能源。

您還可以通過文件大小、速度和可用性改進來降低其功耗。 最有前途的是關注搜索意圖、視頻、圖像和插件/腳本優化。

最後，您可以通過碳抵消項目補償溫室氣體排放。 創建一個可持續的網站既不是精準落地，也不是公關活動。 大膽地過度補償你的碳足跡，但在溝通中保持謙虛和自我意識。

可持續網頁設計對環境、社會和經濟產生積極影響。 您可以結合一系列體現可持續網頁設計原則的實踐。 然而，最重要的一點必須是減少資源使用。

您需要建立一個可持續的網站嗎？

您需要建立一個氣候友好型網站或在線商店嗎？ 我們的專業設計師團隊將很樂意為您提供幫助。 但首先，請查看我們的投資組合併閱讀我們的案例研究。

然後，如果您認為我們非常適合您的可持續網頁設計需求，請讓我們談談！ 我們為企業和產品品牌提供全方位的諮詢和設計解決方案。

如果您仍然不確定如何建立一個可持續的網站，讓我們談談。 我們將傾聽您的聲音，回答您的問題，並確定如何為您的企業或產品品牌建立一個綠色網站！

您會添加什麼？

您對可持續網站和網頁設計的未來有何看法？ 我們最終會看到可持續性問題成為新網絡框架的核心並包含在最佳實踐中嗎？ 還可以做些什麼來使網站更環保、更高效？

格雷戈爾·賽塔

聯合創始人/CXO

@gregorsaita