什麼是可持續網頁設計以及如何實現它

已發表: 2022-12-01
“我真的很想要一輛電動汽車,但我買不起”幾個月前我的一個朋友懊悔地說。 他和我正在討論氣候變化以及我們對習慣所做的改變。

我笑了。

“你知道它們也消耗能源,如果你不通過使用可再生能源的插座為電動汽車充電,你仍然會造成很多污染,對吧?”

他說他知道這一點,但他仍然覺得他和他 20 歲的大眾汽車是對他為過上更可持續、更環保的生活所做的所有努力的一記耳光。



“這個怎麼樣 - 我可以告訴你如何通過數字世界減少碳排放”我建議道。 他給了我一個困惑的表情。 然後我告訴他,根據一些統計數據,普通互聯網用戶產生的二氧化碳量與他們乘坐普通汽車行駛 1000 公里所產生的二氧化碳量大致相同,而且有多種活動會產生二氧化碳。

他與這個想法抗爭了將近十分鐘,直到我拿出手機上的數據。 老實說,我並沒有責怪他,因為我記得那天我也有同樣的反應,我意識到我訪問的每個網頁都有一個隱藏的成本——用來維持它的能量。

互聯網的骯髒秘密,可以這麼說。

根據 Website Carbon Calculator,平均網站每次頁面瀏覽產生大約 0.5 克的二氧化碳,因此對於每月瀏覽量為 100,000 次的網站,每年產生 500 千克。 請記住,這是每個網站!

作為參考,一輛普通汽車每 1000 公里排放 1200 千克二氧化碳,因此您可以看到互聯網由於其巨大的碳足跡而對氣候變化和全球變暖產生了非常明顯的影響。

所以問題是:作為網站所有者,您可以做些什麼來減少您的網站對我們環境的影響?

當然是可持續的網頁設計。

在 Kualo,我們與可持續發展的概念有著內在的交織,我們覺得探索這個話題是很自然的。 在本文中,我們將學習:
  • 什麼是可持續網頁設計?
  • 為什麼我們需要可持續的網頁設計?
  • 可持續網頁設計的好處是什麼?
  • 可持續網頁設計最佳實踐


我們希望為您提供準確的藍圖,幫助您最大限度地減少網站的碳足跡,所以事不宜遲,讓我們開始吧!

什麼是可持續網頁設計?

“可持續網頁設計是一種將人與地球放在首位的網絡服務設計方法。 它提供尊重可持續網絡宣言原則的數字產品和服務:清潔、高效、開放、誠實、可再生和有彈性。”



這就是我們可以在可持續網頁設計宣言中讀到的內容,該網站簡要解釋了這一信條將包含的內容。 讓我們快速回顧一下這 6 點:

  1. 清潔:您網站使用的服務應由可再生能源提供動力,這意味著您的網絡託管應該是綠色動力的。
  2. 高效:您提供的服務應充分優化,以使用盡可能少的能源(和材料)
  3. 開放:你提供的服務應該對所有人開放,並且應該允許用戶完全控制他們的數據
  4. 誠實:您的網站不會提供誤導性內容和/或試圖通過網頁設計誤導用戶
  5. 再生:您的服務將參與以支持社區和環境為導向的經濟
  6. 彈性:您的服務將在最需要的時間和地點提供

如果您考慮上述所有要點,您可能會發現這份宣言所呼籲的不僅僅是可持續的網頁設計,而且確實是可持續商業實踐和可持續經濟的基礎。 為了擁有更美好的未來,我們需要能夠提供對環境和人類產生最小負面影響的有意義且有用的服務和產品的企業。

換句話說,如果您要進行可持續的網頁設計,您應該:
  • 使用盡可能少的資源
  • 制定並遵循深思熟慮的內容計劃,確保您設計的每個頁面都有目的
  • 利用優化的網站構建
  • 避免以任何方式誤導用戶執行他們可能不想執行的操作

為什麼可持續網頁設計很重要?

因此,互聯網為社會帶來了諸多好處,但也付出了巨大的環境代價。 Web 用戶平均每天在計算機或移動設備上使用在線內容 5-6 小時。 隨著我們比以往任何時候都更頻繁地使用技術,這種情況在未來幾年只會增加,直到數十億人使用 8 種不同類型的設備在世界各地瀏覽網站!

現在,回到我在本文開頭所說的(以及我們關於互聯網對環境影響的信息圖),我們知道這基本上是一個不斷擴大的能源黑洞。 另一方面,我們也知道互聯網對許多人來說至關重要,而且他們不能像汽車或筆記本電腦那樣將其換成更節能的版本。

