我们如何通过 3 项不同寻常的改变将网站性能提高 24%

上周末，我们有机会对一年前建立的网站的性能进行微调。

SwissDevJobs.ch是一个面向在瑞士寻找工作机会的软件开发人员的招聘平台。其表现之所以如此重要，有两个原因：

1. 良好的用户体验——意味着加载时间（变得可交互）和使用网站时的流畅感。

2. SEO——我们的流量很大程度上依赖于谷歌搜索，而且您可能知道，谷歌青睐性能良好的网站（他们甚至在搜索控制台中引入了速度报告）。

如果您搜索“网站性能基础知识”，您将获得许多可操作的要点，例如：

• 使用 CDN（内容分发网络）来缓存静态资产，并设置合理的缓存时间
• 优化图像尺寸和格式
• 使用 GZIP 或 Brotli 压缩
• 减少非关键 JS 和 CSS 代码的大小

我们实现了大部分唾手可得的功能。
此外，由于我们的主页本质上是一个可过滤列表（用 React 编写），我们引入了react-window，这样每次只渲染 10 个列表项，而不是 250 个。

所有这些都帮助我们大大提高了性能，但从速度报告来看，我们感觉可以做得更好。

于是，我们开始探索一些更不寻常的方法来提高速度……结果相当成功！以下是本周的报告：

这份报告显示，满载时间减少了24%！

我们做了什么来实现它？

1. 对 JSON 数据使用 rel="preload"
   

   index.html 文件中的这一行简单代码向浏览器表明，它应该在 JavaScript 的 AJAX/fetch 调用实际请求它之前获取它。

   当需要数据时，它会从浏览器缓存中读取，而不是重新加载。这帮助我们节省了约 0.5 秒的加载时间。

   我们之前就想实现这个功能，但之前 Chrome 浏览器出现了一些问题，导致重复下载。现在看来可以了。

2. 在服务器端实现超级简单的缓存

   实施 JSON 预加载后，我们发现下载作业列表仍然是瓶颈（从服务器获取响应大约需要 0.8 秒）。因此，我们决定研究服务器端缓存。首先，我们尝试了node-cache，但令人惊讶的是，它并没有改善获取时间。

   值得一提的是，/api/jobs 端点是一个简单的 getAll 端点，因此改进的空间很小。

   然而，我们决定更深入地研究，用一个 JS 变量构建了我们自己的简单缓存。它如下所示：

   

   这里唯一不可见的是删除缓存的 POST /jobs 端点（cachedJobs = undefined）

   就这么简单！又节省了0.4秒的加载时间！

3. 最后，我们查看了加载的 CSS 和 JS 包的大小。我们注意到“font-awesome”包的大小超过了 70kb。

   同时，我们仅使用了大约 20% 的图标。

   我们是怎么做到的？我们使用了 icomoon.io 来选择图标，并创建了我们自己的自托管精简图标包。

   节省了 50kb！

这三项不同寻常的改进帮助我们将网站的加载时间提高了 24%。或者，正如其他一些报告显示的那样，提高了 43%（至 1.2 秒）。

我们对这些变化非常满意。不过，我们相信我们可以做得更好！

如果您有自己的、不寻常的技巧可以提供帮助 - 我们将非常感激您在评论中分享它们！