技术选择如何改善网站的可持续性

迷你系列的下一个是探索我们在气候小组可持续网站中考虑的技术要素。

但是就在我们开始之前，有一个小的免责声明。尽管我们已经决定将这一系列划分为关键元素-设计，技术等-实际上，我们的整个团队同时工作。我们每周进行一次站起来，确保在较小的子团队中可以实现建议的解决方案。

另一方面，我们不想创建说明性的分步说明，而是希望基于久经考验的方法来讨论最佳实践。因为我们还在学习。在编写本系列文章时，我们希望激发整个行业中有关该主题的连续内容。

剥离主题

因应气候小组的需求，Drupal赢得了最适合的内容管理系统(CMS)的殊荣。随着版本9的发布，Drupal也是列表中最新的CMS选择之一。

为了为慈善机构的网络财产建立可持续的基础，宣言宣言寻找了最简单的主题“ stable9”。该主题包含最少的标记-即说明页面外观和工作方式的软件说明。以及很少的层叠样式表(CSS)类，这意味着该网站将不会包含任何没有直接帮助其核心功能的代码。

我们还创建了一个自定义主题，可以在必要时覆盖某些stable9功能。这些替代有些是一般性的。例如，在每个公共页面上都会调用stable9的模板“ page.html.twig”，但是我们自建的主题为其添加了自定义的页眉和页脚。

替代项可以是在元素中添加类以进行主题化，也可以在页面中添加全新的部分，而这并不是您所使用的默认主题的一部分。拥有自己的主题使我们可以更好地控制代码库的最终版本。从预建主题继承的代码较少，意味着您的前端开发人员可以完全拥有前端代码的所有权。

我们还删除了任何虚拟和未使用的代码。我们甚至摆脱了更新的管理员皮肤。尽管我们认为这种表皮不会对Climate Group的编辑产生实质性的影响，但它确实给网站增加了不必要的重量-每个字节都很重要!

我们密切关注减少排放量对开发时间的意义。很快变得很清楚，它什么都没有!这是因为取消构建和重新构建原本熟悉的步骤所花费的时间远远超过了这种构建所要求的效率。可以减少字体，图像或大量自定义和复杂代码的工作。

模式实验室方法

我们使用了非常严格的模式实验室方法。这是将网站分为五个部分的策略：原子，分子，生物，模板和页面。这有两个原因。

一个是导致不必要排放的关键因素是过高的代码库。这可能是由于随着时间的推移执行得不好而导致的更新。是新的字体大小，新的背景色还是稍微不同的模块。通过遵循模式实验室方法，我们团队的构建管道将受到额外的治理层的约束。这意味着代码库以及用户的体验仍然符合我们在上一篇文章中解压缩的原始，经过深思熟虑的设计。

其次，模式实验室方法使我们的后端和前端开发人员能够专注于各自的专业。不需要一个经验丰富的前端Drupal开发人员，我们需要一个可以编写高质量，轻量级代码的前端开发人员。而这正是我们所拥有的!

当然，模式实验室方法还具有其他连锁优势。当新的编辑，设计师或开发人员加入团队时，他们将确切知道他们可以使用的内容以及原因。这很重要，因为这意味着随着网站的老化，随着时间的流逝，任何细微的调整都可能符合原始的可持续设计方法。

我们不主张网站保持与发布之初完全相同。但是，如果不将细微调整与最初的构建放在同一思路上，可能会对排放产生巨大影响。

考虑每个电话

将第三方插件添加到网站后，它们就不在我们的控制范围内，因此我们尝试删除了尽可能多的插件。“关注和共享”列表上最明显的类型之一是“关注和共享”社交媒体插件。它们会触发过多的呼叫，从而转化为不必要的排放。相反，我们只使用了简单的“ html”链接，这些链接直接链接到Climate Group的社交网络页面。

Twitter分享按钮 Facebook分享按钮 pinterest分享按钮

YouTube嵌入是我们遇到的比较棘手的第三方集成。在页面上显示一个会自动触发大约15-20个通话。如果访问该页面的人没有观看视频，那么所有这些排放实际上都是浪费。

视频是一种非常强大的媒体。它以秒为单位解释了文本或静态图片根本无法做到的事情。但是，要建立一个可持续发展的网站，您必须权衡该价值与它们产生的排放量。我们用静态图片和播放按钮替换了嵌入的YouTube。这遵循几乎相同的用户体验(UX)，但可以节省网站的通话次数。

优化图像

在开始优化图像之前，需要确定要使用的工具。我们决定使用Imagemagick，主要是因为它的图像质量略佳。它还具有令人印象深刻的文件类型覆盖范围，以及许多其他功能。但是我们保持分析简单，坚持文件大小和图像质量。

优化图像后，您可以开始考虑如何将图像实际呈现给用户。我们计划为以后的版本实施延迟加载，但并未将其列入优先考虑的名单。我们已经在尽量减少图像的数量，因此延迟加载并不是绝对必须的。但是为了补偿，我们使用了“ srcset ”将工作传递给浏览器。该工具告诉浏览器我们可以使用的图像以及图像的大小，因此浏览器可以完成所有工作。

使用SVG

尽管图像严重缩减，但该网站必须具有视觉吸引力。这导致使用背景形状或图标。

为了最小化文件大小，我们使用了可缩放矢量图形(SVG)，该图形会自动缩放以适合用户的设备，并使用CSS来确定颜色。如果我们将每个大小和颜色分开放在不同的文件中，则将花费大约255兆字节。这是693 KB，是三种大小的乘积，是八种颜色的乘积，是50种不同图像的乘积–哎呀!

SVG和CSS路由仅花费了5 KB的宣言。如果没有这些修改，它的大小仅为它的0.002%。诸如此类的较小，优化的映像也意味着更快的站点加载时间，可以减少存储空间，并将未来的开发时间保持在最低限度。例如，在六个月内添加新的品牌颜色后，您知道哪种方法最容易实现。

保持字体紧密

Climate Group使用自定义的Adobe字体，这些字体显然是该慈善机构品牌的一部分。因此，我们需要确保该站点能够以最有效的方式为他们提供服务。

我们决定将它们放在Drupal主题中，以便可以直接从存储站点其余部分的服务器上进行服务。这样可以避免从字体库中为它们提供服务，而这需要第三方的帮助。这符合我们的总体目标–在整个站点上保持尽可能多的控制。如果我们依靠无法控制的外部服务，那么我们就没有承担足够的责任来减少站点的排放。

总共，我们仅使用一种字体的三种不同的粗细，然后将文件转换为WOFF2以使其更小。

结论

在该项目的整个技术步骤中，Manifesto的设计和开发团队始终秉承以下理念：减少排放量是一个积极的挑战，而不是消极的约束。通过在整个构建过程中坚持这种态度，团队成员可以发挥自己的最大创造潜力，质疑每一个规范–截止日期可能会导致快速但不环保的解决方案，或者不必要的复杂设计会消耗更多的精力。

尽管这是Manifesto开始的第一个完全端到端的数字可持续性Web构建，但它不会是最后一个。我们有适当的流程使它成为我们所有项目的重要组成部分;帮助我们将其作为默认方法。我们的团队在这类项目中获得的经验越多，我们可以在将来的构建中实现的效率就越高。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！