但是你知道我們可以交換什麼嗎?

當然是我們的網站設計。

如果要點是您網站的大小及其構建方式直接影響它將產生多少二氧化碳,那麼這就是我們作為網站所有者需要解決的問題。

可持續網頁設計的好處

現在,一般來說,如果您正在閱讀本文,您已經有充分的理由想要一個可持續發展的網站,而這個理由與環境保護有關。 基本上,你想成為這個星球的英雄,為此我很欽佩你。

但是,在網頁設計方面改變我們的方式是否有額外的好處?

我絕對會說是的。



作為一名營銷人員,我習慣於從各個角度考慮我的數字化工作以及它們對我的項目的影響方式。我可以馬上告訴你,即使在個人層面上,部署一個遵循環保原則的網站也要好得多網頁設計,以下是一些原因:
  • 你會花更少的錢:從你的設計師費用到你的內容製作,每一件額外的事情都會讓你花錢。 更複雜的設計會花錢,更多的文案和內容會花錢等等。 極簡主義,只擁有你真正需要的東西是削減開支的好方法
  • 您的客戶會更加滿意:曾幾何時,網站還很新鮮,人們喜歡花里胡哨的東西,而現在每個人都被它們淹沒了,因為他們整天都在網上沖浪。 這意味著對於普通用戶來說,您的網站越清晰,他們就越有可能找到他們想要的東西,而不是點擊 X 按鈕然後去找那些不會浪費他們時間的人。
  • 您的 SEO 努力將更加有效:幾年來,速度一直是 Google 排名的重要因素,但隨著時間的推移,我們發現這在 SEO 方面變得越來越重要。 谷歌討厭速度慢的網站,他們絕對會優先考慮更輕快的網站。 順便說一下,眾所周知,客戶體驗也是如此。

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

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

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

出於明顯的原因,用戶更喜歡較短的用戶旅程,因為他們不會浪費時間。 但是,除了客戶體驗之外,他們還將訪問更少的頁面來查找所需內容,從而減少訪問造成的碳排放。





(圖片來源:https://www.appcues.com/blog/user-journey-map)

更好地熟悉用戶旅程的概念是個好主意,然後,一旦您可以自由設計用戶旅程地圖,就可以根據它們調整您的網頁設計。

避免摩擦點的良好用戶體驗 (UX) 將不可避免地導致更低的能源消耗和更快樂的客戶。

2.選擇綠色動力的託管服務提供商

我知道這聽起來有點自私,因為我們最終是一家託管公司,但事實是,如果您想減少碳足跡,誰每天為您的網站提供動力絕對重要。 不幸的是,數據中心消耗了為互聯網供電的大部分能源。 我們必須迅速過渡​​到 100% 可再生資源。



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

3.緩存一切!

如果您像許多網站(WordPress、Magento、Drupal 等)一樣使用 PHP 驅動的應用程序,那麼緩存是可持續發展的必做之事。

如果一個網站沒有緩存,那麼你就會讓服務器更加努力地工作。 每次有人訪問您網站上的頁面時,都必須通過處理 PHP 代碼、查詢數據庫並將其轉換為顯示您網站的 HTML 內容來動態構建頁面內容。

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



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

此外,您的頁面加載速度更快。 這不僅是您和您的訪問者的勝利,還意味著您的訪問者等待頁面加載的空閒時間更少 - 在此過程中消耗的能量更少。

網站緩存的方式有很多種,在Kualo,我們比較喜歡LiteSpeed Cache做頁面緩存,還有Redis和Memcached來緩存數據庫查詢。 超快的網站更好的可持續性 - 有什麼不喜歡的?

4. 如果你在寫代碼,確保它是乾淨的代碼

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

5.避免無用的插件和附加組件

這與上述規則相關,但適用於確實使用 WordPress、Magento、Craft、Laravel 等 CMS 的人。 有時我們可能對插件市場為我們提供的所有可能性過於興奮,並淹沒了我們的網站在不必要的插件中

面向營銷的插件或我們忘記的重複插件通常就是這種情況。 評估您擁有的東西,然後評估您需要的東西,然後再考慮其他任何事情。

6.避免或使用最低限度的自定義字體

這可能會讓人感到意外,但自定義字體絕對會增加您網站的文件大小]。



(機構 Johnson Banks 為 Duolingo 創建的自定義字體)

您的典型自定義字體文件可能很容易超過 200kb,同時包含一個字重。 如果你使用不同的重量和字體,這將不可避免地累加起來,從而影響速度和能源消耗。

因此,建議您僅在您認為它們對您的品牌和實際用途非常重要時才使用自定義字體。

