什么是可持续网页设计以及如何实现它

已发表: 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 的合作伙伴(或任何其他类似组织)并开始种植这些树木!