作者 | 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%的图标。
我们是如何处理的？我们通过icomoon.io选择了须要利用的图标，并创建了自定义的精简图标包。
因此，节省了50kb！
以上三种不屈常的技巧帮助我们将网站的加载韶光缩短了24%。乃至有报告显示，网站的加载韶光降落了43％（降落至1-2秒）。
目前我们对这些提升感到非常满意。但是，我们相信我们可以做得更好！
如果你知道其他不屈常的技巧可以供应帮助，那么敬请不才方的评论中留言！
原文：https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unusual-changes-9ei
本文为 CSDN 翻译，转载请注明来源出处。
【End】