7. 明智地使用媒體文件(並優化它們)

不用說,您網站上的所有圖像都應該在尺寸上進行優化。 我們從與網站速度(以及隨後的 SEO)相關的最佳實踐中了解到這一點。 我們有時會看到客戶問為什麼他們的網站很慢,卻發現首頁有 4MB 的圖片,因為他們上傳了超大的原件! 通過優化這些相同的圖像,可以在不降低質量的情況下提供這些圖像。

https://youtu.be/eY-VyLd2t-Q

LiteSpeed Cache for WordPress 包含自動圖像優化功能,因此您無需擔心自己執行此操作。 更重要的是,它可以將圖像轉換為使用現代文件格式,例如 WebP,與 PNG 或 JPG 圖像相比,它們的大小要小約 25%。

除了優化之外,我們還需要考慮的是它們的使用是否合理和有目的。

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

8.延遲加載首屏內容

您的每個網頁都可能包含很多“非首屏”內容 - 也就是說,除非訪問者向下滾動您的頁面,否則這些內容是不可見的。

如果這包括大量圖像或視頻,尤其是尺寸可能很大,則所有這些數據都必須通過互聯網傳輸,即使它們可能永遠不會被看到。



延遲加載意味著您僅在用戶向下滾動頁面時請求此內容。 這些部分將在該內容出現之前出現,因此從訪問者的角度來看,就好像它們一直在那裡一樣——沒有明顯的區別。

您不僅可以避免傳輸不必要的數據,還可以通過降低網站權重來提高 PageSpeed 分數。

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

9. 限制視頻和動畫的使用

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

動畫通常沒有戰術目的,因此盡可能少地使用它們。 對於視頻,它們的用途很重要,所以如果您認為它們對您的用戶有用,請確實使用它們,只要確保它們也盡可能優化即可。

10. 精簡網站上的 HTML、CSS 和 Javascript

同樣,您可能已經出於速度目的這樣做了,但如果您不是,讓我們快速回顧一下這背後的原因。

通常,您的 HTML、CSS 和 Javascript 代碼會包含額外的數據,例如空格、換行符或註釋。 這些空格或註釋僅供開發人員輕鬆閱讀和理解代碼,但不會影響瀏覽器如何解釋您的代碼。

縮小您的代碼會去除所有這些不必要的重量,減少需要通過 Internet 傳輸的文件的大小,並使您的網站加載速度更快。

對於 WordPress,LiteSpeed Cache 會為您處理這方面的問題,但大多數其他應用程序也會通過插件提供類似的功能。

11. 刪除不必要的 CSS 和 Javascript

雖然縮小會去除不必要的數據,但它不會分析您的網站是否實際使用了任何代碼。

您可能使用過主題或頁面構建器,其中包含大量您從未在站點的任何地方使用的不同佈局、樣式或功能。

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



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

去除 Javascript 可能更複雜,儘管 LiteSpeed 至少可以延遲它的加載,直到檢測到用戶活動。 這可能是合適的,前提是首屏內容不需要它。

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

12.確保您的網站在不同設備上正常工作

在多種屏幕尺寸、瀏覽器、設備和帶寬速度下測試您的網站可能相當耗時,但它與可持續網頁設計緊密相關。 它與第 n.1 點有關,這意味著內容和設計的不正確顯示將導致糟糕的用戶體驗和用戶之間的很多混淆。

他們將花費更多的時間試圖找到他們正在尋找的東西,從而導致更大的能源消耗。

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

13. 使用 CDN 來提供你的內容

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

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

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



選擇使用可再生能源的 CDN 很重要,當然,比如 Cloudflare。

14. 審核您的內容以確保其符合策略

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

您可以手動偵察它們或使用 Google Analytics 來評估哪些頁面可能已過時或表現不佳。 然後,您可以決定是否可以調整它們以提供有用的最新內容,或者確定它們只是注定要被丟棄。

15. 通過抵消碳足跡來減少二氧化碳排放

成為一家對氣候有利的企業可能是我們在提高可持續性方面做出的最佳決定之一。 到目前為止,我們已經種植了 50,000 多棵樹並抵消了 2000 多噸二氧化碳,打算在未來幾年繼續這一旅程。

參與植樹和抵消碳排放的項目是一種了不起的方式,不僅可以提高您的網頁設計的可持續性,而且可以提高您整體業務的可持續性。 在減少二氧化碳排放方面,樹木絕對是贏家,因為它們吸收二氧化碳並將其轉化為氧氣。

我們邀請您訪問我們在 Ecologi 的合作夥伴(或任何其他類似組織)並開始種植這些樹木!