佛山高端建站：如何提高网站性能可以帮助拯救地球

2019.08.13 mf_web

116

您可能不会经常考虑它，但互联网使用了大量的电力。这种电需要在某个地方生产。在大多数国家，这意味着燃烧化石燃料。反过来，这意味着互联网的碳足迹已经发展到可能使全球航空旅行黯然失色的程度，这使得互联网成为地球上最大的燃煤机器。

在Mozilla的互联网健康报告2018指出-尤其是互联网扩展到新的领域- “可持续发展应该是一个更大的优先权”，但因为它的立场，网站的成长越来越肥胖，这意味着互联网的能源需求将继续成倍增长。

与此同时，气候变化的影响每年都会变得越来越严重。绝大多数气候科学家将全球极端天气事件的凶猛和频率日益增加归因于气候变化，而气候变化主要归因于人类活动。虽然有些人质疑科学，但即使是世界上最大的石油公司现在都接受它，并承认他们的商业模式需要改变。

地球上的每个国家（美国除外）都签署了巴黎气候协议。虽然美国有争议地退出，但美国最有影响力的个人，城市，州和公司 - 占美国人口和经济的一半以上 - 通过美国的承诺倡议保留了对协议的承诺。

作为Web开发人员，可以理解这不是我们有任何影响的问题，但事实并非如此。正在进行许多努力以改善网络状况。绿色网络基金会拥有一个不断增长的网络主机数据库，这些网络主机完全由可再生能源提供动力，或至少致力于碳中和。2013年，A List Apart出版了James Christie的可持续网页设计。在过去三年中，可持续发展论坛会议见证了网络可持续发展专家在一系列基于网络的学科中分享他们的知识。

自2009年以来，绿色和平组织一直在向大型互联网公司施压，要求他们通过点击清洁活动来清理他们的能源结构。部分由于此次活动，谷歌去年宣布，它首次购买足够的可再生能源，以满足其全球运营消耗的100％。

佛山高端建站因此，除了为可再生能源服务器供电外，网络开发者还能做些什么来应对气候变化？

“你无法管理你无法衡量的东西”

在使网站更具可持续性方面，最大的胜利可能是性能，用户体验和可持续性都巧妙地交织在一起。衡量数字产品可持续性的关键指标是能源使用。这包括服务器，客户端和在两者之间传输数据的中间通信网络所做的工作。

考虑到这一点，或许首先要考虑的是我们如何衡量网站的能源使用情况？这实际上比你想象的要复杂，而且很难在这里得到精确的数据。然而，我们可以使用一些良好的后备来证明能源使用。这些包括数据传输（即浏览器必须下载多少数据来显示您的网站）以及服务和接收网站的硬件的资源使用情况。这里一个明显的指标是CPU使用率，但内存使用和其他形式的数据存储也发挥了作用。

数据传输是我们可以轻松测量的一件事。所有主流浏览器都提供允许我们测量网络活动的开发人员工具。例如，在下面的屏幕截图中，我们可以看到首次加载Smashing Magazine网站只会导致数兆字节的数据传输。Firefox的开发人员工具实际上为我们提供了两个数字：第一个是已传输文件的未压缩大小，后者是压缩大小。

压缩资产在网络中传输时最常用的工具是gzip，因此这两个数字之间的差异通常是gzip工作的结果。后一个数字代表实际传输的数据量，是值得关注的数据。

注意：还有很多其他工具可以为我们提供数据传输指标，包括备受推崇的WebPagetest。

为了测量CPU使用率，Chrome为我们提供了一个精细的任务管理器，可显示各个选项卡的内存占用量，CPU使用率和网络活动。对于更具冒险性/技术性，top（进程表）命令在大多数类Unix操作系统（如macOS和Ubuntu）上提供类似的度量标准。一般来说，我们也可以在我们有shell访问权限的任何服务器上运行top命令。

幸运的是，像WebsiteCarbon和Ecograder这样的努力试图将这些指标转化为特定的二氧化碳数字（在WebsiteCarbon的情况下）或得分（在Ecograder的情况下）。

