只需三种手段，将传统的网站的性能提高 24%！

只需三种手段，将传统的网站的性能提高 24%！

对于技术人而言，性能优化是一个亘古稳定的话题。而随着框架、说话、库等工具的不竭演进，传统的优化手段能否仍然适用？在创新的情况之下，又有哪些较为捷径的优化手段？在本文中，作者将以一年前的网站为测试工具，尝试了最新的三种手段，有用地将网站性能进步了 24%，接下来，我们将一探讨竟。

作者 | SwissGreg

译者 | 弯月，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

上周末，我们提升了一年之前构建的一个网站的性能。

我们的这个网站是为瑞士的软件开辟职员供给的求职平台，该网站的性能很是重要，缘由有以下两个：

杰出的用户体验：既包括网站的加载时候（以及与用户交互时候），也包括利用该网站时的快速感。SEO：在很洪流平上，我们的流量依靠于Google搜索，而且众所周知Google加倍偏向性能出众的网站（Google甚至在搜索控制台中显现了速度报告）。

假如你在网上搜索“网站性能根本”，就会发现很多小技能，例如：

利用CDN（内容托付收集）供给可以缓存一段时候的静态文件。优化图像尺寸和格式。利用GZIP或Brotli紧缩。削减非关键JS和CSS代码的巨细。

我们实现了很多轻易告竣的方针。

别的，由于我们的主页根基上是一个可过滤的列表（用React编写），所以我们引入了react-window，可以一次只衬着10个列表项（而不是250个）。

上述技能帮助我们极大地进步了性能，但是在检察了速度报告后，感受我们还有进步的空间。

是以，我们起头研讨更多不服常的方式来提升网站的速度，终极我们获得了庞大的成功！这是本周的报告：

这份报告显现，网站的整体加载时候削减了24%！

那末，为了获得这样的功效，我们究竟做了哪些尽力呢？

1. 针对JSON数据采用rel ="preload"

index.html文件中加入的这一行代码可以指示阅读器：在JavaScript挪用AJAX/fetch请求JSON数据前，就应当获得这些数据。

当现实需要利用数据时，便可以从阅读器缓存中读取，而不必再次获得数据。这个技能帮助我们节省了大约0.5秒的加载时候。

原本我们可以早点实现这个技能，可是Chrome阅读器中已经有一些题目致使反复下载。不外现在看来已经改好了。

2. 在办事器端实现超级简单的缓存

在实现JSON预加载后，我们发现下载职位列表仍然是瓶颈（从办事器获得响应大约需要0.8秒）。是以，我们决议研讨办事器真个缓存。首先，我们尝试了节点缓存，可是使人惊奇的是，获得时候并没有收缩。

值得一提的是/api/jobs端点是一个简单的getAll端点，是以没有改良的余地。

可是，我们决议更进一步，经过一个JS变量简单地构建自己的缓存。以下所示：

此处唯一没有列出的是POST /jobs端点，它会删除缓存（cachedJobs =undefined）。

如此简单的一段代码，就削减掉了0.4秒的加载时候！

3. 削减CSS和JS包的巨细

最初我们检察了网页需要加载的CSS和JS包的巨细。我们留意到"font-awesome"这个包的巨细跨越了70kb。

但是，我们仅利用了其中大约20%的图标。

我们是若何处置的？我们经过http://icomoon.io挑选了需要利用的图标，并建立了自界说的精简图标包。

是以，节省了50kb！

以上三种不服常的技能帮助我们将网站的加载时候收缩了24%。甚至有报告显现，网站的加载时候下降了43％（下降至1-2秒）。

今朝我们对这些提升感应很是满足。可是，我们相信我们可以做得更好！

假如你晓得其他不服常的技能可以供给帮助，那末敬请鄙人方的批评中留言！

原文：https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unusual-changes-9ei