提高網站性能如何幫助拯救地球

您可能不會經常想到它，但互聯網使用了大量的電力。 這種電力需要在某個地方生產。 在大多數國家，這意味著燃燒化石燃料。 這反過來又意味著互聯網的碳足跡已經增長到可能使全球航空旅行黯然失色的地步，這使得互聯網成為地球上最大的燃煤機器。

Mozilla 2018 年互聯網健康報告指出——尤其是隨著互聯網擴展到新的領域——“可持續性應該是一個更大的優先事項。” 但就目前而言，網站變得越來越肥胖，這意味著互聯網的能源需求繼續呈指數級增長。

與此同時，氣候變化的影響每年都在變得越來越嚴重，越來越多。 絕大多數氣候科學家將世界各地極端天氣事件的日益兇猛和頻率歸因於氣候變化，他們在很大程度上將其歸因於人類活動。 雖然有些人質疑科學，但即使是世界上最大的石油公司現在也接受它，並承認他們的商業模式需要改變。

地球上的每個國家（美國除外）都簽署了《巴黎氣候協定》。 儘管美國有爭議地退出了，但美國許多最有影響力的個人、城市、州和公司——代表了美國一半以上的人口和經濟——仍然通過美國承諾倡議保留了對協議的承諾。

作為 Web 開發人員，感覺這不是我們可以影響的問題是可以理解的，但事實並非如此。 許多努力正在改善網絡上的情況。 綠色網絡基金會維護著一個不斷增長的網絡主機數據庫，這些網絡主機要么完全由可再生能源提供動力，要么至少致力於實現碳中和。 2013 年，A List Apart 出版了 James Christie 的可持續網頁設計。 在過去三年中，SustainableUX 會議見證了網絡可持續性專家在一系列基於網絡的學科中分享他們的知識。

自 2009 年以來，綠色和平組織一直在向大型互聯網公司施壓，要求其通過 Clicking Clean 活動來清理其能源結構。 部分由於這項活動，谷歌去年宣布，它首次購買了足夠的可再生能源來滿足其全球運營消耗的 100%。

那麼，除了用可再生能源為服務器供電之外，Web 開發人員還能為氣候變化做些什麼呢？

“你無法管理你無法衡量的東西”

在使網站更具可持續性方面，最大的勝利也許是性能、用戶體驗和可持續性都巧妙地交織在一起。 衡量數字產品可持續性的關鍵指標是其能源使用情況。 這包括服務器、客戶端和在兩者之間傳輸數據的中間通信網絡所做的工作。

考慮到這一點，也許首先要考慮的是我們如何衡量我們網站的能源使用情況？ 這實際上是一項比你想像的更棘手的工作，而且在這裡很難獲得精確的數據。 然而，我們可以使用一些很好的後備方法來展示能源使用情況。 這些包括數據傳輸（即瀏覽器必須下載多少數據才能顯示您的網站）以及服務和接收網站的硬件的資源使用情況。 這裡一個明顯的指標是 CPU 使用率，但內存使用率和其他形式的數據存儲也發揮了作用。

數據傳輸是我們可以很容易測量的一件事。 所有主要瀏覽器都提供開發者工具，讓我們可以測量網絡活動。 例如，在下面的屏幕截圖中，我們可以看到首次加載 Smashing Magazine 網站會產生不到 1 兆字節的數據傳輸。 Firefox 的開發者工具其實為我們提供了兩個數字：第一個是已傳輸文件的未壓縮大小，第二個是壓縮後的大小。

壓縮資產通過網絡傳輸時最常用的工具是 gzip，因此這兩個數字之間的差異通常是 gzip 工作的結果。 後一個數字表示實際傳輸了多少數據，是需要關注的數據。

注意：還有很多其他工具可以為我們提供數據傳輸的指標，包括備受推崇的 WebPagetest。

為了測量 CPU 使用率，Chrome 為我們提供了一個精細的任務管理器，它顯示了各個選項卡的內存佔用、CPU 使用率和網絡活動。 對於更具冒險精神/技術性的人，top（進程表）命令在大多數類 Unix 操作系統（如 macOS 和 Ubuntu）上提供了類似的指標。 一般來說，我們也可以在我們有 shell 訪問權限的任何服務器上運行 top 命令。

幸運的是，諸如 WebsiteCarbon 和 Ecograder 之類的努力試圖將這些指標轉化為特定的 CO2 數據（在 WebsiteCarbon 的情況下）或分數（在 Ecograder 的情況下）。

可持續網頁設計

現在我們知道如何衡量我們網站的影響力，是時候考慮如何優化事物以使其更具可持續性、更高性能和更好的使用體驗。

