在过去六个月中，我对网络可持续性主题越来越感兴趣。互联网的碳足迹是我以前很少考虑的事情，这令人惊讶，因为我对环境问题很感兴趣，而且我的职业是基于网络的。
暖化世界中的网络
简单回顾一下，我去年参加了在伦敦举行的 MozFest。在会议间隙，我浏览了布告栏，看看接下来有什么活动，我发现了一个名为“构建一个对地球友好的网络”的会议。我感到有点目瞪口呆。这究竟是关于什么的？
我参加了这个会议，我的眼界被打开了。我现在觉得很明显——但当时是一个启示——我了解到互联网的巨大能源需求。这种需求使其成为地球上最大的燃煤机器，这意味着 它的 CO₂ 排放可能至少相当于全球航空旅行。越来越多的人开始上网，但这与 越来越臃肿的网站 的兴起相结合，意味着互联网的能源需求呈指数级增长。每传输一个额外的字节意味着更多的能源，而在大多数国家，这意味着更多的 CO₂。
人们普遍认为，我们应该避免打印电子邮件以节约树木，但这导致了一个错误的假设，即网络是一种绿色媒介。我遗憾地说，事实并非如此。
还有其他方法吗？
好消息是，情况并非如此。自 2009 年以来，绿色和平组织一直在审计互联网公司的能源使用情况，并通过他们的 点击清洁 活动游说他们改进。 绿色网络基金会 拥有一个不断增长的托管公司数据库，这些公司使用可再生能源，或者至少承诺实现碳中和。而 新工具 正在 出现，帮助那些在网络上工作的人衡量我们产品的环境影响。
还有一些很棒的资源，比如 Tim Frick 的 可持续设计，来自 可持续 UX 会议的三年演讲，以及 周边材料，虽然没有明确关注可持续性，但可以帮助我们构建低碳网站。
进入 Susty WP
我决定挑战自己，看看我能以多高的效率打包一个 WordPress 网站。与此同时，我心想，“为什么不把网站做成关于可持续性和 WordPress 的？”我知道，WordPress/可持续性循环。很酷，对吧？
因此，sustywp.com 诞生了。以及它的配套主题，Susty。我很高兴地说，我设法将主页的负载降低到 7KB 的数据传输量。我实际上把它降低到了 6KB，但 Yoast 添加的元数据几乎增加了 1KB！😛 但是，鉴于我试图传播信息，我认为这是一个可以接受的权衡。
在我深入探讨具体细节之前，我只想分享一些重要的事实
- sustywp.com 在 Google 的 Lighthouse 中的性能得分达到 100/100。
- 它在 webpagetest.org 上获得了 A。
- 它摧毁了大多数基准测试，平均首次字节时间 (TTFB) 大约为 0.15 秒，并在 0.5 秒内完全呈现。
- 它托管在 一个由 100% 可再生能源供电的数据中心。
那么，它是如何运作的？
令人惊叹的是，这实际上是多么平淡无奇。在 Heydon Pickering 大力宣传 少写一些该死的代码 以及 Brad Frost 的 Death to Bullshit 等项目的大力推动下，我开始对 Underscores 进行彻底的修剪，删除了所有可能删除的东西。需要明确的是，Underscores 并不是充满了垃圾代码。它是一个非常精简的构建主题的起点。我非常欣赏它，并且完全赞成使用它。但是，它包含了一些假设，这些假设与我将 WordPress 网站缩减到最小尺寸的简朴目标不符。
你问，比如呢？
导航？没有。侧边栏？把它去掉。类？在我的社会主义乌托邦里没有。
鉴于我设定的约束条件，任何进入 DOM 的内容都必须有充分的理由在那里。由于这是一个实验，我采取了一种较为激进的方法，将导航分配到它自己的页面。这非常令人解放，这意味着我不必经历几乎总是令人失望的舞蹈，想知道如何让它看起来体面，对许多不关心的用户隐藏它，确保它足够健壮，可以无限长，带有永无止境的下拉菜单，等等。
这意味着更少的 HTML，更少的 CSS，当然没有 JavaScript！赢了，赢了，赢了。
至于侧边栏？好吧，我一直不喜欢侧边栏，所以很容易删除。Susty 没有小部件区域。我相信它会克服的。
我们还能修剪掉更多肥肉吗？好吧，如果我们几乎没有 HTML，并且想要最少的 CSS，我们真的需要所有这些类吗？我想尝试用 意图使用 CSS 的方式来编写 CSS，而不是屈服于充斥行业的 class-ititis 和 div-ititis。
你可能不需要网页字体
除了图片、视频和 JavaScript 之外，另一个导致网站臃肿的重要因素是网页字体。鉴于现在硅谷的每家初创公司都会将委托设计自己的字体作为一项首要任务，因此似乎您访问的每个网站都会下载一堆字体文件。为了一些不错的字体增加一百千字节似乎并不算什么，但是当您将此乘以访问您网站的不同用户（使用不同的设备和浏览器）时，字体很容易占到数百兆字节的数据传输——如果不是千兆字节/太字节/拍字节（对于流量更大的网站）的话。
自定义网页字体也是我们用户的潜在反模式，因为
- 页面加载速度变慢，因为他们会看到未设置样式的文本闪烁，或者更糟糕的是，在字体加载时根本没有文本。
- 到字体加载完成时，他们已经不注意或不在乎了。
如果您确实需要使用自定义字体，或者正在与未设置样式的文本闪烁作斗争，那么 font-display 是一个新属性，旨在指示浏览器如何处理字体下载。 这篇文章 对此进行了更深入的探讨。
如今，几乎所有设备都安装了一套相当不错的字体，所以为什么不编写 您想看到的潜在字体堆栈，以“serif”或“sans-serif”结尾呢。或者，完全拥抱那些默认字体，使用 系统字体堆栈。
我想要 Susty 拥有一些瑞士风格的美学，所以我的字体堆栈从完美比例的 Helvetica（所有 Apple 设备默认都安装）到 sans-serif，途经 Arial、Frutiger 和 Nimbus Sans L。
作为一名 Ubuntu 用户，我看到了 Arial，它非常令人愉悦。在我的 Android 设备上，我看到了默认的 sans-serif 字体（我认为是 Droid Sans），它实际上在移动设备上效果很好——您几乎会认为它是为此而设计的！
还有什么？标准的东西。尽量减少图片，使用SVG。
除此之外，它真的只是标准。sustywp.com 的主页没有图片，只有一个 SVG，它是内联加载的，而不是通过 HTTP 请求加载的。CSS 被压缩了。所有内容都经过了 GZip 压缩。服务器使用 NGINX 和 Fast-CGI 缓存进行调整，以从内存中提供内容。
无需工作或代码的额外 SPA 类功能
当我向我的女朋友 Daisy 讲述我的计划时，我无聊地问她对一个网站没有导航，而是在一个单独的页面上，通过“菜单”按钮找到的想法如何。她觉得听起来还不错。所以，当我向她展示的时候，我急切地观察着她点击菜单链接。她的反应是，她并没有真的想过点击查看菜单，以及菜单出现，就像改变页面一样。这证实了我的一个恐惧：我之前对在构建单页应用程序（SPA）时消除页面加载的痴迷，只有真正的 web 开发人员才会在意。大多数人并没有真正注意到或想过它。因此，如果你使你的网站速度快如闪电，页面本身的加载几乎是不可察觉的。
既然如此，我便想到，为什么不假装它是一个菜单叠加层呢？因此，我添加了一个关闭按钮，以及一点点 JavaScript 代码，以便你点击菜单时能返回到之前的页面。（我最初使用 $_SERVER 超级全局变量和 HTTP_REFERER 在 PHP 中实现了这一点，但当使用类似 FastCGI 缓存来提供页面（即这些页面没有 $_SERVER 超级全局变量）时，它就会失效。）
还有更多内容
我们都知道，事情总能变得更好。以下是我正在做的一些改进 Susty 的事情。
- 完成阅读 Jeremy Keith 的书籍 Going Offline，以便我可以实现 Service Worker，并使 Susty 更加高效。
- 看看如何实现 Gutenberg。它会增加很多千字节，这让我很伤心！😉
- 目前，sustywp.com 托管在伦敦的一个数据中心，并从该位置向全球提供服务。这意味着，新西兰惠灵顿的某个人将无法获得完整的体验！我有一个长期的计划，建立我自己的小型 CDN 边缘服务器（每个服务器都由一个 100% 可再生能源驱动的主机在每个位置托管，我可以找到一个），只运行 NGINX 并提供网站的缓存版本。这是我们在 WordPress.com VIP 上做事情的一种简化方式。
总之
Susty 是将可持续设计技术发挥到极致的一个例子。我并不建议我们都应该以这种确切的方法构建网站。但我确实认为，可持续性应该在 web 设计行业中成为一个更高的优先级。思考如何节省我们能节省的每一个千字节，以及用千字节而不是兆字节来思考是件好事。如果你确实想使用 JavaScript 接口库，为什么不尝试一下 Choo.js，它具有类似 React 的功能，并且只有 4KB。请记住，NASA 仅用大约 50KB 的数据存储空间就成功地将人送上了月球。
所有这一切中最好的事情是，高效的网站意味着更快的网站，这意味着
- 更快乐的用户
- 更好的搜索引擎排名
- 更快乐的服务器
很棒的项目！
制作一个黑色变体，带有白色文字，这样会有意义吗？这将减少显示器中灯光使用的能量。
谢谢 Jan！我知道你为什么这么说，但大多数关于这方面的研究发现，只有 CRT 显示器消耗的能量明显少于渲染黑色。对于大多数现代显示器，两者之间的差异可以忽略不计。而且有些设备实际上消耗更多能量来显示黑色而不是白色！有一篇关于这方面的好文章 - 虽然有点过时了 - 在这里：https://sciam.cn/article/fact-or-fiction-black-is/
我喜欢你已经调查了这一点！
Jack，你说得对。但我可以补充说，OLED 显示器，主要用于智能手机，在显示黑色时实际上使用更少的能量，因为单个像素可以关闭。我知道这是一个边缘情况，但在未来可能会变得更加普遍。顺便说一句，这是一篇很棒的文章！
是的，这是真的，值得考虑。谢谢 Snd！
传统的 LCD 屏幕在所有像素后面都有一个明亮的白色偏振光，它始终处于开启状态，像素可以单独“关闭”它们的窗口以调暗光线，这需要额外的一小部分电量。这是通过晶体来实现的，晶体根据它们接收到的电流来弯曲特定颜色的光线的偏振。然后弯曲的光束通过偏振过滤器，你可以将其比作监狱的栏杆。你只能垂直地将书推过监狱的栏杆，而不是水平地。
阅读这篇文章真是太令人愉快了。我不知道该说什么。我想说，环境可持续主题（EST）的时代已经到来！
我选择白底黑字/暗色版本的原因完全不同：它对你的眼睛更好！;)
如果可用性和可访问性被抛之脑后，可持续性本身没有任何意义。
除此之外：Underscores 在“最大程度地减少”方面是一个非常不错的助手。我今天要开始一个客户网站，并尝试通过将当前主题移植到 Underscores，并在下方使用干净的自定义构建 Bootstrap，来减少其疯狂的带宽浪费空间，从而消除大约 60-70% 的 web 性能噩梦，因为这种“多功能”的 WordPress 主题通常会带来过多的复杂性和臃肿。它肯定不会以 7 KB 发布，最好的情况下大约是 575 KB，最坏的情况下大约是 800 KB，但与简单的印记页面 2 (!) MB 或甚至首页 6,7 MB (!) 相比，这是一个很大的差异（即使它没有包含太多内容；只是一个简单的幻灯片，加上一个图片库）。
不过，可持续性可以成为一个重要的议题，并成为说服你的客户例如不使用超臃肿、笨重的多用途主题，而是使用更精简、更干净的东西，因此通常也更不复杂，留下更多的扩展空间。当然，还有可用性和可访问性。所以，从某种意义上说，可持续性是这两个议题的一部分 - 可用性提高了网站的整体操作，可访问性让你更好地理解它...而可持续性避免了网站变得臃肿不堪。因此，它是一个新的名称，它从一个略微不同的角度看待一个与网络一样古老的事情：速度/加载时间优化 :)
再见，w0lf。
感谢你的评论！
这一点似乎与围绕这个主题的研究不一致：https://ux.stackexchange.com/questions/53264/dark-or-white-color-theme-is-better-for-the-eyes#answers
话虽如此，但我非常喜欢浅色背景深色文字。因此，我博客的配色方案。我还在我的文本编辑器中使用深色主题。
完全同意你说的其他部分。:)
由于我严重近视，尤其是在晚上，阅读白色背景上的黑色文字简直是一种折磨。在我将整个首选 GUI 调整为白底黑字对比后，还在我最喜欢的 IDE 中使用深色背景配色方案，生活变得更加快乐。阅读电子书也是如此 - Moon+ Reader 的调整后的夜间主题...简直完美！
当然，用手拿着真本书仍然是无与伦比的。没有惯性照明，但完全反射，同时仍然能够控制照明的级别和强度？我希望计算机显示器也能做到这一点...
它肯定也是对比度问题，但这应该是显而易见的。如果不是：立即停止工作，站起来，反复撞墙，直到昏迷。如果你撞得足够用力，你甚至可能会获得达尔文奖。这样肯定能让我的生活轻松很多 :)
除此之外，还有一句关于统计数据的妙语：永远不要相信你没有伪造的统计数据 ;)
再见，w0lf。
杰克，好文章。我想列出我为印度学生创建的一个类似项目。它是 https://examsmate.in，一个功能齐全的基于 WordPress 的网站，主页大小为 10 KB（徽标占用 3.3 KB）。它在 Google PageSpeed 上也获得了 100/100 的评分。
它在你那边可能会加载缓慢，因为它托管在 Digital Ocean 孟加拉罗尔数据中心（印度），但在我们这里，它打开速度非常快。
以下是我为实现它所做的事情：
删除了主题中包含的额外 CSS 和 JS。使用了 CSS 简写。
从 WordPress 导航项和文章标题（post_class）中删除了额外的类。
尽可能使用非常简短的类名。
删除了额外的 Yoast SEO 元标签。
删除了 WP Bloat。
在最小化代码时，我非常保守，使用 700 代替粗体，使用 3 位数颜色代码代替 6 位数颜色代码，使用“红色”代替 #f00 :D
我仍然希望进一步缩小尺寸。
虽然我完全赞成减少任何碳足迹，但我问自己是否愿意一页一页地只查看文本，无论它是黑底白字还是白底黑字，答案是绝对的“不”。
我想看到图像和视频，并通过与美丽的网站互动来学习更多。我还记得第一个出来的网页，所以不想倒退。
我们应该努力使用更先进/更新的能源来托管互联网；太阳能、风能、波浪能，或者尚未发现的能源，而不是试图让网页回到黑暗时代。
我不是想挑起争端，但你真的读过这篇文章吗？或者读过 sustywp.com 的内容？在文章的结尾段落中，我说：
我的意思是，我们在网站上实施了很多不必要的垃圾代码，这对环境有影响。
我会指出像 DotYork 这样的网站，它几乎完美地平衡了这一点。整个网站只需几百 KB 就能加载，而且看起来很棒。它不仅仅是页面接页面地显示文本，我从未呼吁这样做。
不，我认为你最多可能只读了文章第一段的半句话。
这都是关于网页速度和加载性能优化，这是一个很好的副作用，可以降低基于能源消耗的对自然的影响。想想核电站，它们会产生有害的副产品，这些副产品必须安全地存放数百年，或者燃煤发电厂的丑陋结果……煤炭也需要从某个地方来……
少即是多，形式追随功能，还有 KISS。
仅此而已，
再见，w0lf。
首先，这篇文章更多地是关于网页的构建方式，而不是它的内容。你需要重量级的实现才能提供最好的内容或体验，这并不正确。原生浏览器功能比以往任何时候都更好，你几乎不需要任何代码就可以做任何事情（你的用户需要的事情）。
关于内容和用户体验，我认为没有人正在宣传让网页回到黑暗时代，而是相反。这是要把不必要的因素变成敌人。为用户需求服务，而不是为利益相关者服务。
你的用户不需要特定的字体，不需要英雄图像，不需要非传统的交互。他们不需要同意 cookie，不需要你跟踪他们，将他们的信息用于营销目的，也不需要看到不受控制的第三方广告。他们不需要退出调查弹出窗口，不需要阻止交互的过渡，也不需要他们的会话超时。他们不需要证明他们不是机器人，不需要下载你的智能手机应用程序，也不需要等待数天甚至数周才能取消邮件列表订阅。
这就是黑暗时代，就在现在。
这很酷。干得漂亮！我对我自己的网站采用了类似的方法，但只是出于对几乎无法感知的页面加载速度的出色用户体验的推动。我保留了导航栏来提高内容的可发现性。我的 gzipped 主页只有 1.5kb。我在 https://nattaylor.com/blog/2017/new-theme/ 上写了一些笔记。
但在 Gt Matrix 上它是 35kb。总的来说，对于像我这样刚开始学习编码的初学者来说，这是一篇很棒的文章。
是的，出于某种原因，GTMetrix 加载了许多浏览器不会加载的东西。例如
rel="icon"链接。出于某种原因，它看起来像是dashicons也被加载了。不知道为什么会出现这种情况，但我已经添加了一些额外的代码来强制它永远不会发生。 一些额外的代码谢谢！
你是否看过 Nicholas jitoff 的 itty.bitty.site？他的网站允许在没有服务器的情况下创建网站（实际上对于网站创建者来说），使用 URL 来创建网站。IMO X 个网站需要 Y 个服务器，与他的想法相反，他的想法是 X 个人可以在他的 1 个服务器上运行 2000-4000kb 的网站。看起来非常节能。我是否太天真了？你对此有什么看法？
摊销成本很好，直到你达到该网站带宽饱和的程度。克服这个问题的唯一方法是使用网络。如果你使用的是点对点，它不仅依赖于种子节点（这在非对等 HA 设置中是负载均衡服务器），而且还会可能将地板设定在 6kb 以上。不过这是一个非常有趣的想法。
是的，itty bitty 是一个不错的项目。我认为它有一些很棒的应用，但如果你试图通过它来运行一个博客，例如，你就会遇到限制。如果你需要编辑页面，你就会更改它的 URL。不过，它非常适合一次性页面/项目。
我喜欢这个。一个非常酷的项目。
Serviceworker 也可以让用户避免往返服务器，并避免重复下载，从而加快速度，从而节省更多能量（尽管有一个地板，它甚至可能会影响你获得的托管的轻量级程度）。
感谢 Lewis！这是我 文章结尾处的待办事项。
我实际上在我的本地环境中启用了 Service Worker，我正在努力找到最佳的缓存失效策略！
酷项目！看看它与 gutenberg 的配合如何将很有趣。另外，如果菜单页面本身仍然是一个特殊的页面/帖子类型，可以通过 gutenberg 编辑（这样你就可以创建菜单部分并更细致地为该页面设置样式），那就太好了。
当然，你可以对每个网站都这样做，但每个人都可以通过成为素食者来减少更多碳足迹。
畜牧业占温室气体排放量的 18%，超过了所有交通工具排放量的总和。
我是素食主义者。参见 sustywp.com 上的 我还能做些什么？ 。 :)
问题是，你不能强迫你的观众成为素食主义者，但你可以强迫他们查看低拖放、高性能的网站——他们会喜欢它！
鉴于目标，这个项目只有在你不在乎拥有除了最基本网站之外的任何东西的情况下才能实现（正如你在结论中所建议的那样）——所以我不清楚除了这篇文章的范围内之外，它还有什么用处。另外，在能耗方面，你仍然在服务器上运行一个完整的 CMS——你可以考虑切换到像 Kirby 这样的 CMS，这将产生更大的影响。我想我原本希望看到一些更有见地的东西——但你确实提高了我对能耗的意识，对此我表示感谢。
嗯，你的意思是，你不能从这篇文章中获得任何可以应用于现有网站的知识，这些网站可以变得更加高效？在这种情况下，我想我让你失望了。我正在写另一篇文章，将更详细地介绍很多这些内容。
关于 Kirby 的观点是公平的，尽管我会说运行 WordPress 的空闲成本非常低。运行 sustywp.com 的服务器通常的 CPU 使用率在 1-3% 左右。我想说，在大多数情况下，访问网站的人绝大多数不是管理员，如果你对缓存等方面有良好的策略，WordPress 本身几乎不会被触碰。约 99% 访问 sustywp.com 的流量来自 Nginx 的 FastCGI 缓存。所以对我来说，切换到 Kirby 只能带来微不足道的收益。
我对如何优化图像以适应 iPhone 等高分辨率显示屏的设备有一些想法。我们通常会将图像的分辨率翻倍，这样它们在 iPhone 上看起来更清晰锐利。问题是，这也会增加图像的大小。您使用什么技术来保持文件小巧，同时在这些类型的设备上仍然看起来很棒呢？
嗨，Robert，抱歉回复晚了。Adam Silver 的文章 为实际性能设计 中有一些关于此的好想法。我将在这里概括他的观点。
我还建议查看 Apache 和 Nginx PageSpeed 模块，它们可以自动处理很多这些事情。虽然我之前抽象地了解这些模块，但来自 M S 的评论让我重新审视了它们，并发现它们真是太棒了。
你的教训很重要，但是我们不应该为了解决这个问题而将网页的功能降低到 1990 年的标准。不了解技术的人想要一台可以做早餐、播报新闻的咖啡机。我们必须在功能性、有趣、独特的网站和高效、智能的技术执行之间找到一个平衡点。
如果我想阅读一屏幕没有图片或其他特殊功能的单色文本，我会读一本书。
生活中，极端很少是正确的答案。
你读过这篇文章吗？
现在不确定这是否能帮助你实现你的目标，但像这样的东西怎么样
https://getshifter.io/
是的，这很有趣，但是如果你用像 Nginx 的 FastCGI 缓存这样的东西配置你的服务器，结果几乎完全相同。
如果你让我尝试将其移植到 Ghost，你介意吗？
一点也不，Phil，它是 GPL 许可 的，所以你可以随意做任何你想做的事情！
我已经给你发送了一个拉取请求，它演示了如何编写 SVG“应该”的方式…
我在你的仓库中注意到你已经尝试从 SVG 图标中删除冗余部分，我再次使用“8 位”技术（我以前为电视设计过很多天气图标）对它进行了修改。
如果你看一下我修改过的 SVG，它只使用了描边，而不是填充。我在文本编辑器中编写了它，而不是那些臃肿的 Adobe 软件。甚至也不是 Inkscape。这些工具不会让你看到基本形状，而是创建臃肿的填充路径，而不是你需要的路径。对于图标，你还需要制作可维护的东西，即具有可调整设置，以便你可以控制曲线。圆形是经典的，想象一个搜索图标，放大镜是一个圆形和一条线。线具有较粗的描边和圆角端点，圆形具有透明填充和比手柄更细的描边。这可以在两行 SVG 代码中实现，一个“圆形”和一条“线”。你可以将它们组合起来并旋转 45 度，在视窗中稍微向上移动它们，使最终结果看起来很好。所有数字都不需要是浮点数。在可维护性方面，查看圆形和线并对其进行修改非常容易。可能需要进行一些基本的算术运算。
问题是，Adobe 工具会为这个简单的圆形和线（此基本搜索图标所需要的）输出完全不同的东西。圆形将被绘制为由许多点（通常是五十个左右）组成的外部路径，然后中间的透明部分将用另一个由五十个点组成的路径定义。手柄可能至少还有十二个点。这些点将使用三位小数来指定，而不是简单易于维护的整数！因此膨胀非常严重。
手工制作图标值得付出努力，因为这些图标很重要。臃肿的图标看起来可能不错，它们可以使用自动化工具压缩，但是，如果你将臃肿的圆形通过这样的工具并删除小数位，你会得到一个有许多边的多边形，而不是真正的圆形。从定义上说，图标需要简单。因此，使用臃肿的工具和将所有调整放在图形设计人员手中的工具链毫无意义，只有他们才能通过返回到某个“Illustrator”文件来进行调整。设计师需要提高水平，用 SVG 正确地设计图标，使用 SVG 原语，而不是他们昂贵的苹果电脑和昂贵的 Adobe 软件所输出的任何东西。
这听起来像是在抱怨，但是可访问性也应该适用于程序员，将图像称为“资产”并使用专有格式，这些格式只能由上过艺术学校的人编辑，这违背了可访问性。
图标也应该在 CSS 中作为数据 URL。查看 Lea Verou 的 CSS 秘密，了解如何做到这一点。这种方法的优点是只需要下载一个样式表。此外，图标是按钮和链接的装饰，而不是内容。现代浏览器支持伪元素，以这种方式加载图标不是黑客行为。文档也可以更干净。图标集不需要进行样式设置，如果使用内联 SVG，就可以进行样式设置。
当 SVG 是内容时，例如说明、图表等，那么内联方法具有优势 - 无需补充下载、能够使用和重复使用符号、动画、样式等。对于没有 JavaScript 的用户，这些可以作为图像加载，如果有 JavaScript，则可以内联。还有其他策略，实际上，在决定使用内联、内联 CSS、外部或 JavaScript 内联之前，需要跳出工具链思考，考虑哪些对可访问性、下载速度等最有利。
另一个关于最小化、绿色网页设计的观点 - mod_pagespeed。它可以压缩文档，删除空白、注释和大量其他无用内容，例如当元素不需要时，属性周围的引号。
然而，mod_pagespeed 最大的好处是它允许客户端/内容创建者简单地上传图像，以便为 src_set 图像生成。这些 src_set 图像适用于设备，因此你的 4K 游戏台式机将获得与 iPhone 上的人不同的图像。这样节省的带宽非常大。它还避免了在 Adobe 产品中进行调整以获得据说经过优化的图像，也避免了必须使用第三方以付费方式进行优化。
图像也应该从无 cookie 的静态域提供，并正确设置缓存设置，同样使用服务工作者帮助提供本地存储/缓存中可用的内容。
总之，这场辩论已经开始，我认为“绿色网页设计”需要与“响应式设计”一样，成为一个可销售的流行词。也许可以举办比赛，看谁可以用最少的字节来提供“完整的 WordPress”或其他 CMS。
非常感谢你，M S。这个评论简直太棒了。我衷心接受你的批评，并且几乎完全同意你的观点。
实际上，我并没有制作那个 logo，我是从 The Noun Project 获得的（我意识到我应该在某个地方注明这一点！）。不幸的是，我的艺术技能意味着我几乎无法在 Inkscape 中设计一个图标，更不用说手工编写代码了。但是，你确实引起了我的兴趣，我一定会深入研究手工编写 SVG 的基础知识。你能够将它的大小缩减到原来的三分之一，这让我大开眼界。
我认为 The Noun Project 是一个很棒的资源，我向所有在上面分享图标的设计师致敬。但是同样，看到更多的人接受手工在文本编辑器中制作 SVG 的好处将是一件很棒的事情。
另外，感谢你让我重新关注 PageSpeed 模块。我一直略知一二，但是几年来并没有真正仔细研究过它们的用途。我也不知道有一个 Nginx 模块，这对我来说更方便，因为我通常在我的设置中不使用 Apache。
曾经有一个名为“Frank”的主题被开发出来，用于减少数据库查询。你应该也提到 WordPress 的后端。好文章，代表全世界感谢你。
很棒的工作 - 这让我思考... - 我也喜欢你网站上的常见问题解答部分。非常棒的内容。
这真的很酷！既然你用我们作为例子，如果你好奇的话，这个网站 速度非常快，就在惠灵顿。
感谢你，Jack，感谢你的辛勤工作和这篇帖子。在我职业生涯的早期，我编写了嵌入式 C 代码，其中每个字节对于性能和大小都至关重要。根据需要，使用汇编来优化性能。在长时间的疾病康复期间，我自学了网页开发，并做了一些自由职业。现在快退休了，我重新审视了网页开发，看看在我不在的时候发生了哪些酷的事情。我通过例子学得最快，无论是好的例子还是坏的例子，因此我一直都在看各种网站的 CSS/JS/HTML 代码。
我惊呆了，发现很少有网站会压缩 CSS 和 JS。很多甚至不删除注释。可能很少有人会使用 gzip。这些技术几乎从互联网诞生之初就被支持。正如你指出的那样，这不仅关乎最佳性能，还关乎环境可持续性。
并非要挑剔或贬低每个人在开发 WP 方面所做出的努力，但是它在服务器端和客户端都有极其臃肿的代码。我担心它已经发展到“每个人都有点，但谁也没有”的状态。更快的互联网和计算机的发展，让我们开发人员变得粗心大意和懒惰。我们需要编写干净、精简的代码，而不是更快的计算机。不幸的是，其中一些原因是由于经济压力和限制开发人员的截止日期。
为此，我一直在为自己的 WP 博客网站开发一个主题，而不是尝试使用现有的主题。我从空白主题开始。你启发我重新开始使用 _s 主题并像你一样进行修剪。我还计划尝试无服务器和 FaaS 方法，因为这些方法似乎更有效率和环保。
这篇文章中唯一缺少的是移动设备上电池使用量的额外好处。
随着所有膨胀，以及如今前端渲染而不是服务器端渲染，移动设备的电池使用量受到很大影响。
好文章！
谢谢，很高兴看到今天臃肿的网络上的优化努力。我的网站的自定义主题在 <1s 内可读（3G 上为 2s），不需要 JS，只需无依赖性增强。问候。
真是一个有趣的想法！很棒的文章，我发现了一些新的有用信息可以带给我的客户。谢谢。
我们人类很难成为好的倾听者。在我们同伴甚至说完一句话之前，我们通常就在想我们的回应。放心吧，你的大多数读者都对你在这方面的工作印象深刻。我们完全理解你的意图，最重要的是让我们思考！
我曾经非常生气，因为速度测试会告诉我优化一张图片，这样我就可以节省 12kb！我很好奇我要投入多少小时和卡路里才能获得 100% 的分数？每次谷歌更改 SEO 算法，我们浪费了多少工时？这会给我们的经济带来什么拖累？
一旦我理解了“渲染阻塞资源”和其他所有术语，它就变得更容易，而且有点有趣，可以看看一个网站可以加载得有多快。将用电量纳入等式应该有助于解释性能的重要性。
只有我遇到过这样的人吗？当我建议他们的网站应该优化时，他们就像我卖蛇油一样。似乎我与之交谈的大约四分之一的人立即认为这是一种噱头。