可持续网页设计

现在我们知道如何衡量我们网站的影响，是时候考虑如何优化事物，使其更具可持续性，更高性能，并且通常是更好的使用体验。

我们可以借鉴一些现有的作品来帮助我们。2016年，O'Reilly出版了Tim Frick的“ Designing For Sustainability ”。在这本书中，蒂姆带我们参观了可持续设计的原因和方法。但我们也可以利用大量现有的想法，会议讲座和文章 - 虽然没有明确关注可持续性 - 但与可持续网页设计的理念有很大的重叠。这里特别好的例子是Brad Frost的侧面项目，“ Death To Bullshit ”，Heydon Pickering的文章以及关于编写较少该代码的文章，以及Adam Silver的博客文章“ Designing For Actual Performance”。

如果我们正在对网站进行全面的重新设计，或者从头开始新的网站，我们可以从这里开始提出一些非常高级的问题。例如，实际上应该或需要在主页上做什么？更具体地说，主页上的每个元素带来了什么价值？正如Heydon Pickering所说：

“网站中性能最高，易于访问且易于维护的功能是您首先没有做到的。”

我在WordPress.com VIP团队工作，所以在这方面，我决定通过整合一个极简主义的WordPress主题来挑战自己，看看我能走多远的可持续网页设计技术。结果是一个名为Susty的主题，它可以在我放在一起的随附网站上看到：sustywp.com。在该特定示例中，该网站以超过6KB的数据传输进行交付，考虑到中位数网站大约1.5MB，这感觉很好。

那么，我做了什么？好吧，我会告诉你的。

减少网络请求

如上所述，网络请求是我们可以轻松测量的，因此它们是一个很好的起点。在将Susty放在一起时，我注意到有许多HTTP请求正在进行，似乎没有必要。例如，WordPress捆绑了一些检测emojis使用情况的CSS和JavaScript，并确保它们不会显示为非法字符。这没有什么本质上的错误，但是如果你不打算使用表情符号，或者你很高兴并且确信各种系统默认设置都能满足你的要求，你就可以防止加载这些错误。

这代表了相对微薄的节省，但通过建立从我们的页面修剪不需要的代码和请求的理念，我们可以进行更显着的性能改进。例如：

我们是否为一些基本的DOM操作加载了整个jQuery？
我们能用纯JavaScript达到同样的目的吗？你可以在Jeremy Wagner的这篇文章中阅读更多高级死代码消除（又名树摇动）。
我们有旋转木马的图像吗？
我们真的需要所有这些图像吗？它们是否显着增强了用户体验？或者我们可以将它减少到只有一个强大的形象吗？或者甚至随机显示一个选择的图像，给回归用户一种活力感？顺便说一下，这里所做的研究表明，大多数用户既不喜欢也不喜欢旋转木马。
如果我们使用大量图像，那么我们是否会因为支持它的浏览器使用WebP格式提供图像而受益？
在最长的时间里，WebP的支持令人沮丧地受到限制。但是由于Firefox 65版本（将于2019年1月到期）开始支持它，因此像Safari这样的漫游人员赶上来只是时间问题。
我们是否加载了数百KB的网络字体？
我们使用的是我们正在加载的所有网络字体吗？我们甚至需要网络字体吗？现在大多数设备都有一堆半正常的字体，我们可以指定一个我们希望按优先顺序排列的字体列表吗？如果我们必须使用网络字体，我们应该确保我们的字体尽可能高效。
我们是否正在嵌入YouTube视频？
嵌入式YouTube视频通常会在任何人与之交互之前增加大约1兆字节的数据传输。如果我们的用户中只有一小部分用户真正坐下来观看我们网站上的嵌入式视频，那么我们可以直接链接到它吗？

仔细检查一切

在这种情况下，我们也可以查询我们页面的每个方面。什么真不愧是那里？我们的侧边栏是否添加了任何真正的价值，或者我们只是将其放在那里因为惯例规定网站有侧边栏？所以，我们添加了一个并用垃圾填充。