我們可以利用一些現有的作品來幫助我們。 2016 年，O'Reilly 出版了 Tim Frick 的“Designing For Sustainability”。 在這本書中，蒂姆帶我們參觀了可持續設計的原因和方法。 但我們也可以利用大量現有的想法、會議演講和文章——雖然沒有明確關注可持續性——與可持續網頁設計的哲學有很大的重疊。 這里特別好的例子是 Brad Frost 的副項目“Death To Bullshit”、Heydon Pickering 的文章和關於編寫更少該死的代碼的討論，以及 Adam Silver 的博客文章“為實際性能而設計”。

如果我們正在對一個網站進行全面的重新設計，或者從頭開始一個新網站，我們可以從這裡的一些非常高級的問題開始。 例如，主頁上真正值得或需要的內容是什麼？ 更具體地說，主頁上的每個元素帶來什麼價值？ 正如海登·皮克林所說：

“網站中性能最高、易於訪問和易於維護的功能是您一開始就沒有製作的功能。”

我在 WordPress.com VIP 團隊工作，因此本著這種精神，我決定通過組合一個極簡主義的 WordPress 主題來挑戰自己，看看我能在可持續網頁設計技術方面走多遠。 結果是一個名為 Susty 的主題，它可以在我放在一起的隨附網站上看到：sustywp.com。 在該特定示例中，該網站以略高於 6KB 的數據傳輸量交付，鑑於網站的中位數約為 1.5MB，這感覺很好。

那麼，我做了什麼？ 好吧，我會告訴你的。

減少網絡請求

正如我上面所概述的，網絡請求是我們可以輕鬆衡量的，因此它們是一個很好的起點。 在將 Susty 放在一起時，我注意到有許多 HTTP 請求正在進行，但似乎沒有必要。 例如，WordPress 捆綁了一些 CSS 和 JavaScript 來檢測表情符號的使用並確保它們不會顯示為非法字符。 這本身並沒有什麼問題，但如果您不打算使用表情符號，或者您對各種系統默認設置感到高興和自信，您可以阻止加載它們。

這代表了相對微不足道的節省，但是通過建立從我們的頁面中刪除不需要的代碼和請求的理念，我們可以做出更顯著的性能改進。 例如：

• 我們是否為一些基本的 DOM 操作加載了整個 jQuery？
  我們能用純 JavaScript 達到同樣的目的嗎？ 您可以在 Jeremy Wagner 為 Google 撰寫的這篇文章中了解更高級的死代碼消除（又名搖樹）。
• 我們有圖像輪播嗎？
  我們真的需要所有這些圖像嗎？ 它們是否顯著增強了用戶體驗？ 或者我們可以把它簡化為一個強烈的形象嗎？ 或者甚至隨機顯示一組圖像中的一個，給回訪用戶一種活力感？ 順便說一句，這裡所做的研究表明，大多數用戶既不喜歡也不參與輪播。
• 如果我們使用大量圖像，我們是否會受益於為那些支持 WebP 格式的瀏覽器提供圖像？
  很長一段時間以來，WebP 的支持一直受到令人沮喪的限制。 但由於 Firefox 將在 65 版（2019 年 1 月到期）中開始支持它，像 Safari 這樣的落後者趕上來只是時間問題。
• 我們是否正在加載數百千字節的網絡字體？
  我們是否正在使用我們正在加載的所有網絡字體？ 我們甚至需要網絡字體嗎？ 如今，大多數設備都有一堆半體面的字體，我們可以指定一個我們希望看到的按偏好排列的字體列表嗎？ 如果我們必須使用 Web 字體，我們應該確保我們的字體在合理可能的情況下具有盡可能高的性能。
• 我們要嵌入 YouTube 視頻嗎？
  嵌入的 YouTube 視頻通常會在任何人與之交互之前添加大約 1 兆字節的數據傳輸。 如果實際上只有一小部分用戶會坐下來觀看我們網站上的嵌入視頻，我們可以直接鏈接到它嗎？

仔細檢查一切

在這種情況下，我們還可以詢問頁面的各個方面。 什麼真正值得在那裡？ 我們的側邊欄是否增加了任何真正的價值，或者我們只是放了一個，因為慣例規定網站有側邊欄？ 所以，我們添加了一個並用廢話填充它。

在 Susty 中，我嘗試了一種非正統的方法，將導航降級到它自己的頁面。 這使我可以將頁面精簡到字面上的基本要素，僅在用戶明確請求時才加載其他內容。 Susty 是如此的輕量級和快速，以至於我通過一些用戶研究（又名我的合作夥伴）意識到，菜單的加載並不像一個新頁面，所以我決定讓它看起來像一個疊加層，並帶有一個交叉關閉實際上只是將您帶回上一頁。

除了幫助我創建令人愉悅的輕量級頁面外，降級導航還消除了任何用於顯示它的花哨的隱藏/顯示代碼的需要。 在這一點上，我想明確指出，Susty 是將可持續網頁設計技術發揮到極致的一個例子（我並不是說它是一個好的網站的原型）。

像祖母一樣編寫 CSS

