什么是可持续网页设计，如何实现它？

可持续网页设计的重要性

网络技术可以潜在地造福社会和环境，但前提是我们明智地使用它……

随着可持续发展变得越来越重要，许多企业正在寻找减少碳足迹的方法。 在对运营进行改变后，下一步的技术影响似乎是合乎逻辑的

网络对环境的影响已被广泛宣传，占全球排放量的 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