通过Susty，我尝试了一种将导航降级到自己页面的非常规的方法。这允许我将页面拆开为字面上的基本要素，其他内容仅在用户的显式请求中加载。Susty是如此轻量级和如此之快，以至于我通过一些用户研究（也就是我的伙伴）意识到菜单的加载并不像一个新页面，所以我决定让它看起来像一个叠加层，带有十字架解雇实际上只是带你回到上一页。

除了帮助我创建令人愉悦的轻量级页面，降级导航还消除了任何花哨的隐藏/显示代码以显示它的需要。在这一点上，我想说清楚，Susty是将可持续网页设计技术推向极致的一个例子（我不是说它是一个好网站的原型）。

像你的祖母一样写CSS

当涉及到严重的性能提升时，我们应该记住，字面上每个代码字符都很重要。每个字符代表一个字节，即使在它们被gzip压缩之后，它们仍然在承受重量。CSS是一个我们经常看到很多膨胀的领域。幸运的是，越来越多的日益复杂的工具可以帮助您清除未使用的CSS。Sarah Dayan的精彩帖子概述了她如何将CSS捆绑从259KB减少到9KB！

如果我们从头开始，也许我们应该更深入地思考如何编写CSS。Heydon Pickering 写了一篇很棒的文章，讲述了我们如何以一种能够发挥语法设计优势的方式编写CSS，以及它如何帮助开发人员防止重复。Heydon还指出了在HTML和CSS中过度使用div和类会造成多少浪费。

你在分析什么？

在网络上似乎已经或多或少地普遍存在，每个人都可以通过Google Analytics，KISSmetrics，Piwik等工具分析他们网站的访问者所做的事情。虽然我毫不怀疑有合法的用例，我们真的需要在每个网站上进行分析？例如，我通常会将Google Analytics添加到我管理的每个网站中。但最近我突然意识到，对于大多数网站来说，这几乎是毫无意义的努力：“哦，今天有六个人通过Facebook来到这个帖子。”谁在乎呢？

除非你真的需要它，并且你要分析数据并对数据采取行动，否则只需放弃分析并找到一种更好的方式来花时间，而不是嘲笑今天有多少人访问过网站X.

除了增加您的网页权重之外，Google Analytics（分析）等内容的使用会针对您代表Google收集的用户数据提出道德问题，即Google为您免费提供Google Analytics（分析）的原因。

让我们不要忘记基础知识

关于以下内容，这些天有太多的信息，但我们永远不应该自满而忘记它们。除了以上所有内容之外，我们绝对应该始终缩小HTML，CSS和JavaScript，并在适当的地方进行连接。我们还应压缩所有图像以确保它们尽可能小，在正确的设置中使用正确的格式，并使用渐进式渲染。

服务器端性能

到目前为止，我们的重点几乎完全放在前端，但如果我们不在服务器端优化事物，那么很多事情就变得无关紧要了。我已经提过了几次，但我们绝对应该始终启用gzip压缩。

我们应该尽可能地为我们的服务器提供服务。我主要使用Nginx，我特别喜欢FastCGI缓存，并且发现它特别有效。如果你有自己服务器的shell访问权限，这里有一篇文章解释了如何配置它。如果您没有（或不希望）对服务器进行尽可能多的控制，那么技术选项就会减少。WordPress空间中特别喜欢的是WP Super Cache。

我们应该通过HTTPS使用HTTP2。使用HTTPS打开了一个新的Web技术世界，如服务工作者，这使我们可以将网络本身视为一个有用的东西。如果你想了解更多相关信息，我强烈推荐Jeremy Keith的新书“ Going Offline”。

注意：您还可能需要调查适用于Apache和Nginx的Google的PageSpeed模块。

最后，我们可以在这里产生的最大影响是将我们的网站托管在由可再生能源驱动的数据中心。在英国，我强烈推荐Krystal和Kualo与我直接托管我网站的公司有关。（有关绿色Web主机的完整目录，请查看绿色Web基金会。）