當涉及到嚴重的性能增強時，我們應該記住，代碼的每個字符都很重要。 每個字符代表一個字節，即使它們被 gzip 壓縮後，它們仍然很重。 CSS 是一個我們經常看到很多臃腫的領域。 幸運的是，有越來越多越來越複雜的工具可以幫助您清除未使用的 CSS。 Sarah Dayan 的這篇精彩文章概述了她如何將 CSS 包從 259KB 減少到 9KB！

如果我們從頭開始，也許我們應該首先更深入地思考我們如何編寫 CSS。 Heydon Pickering 寫了一篇很棒的文章，講述了我們如何以一種能夠發揮語法設計優勢的方式編寫 CSS，以及這如何幫助開發人員防止重複。 Heydon 還指出過度使用 div 和類會造成多少浪費——無論是在 HTML 還是 CSS 中。

你在分析什麼？

每個人都可以通過谷歌分析、KISSmetrics、Piwik 等工具來分析他們網站的訪問者所做的事情，這似乎在網絡上或多或少無處不在。雖然我毫不懷疑有合法的用例，但我們真的需要對每個網站進行分析？ 就我而言，我通常會理所當然地將 Google Analytics 添加到我管理的每個站點中。 但我最近才意識到，對於大多數有問題的網站來說，這幾乎是完全沒有意義的努力：“哦，今天有六個人通過 Facebook 訪問了這篇文章。” 誰在乎？

除非您真的需要它，並且您將分析數據並根據數據採取行動，否則只需放棄分析並找到一種更好的方式來度過您的時間，而不是目瞪口呆地看著今天有多少人訪問了網站 X。

除了增加您的頁面權重之外，使用諸如 Google Analytics 之類的東西還會引發有關您代表 Google 為您的用戶收集的數據的道德問題，即 Google 免費為您提供 Analytics 是有原因的。

讓我們不要忘記基礎知識

這些天有很多關於以下內容的信息，但我們永遠不應該自滿並忘記它們。 除了上述所有內容之外，我們絕對應該始終縮小 HTML、CSS 和 JavaScript，並在適當的地方進行連接。 我們還應該壓縮所有圖像以確保它們盡可能小，在正確的設置中使用正確的格式，並使用漸進式渲染。

服務器端性能

到目前為止，我們的重點幾乎完全集中在前端，但如果我們不在服務器端進行優化，其中的很多內容都變得無關緊要。 我已經提到過幾次，但我們絕對應該始終啟用 gzip 壓縮。

我們應該為我們的服務器提供盡可能簡單的網站服務。 我主要使用 Nginx，我特別喜歡 FastCGI 緩存並且發現它特別有效。 如果您對自己的服務器有 shell 訪問權限，這裡有一篇文章解釋瞭如何配置它。 如果您對服務器沒有（或不想要）盡可能多的控制權，那麼技術選項就會減少。 WordPress 空間中特別受歡迎的是 WP Super Cache。

我們應該使用 HTTP2 而不是 HTTPS。 使用 HTTPS 開闢了一個新的 Web 技術世界，例如服務工作者，使我們能夠將網絡本身視為一種美好的事物。 如果您想了解更多相關信息，我強烈推薦 Jeremy Keith 的新書《Going Offline》。

注意：您可能還想研究 Google 的 PageSpeed 模塊，它可用於 Apache 和 Nginx。

最後，我們在這裡可以產生的最大影響是將我們的網站託管在由可再生能源驅動的數據中心。 在英國，就我直接託管我的網站的公司而言，我強烈推薦 Krystal 和 Kualo。 （有關綠色網絡主機的完整目錄，請查看綠色網絡基金會。）

綜上所述

我希望我已經說服您，努力使我們的網站更具可持續性是值得的。 特別是考慮到在此過程中，我們還製作了我們的網站：

• 更高效，
• 更人性化，
• 更方便，
• 對服務器更友好，
• 更好地為搜索引擎優化。

一些人對可持續網頁設計理念的回應——這並非不合理——似乎是對環境事業的一個很小的讓步。 當然，你能產生多大的影響取決於你工作的網站有多忙。 但是，除了幫助網絡變得更加環保之外，可持續的網頁設計基本上是最佳實踐網頁設計。

還值得考慮抵消您無法避免的碳排放。 碳補償有時會受到嘲笑，但這是有充分理由的。 抵消的主要問題是碳抵消的期限通常很長。 例如，對於植樹，碳封存量的數據通常基於 100 年的時間。 所以，就現在減少碳排放而言，這並不是一個真正的解決方案。 但總比沒有好。

myclimate 的座右銘是盡力而為，並抵消其餘部分。 我寫了一篇關於推出自己的碳補償計劃的博客文章。 我還強烈推薦 1% For The Planet 倡議。 最後，如果您是企業主，並且想加入一個希望看到更好的社會、環境和經濟正義的公司聯盟，請查看認證 B 公司計劃。