原文由 Tom 在2019年10月23日發布與 Wholegrain Digital 原文鏈接：17 ways to make your website more energy efficient
關於網站的碳足跡，在過去的幾年中我們已經討論了很多。 互聯網的碳影響主要是由用電引起的。 現在的問題是：
作為網絡專家，我們可以讓互聯網更節能一些嗎？
本文旨在回答這個問題，提供一些方便的清單，通過這些方法您可以最大程度地減少能源浪費，並幫您確保您所創建的互聯網產品盡量節能。
而且，這裡列出的幾乎所有內容不僅可以幫助提高網站的能效，還可以改善網站的性能和用戶體驗！
網站能耗的一些背景
如果您不熟悉此主題，那麼簡短的說就是——互聯網，包括數據中心、電信網絡和終端用戶設備（如電話和筆記本電腦）會消耗大量電能。 實際上，如果將它們消耗的電量全部加在一起，互聯網所消耗的電量與英國（世界上最大的經濟體之一）消耗的電量大致相同。
數據中心 <---> 電信網絡 <---> 終端用戶設備
隨著我們在日常生活中不斷消耗越來越多的互聯網數據，互聯網消耗的電量也迅速增長。 它可能不容易被我們看到或想到，但互聯網的這種巨大功耗卻實實在在地產生了巨大的碳足跡，而這是我們需要解決的問題。
對於我們從事網頁設計和開發的人們來說，下面這些是我們可以做到的：
設計與內容
當我們談論網站的能源效率時，很容易就認為這只是一個純技術性話題。不是的，我們甚至可以在建立網站之前就提高能源效率。設計和內容對能效有很大的影響，以下是需要考慮的關鍵領域。
1. SEO（搜索引擎優化）
SEO似乎與網站效率沒有任何關係，但實際上，SEO的目標與降低能耗的目標在本質上是一致的。在針對搜索引擎排名優化網站時，我們正在幫助人們快速，輕鬆地找到他們想要的信息。如果搜索引擎優化的好，人們可以減少在網絡上查找信息和瀏覽不滿足其需求的頁面的時間。這意味著消耗的能量更少，用戶消耗的能量用到了實處。
2. 文案撰寫
與搜索引擎優化類似，文案撰寫會影響網站效率，因為它會影響人們花在瀏覽網站上的時間。 有時，我們希望人們在網站上花費大量時間，使自己沉浸在我們的內容中。我們不希望人們把時間浪費在只有很少價值或根本沒有價值的內容上。因此，清晰有效的文案寫作可以幫助減少用戶在互聯網上的浪費時間，進而減少浪費的能源。
3. 用戶體驗（UX）
良好的用戶體驗的核心要素之一是減少用戶使用過程中的摩擦。我們希望人們能夠找到想要的東西，並以儘可能簡化的方式來操作。良好的用戶體驗使每個人都可以更輕鬆而愉快地使用網絡，這再次減少了浪費精力導航到不正確的頁面上，或是盯著網頁推測下一步該點哪裡。
4. 減少或縮小圖像
在大多數網站上，圖像是頁面文件大小的最大貢獻者。您使用的圖像越多，這些圖像文件越大，則需要傳輸的數據就越多，所消耗的能量也就越多。無論技術上如何優化，設計人員和內容創建者都應仔細考慮其圖像使用方式。
- 圖像是否真的為用戶增加了價值？
- 它傳達有用的信息嗎？
- 如果圖像較小，是否可以達到相同的效果？
- 我們能否減少用戶看不見的圖像，例如輪播中的圖像？
- 我們可以使用矢量圖形（甚至 CSS 樣式）代替照片來達到相同的效果嗎？
在不影響用戶體驗的情況下思考這些問題並將圖像保持在最低限度將有助於降低能耗。
5. 減少視頻
儘管視頻的使用頻率低於圖像，但視頻作為網上的一種內容格式正變得越來越流行，並且它是迄今為止數據強度和處理強度最高的內容形式。與圖像一樣，問下自己是否真的需要視頻。如果是這樣，請查看是否可以通過禁用視頻自動播放並保持視頻內容簡短來減少視頻產生的網絡流量量。就頁面大小而言，具有視頻播放功能的網站可能比沒有視頻的網站大一個甚至兩個數量級，並給用戶的CPU帶來更高的負載，從而導致能源消耗大大增加。
6. 仔細選擇字體
網絡字體可以增強網站的視覺吸引力，但也大大增加了使用它們的網站文件大小。單個字體文件可能多達250kb，這還只是標準粗細。如果要加粗，需要再多250kb！
為了幫助減少自定義網絡字體的影響，設計人員應考慮以下選項：
- 盡可能使用系統字體。它們並不總是那麼漂亮，但是可以使用諸如 Arial 和 Times New Roman 這樣的字體，而根本不加載任何字體文件，因為它們已經在用戶設備上了。
- 使用較少的字體變化。您可能會覺得確實有必要使用自定義網絡字體，但是在選擇的字體數量和每種字體使用的不同粗細數量方面要節儉。
開發
開發人員對他們創建和維護的網站的能源效率有很大的影響。儘管設計師和內容編輯做出的某些決定不在開發人員手中，但是在某些領域中，開發人員可以完全控制，在這些領域中，他們可以優化所提供的內容和設計。
7. 編寫整潔的代碼
整潔，精簡的代碼本來說是一件好事。保持代碼簡潔明了，避免重複代碼並編寫高效的查詢語句。幕後的代碼看上去應該像是一台保養良好的精緻機器。
請記住，這不僅適用於您編寫的代碼，而且還適用於您借來的代碼。如果您使用的是現有的框架和庫，請確保它們也得到了完善和調試，以有效地提供所需的功能，並且您沒有在用高射炮打蚊子。如果您使用的是 WordPress 之類的內容管理系統，請避免使用不必要的插件。這些插件會增加負擔，請盡量選擇服務器負載較小並且不會在前端增加不必要的文件大小的插件。我們的格蘭諾拉入門主題旨在幫助您做到這一點。
8. 減少使用 JavaScript
JavaScript 通過兩種方式影響網站效率：通過增加文件大小到網頁上以及增加用戶設備所需的處理量。其中的第二點比其他類型的文件更明顯。
由 JavaScript 驅動的功能在用戶的電腦或手機上處理，並增加了CPU使用率，從而增加了設備的能耗。聽到筆記本電腦上的那些呼呼響的散熱風扇聲了嗎？那正是能源被浪費掉的聲音。
尋找使用更有效的技術（例如 CSS ）來實現前端交互、功能和動畫，或者至少有效地使用 JavaScript 。此處應特別提及跟踪和廣告腳本，這些腳本很少為用戶提供價值，但卻會增加文件的大小，導致大量的CPU運算，降低網站速度並可能侵犯用戶隱私。 Webtest.app 是一個衡量廣告腳本的性能、數據和能源消耗影響的出色工具。
Safari 中新的網絡檢查器提供了一個有用的工具，可幫助評估網頁對最終用戶設備的能源消耗影響，蘋果 Webkit 開發者的這篇文章 提供了一些詳細的使用建議。
9. 優化圖像
如上所述，圖像是大多數網頁上傳輸數據量最大的貢獻者之一。除了設計者和內容作者能對圖像使用做出決定外，還有一些技術決定會嚴重影響頁面上顯示的圖像文件大小。這些包括：
- 以正確的比例加載圖像，而不是依靠CSS來調整它們的大小，從而避免加載比其顯示比例大的圖像。
- 使用 TinyPNG 或 ShortPixel 之類的工具壓縮圖像文件而不會造成質量損失。我們在這裡記錄了我們最喜歡的圖像壓縮工具。
- 對每個圖像使用最有效的文件格式，例如 WebP 而不是 JPEG 。
遵循這些步驟後，可以顯著減小圖像文件的大小，從而減少能耗並縮短加載時間，而不會給網站訪問者帶來不利影響。
10. 優化字體
有一些技術方法可用於減少網站上的字體大小，即使使用自定義字體，它也可以使文件大小減少97％之多。嘗試以下方法以減小字體文件的大小：
- 堅持使用 WOFF 和 WOFF2 之類的現代網絡字體文件格式，與 TTF、OFT 和 SVG 文件格式相比，它們使用更高的壓縮方法。
- 子集字體僅包含網站上所需的字符。
有關優化網絡字體的性能和大小的更多信息，請參閱 Josh 的這篇文章。
11. 使用加速移動頁面（AMP）
加速移動頁面旨在通過去除不必要的代碼和文件大小來簡化移動設備上的內容加載，並提供原始網頁的簡潔版本。從理論上講，如果網站效率高，諸如加速移動頁面之類的技術實際上並不會有多大幫助。但是在原始網頁不夠理想的情況下，加速移動頁面可以成為一種有用的工具。它可以快速地生成出提供面向移動用戶的更輕便，更節能的版本。
還應注意，谷歌尤其優先考慮移動搜索結果中與新聞相關主題的加速移動頁面內容，因此它可以幫助提高網站內容的曝光量。缺點是您的內容可能會在谷歌產品上提供，而加速移動頁面刪除的某些內容可能是您認為重要的內容。這是一個功能強大的工具，但要謹慎使用。
12. 建立靜態網頁
內容管理系統支持的網站對網站數據庫進行查詢並動態生成頁面。簡單來說，這意味著網絡服務器必須進行處理，考慮每次有人嘗試加載頁面時要向用戶發送哪些信息，這將導致服務器消耗更多的能量。一種解決方案（下面列出來）是使用服務器緩存技術，但是在某些情況下，可能完全不用數據庫就可以簡單地對靜態網頁進行服務器處理。
這可以通過將網頁直接編寫為 HTML、CSS 和 JS 等靜態文件，或者使用靜態網站生成器或專業的靜態網站託管服務商將由內容管理系統生成的網站轉換為靜態文件來實現。
13.使用漸進式網絡應用技術（PWA）
漸進式網絡應用技術使網站能夠利用通常只有本地應用程序中才能看到的功能。就像克里斯最近寫道，漸進式網絡應用技術的核心功能之一是能夠在用戶設備上緩存文件，這意味著在重複訪問時無需重新加載內容和資料。這可以顯著減少重複訪問者加載的數據量，尤其是在移動設備上，其數據傳輸比有線連接的能耗更高。想其他那些方法一樣，它也可以幫助縮短加載時間和用戶體驗，而沒有任何實際缺點。
網絡主機託管
數據中心中的網站以及與數據中心之間的數據傳輸都消耗大量能量。因此，精心選擇網絡託管服務可能會對能源效率和網頁速度產生重大影響。以下是要考慮的要點。
14. 使用服務器緩存
對於使用內容管理系統的網站（例如 WordPress 或 Drupal ），每次有人訪問網頁時都會動態生成頁面。這是非常低效的，因為它需要針對每個單個頁面進行服務器處理，從而增加了網絡服務器的能耗。
諸如 Varnish 之類的緩存技術可以預先生成每個頁面的靜態版本，從而為大多數訪問者顯著地減少服務器開銷，不僅降低了服務器的能耗還對大大優化了頁面加載時間。
雖然設置起來可能很複雜，但是許多主機（例如 Kinsta 和 WP Engine ）現在都提供此選項作為現成的功能，這意味著您只需付出很少的精力就可以提高網站的能效和網絡性能。
15. 選擇具有較高電源使用效率（PUE）等級的主機
PUE 也就是「電源使用效率」是通常被用來對數據中心進行能源效率評估的指標。通過將進入數據中心的能量除以用於運行其中的計算機的能量來確定電源使用效率。然後，這突出顯示了在非計算活動（例如冷卻）上浪費的能量數量。數據中心的典型電源使用效率約為1.67，這意味著進入數據中心的每1.67瓦電中，只有1瓦電用於為計算系統供電。由谷歌運營的高效數據中心的電源使用效率可以高達1.11。
16. 使用靠近用戶的數據中心
互聯網使用的大量能量用於通過電信網絡傳輸數據。毋庸置疑，信息傳播的越遠，其旅行所消耗的能量就越多。因此，選擇靠近目標受眾的數據中心將有助於減少能耗。例如，您可能會從美國的託管公司那裡找到便宜的網絡託管套餐，但是如果目標訪問者在英國或德國，則將浪費能源在整個大西洋上傳輸數據。而且，這種額外的距離也可能導致頁面加載時間的延遲，因此將您的網站放置在靠近主要受眾的數據中心內將對用戶體驗和地球都有好處。
17.使用 CDN（內容分發網絡）
將數據中心放置在與主要受眾群體接近的地方非常好，但是如果您的受眾分佈在世界各地，那就沒那麼容易了。內容分發網絡（ CDN ）為此提供了一個很好的解決方案，可以為來自全球數據中心網絡的資料（例如圖像文件）提供服務。這意味著在大多數情況下，將從用戶自己區域中的 CDN 位置加載最大的文件，從而減少了每次加載頁面時數據傳輸的距離。於是，能源效率得以提高，頁面加載時間得以縮短。
總結
至關重要的是，我們減少了網絡行業內的能源浪費。我們很難甚至不可能準確地測算網站的能源消耗（儘管有諸如 Website Carbon 和 Safari 網絡檢查器之類的工具提供幫助），但是我們可以做很多事情來消除浪費並提高效率。這些操作大多數都不是不可能完成的任務，它們只需要在設計，內容創建，開發和託管的各個方面都注重細節並仔細思考。
而且，我們這些有助於提高網站能效的方法，同時也帶來了多方面的好處，無論是更好的 SEO ，更好的網絡性能還是更好的用戶體驗。一個高效的網站從根本上說是一個更好的網站。
如果您有減少網站能耗的技巧，請聯繫並告知我們！
另外，如果您有興趣創建更綠色的網絡空間，請閱讀並簽署《可持續網絡宣言》。
彩蛋小撇步！
自從發布此文以來，我們還就如何減少網站的能耗提出了一些其他建議。
18. 阻止爬蟲
BlogVault 的 Akshat Choudhary 建議，阻止網絡爬蟲可以降低能耗。他說：「網絡爬蟲通常會佔用處理和帶寬等資源的50％。」
19. 深色模式
Hazel Ho 建議減少空白空間並採用深色模式。深色的網站是許多年前在網站上普及的節能技術之一，並且隨著液晶屏幕的出現而逐漸消失，液晶屏幕不同於 CRT 屏幕具有永久背光，無論屏幕上實際可見的顏色如何，都使用相同的能量。但是，隨著 OLED 屏幕分別點亮每個像素的出現，使用較暗的顏色再次成為減少終端用戶設備能耗的可行技術。
20. 使用最新的 PHP 版本
這是來自 Kinsta 的 Katalin Juhasz 提出的建議，我們還應該考慮服務器上運行的技術，以確保我們使用最有效的版本。她特別提到，較新版本的 PHP 不僅速度更快，而且使用的服務器資源更少，因此能耗也更少。 Kinsta 撰寫了有關更新 PHP 版本的好處以及對性能的影響的文章。毫無疑問，這也將適用於其他非 PHP 的方案。
如果我們不能保護地球，我們就也不能保護我們自己。環保不是送給瀕危野生動物的禮物，而是在實實在在地保護我們自己。少點一次外賣，不要浪費食物，循環利用塑料袋，使用公交卡而非二維碼搭乘公共交通，減少網上衝浪的時間用來思考，這些都是有用的。