本文主要介绍SwissDevJobs网站的优化实践，介绍我们如何将网站加载时间减少24%。上周我们有机会微调SwissDevJobs网站的性能。SwissDevJobs.ch网站性能的提升主要有两个原因：良好的用户体验——即更短的加载时间（和更好的交互性）和使用乐趣；搜索引擎优化-我们的流量严重依赖谷歌搜索，您可能知道谷歌偏爱性能良好的网站（谷歌甚至在SearchConsole中引入了速度报告）。当你搜索“网站性能基础”时，你会得到很多建议，比如：对静态资源使用CDN，配置合理的缓存时间；优化图像大小和格式；使用Gzip或Brotli压缩；减少非关键的JS和CSS代码大小。针对以上建议，我们做了一些改进。此外，由于我们的主页基本上是一个可过滤的列表（用React编写），我们引入了react-window来一次呈现10个列表项而不是250个。所有这些都帮助我们极大地提高了网站性能，但从速度来看报告，我们可以做得更好。所以我们开始研究更不寻常的方法来使网站更快......到目前为止，我们已经非常成功了！这是本周的报告：该报告显示完整加载时间减少了24%！我们如何做到这一点？1.对JSON数据使用rel="preload"index.html文件中的这个简单代码向浏览器指示应该在该资源实际被AJAX或来自JavaScript的Fetch调用请求之前获取它。当需要获取数据时，它会从浏览器缓存中读取，而不是重新获取。这帮助我们将加载时间减少了大约0.5秒。我们长期以来一直想实现这一点，但过去曾遇到过Chrome导致双重下载的问题。现在它工作正常。2.在服务器端实现超简单的缓存。实现JSON预加载后，我们发现job列表的下载仍然是瓶颈（等待0.8s得到服务器响应）。因此，我们决定从服务器端缓存入手。首先，我们尝试了节点缓存，但令人惊讶的是，它并没有优化获取时间。值得一提的是，/api/jobs接口是一个简单的GetAll接口，所以没有太大的优化空间。所以我们决定使用JS变量构建我们自己的简单缓存。看起来像这样：这里唯一没有显示的是post/jobs接口，它删除了所有缓存（cachedJobs=undefined）。就这么简单！另一个0.4秒的卸载时间！3.删除不必要的字体最后一点是我们加载的CSS和JS包的大小。我们注意到非必要的font-awesome文件超过70KB。同时，我们可能只使用20%的图标。如何解决这个问题呢？我们使用icomoon.io选择要使用的图标，然后创建我们精简的图标包。结果呢？节省了50KB！这3个不寻常的变化帮助我们将网站的加载时间加快了24%。或者，如其他一些报告所示，加速了43%（最高1.2秒）。我们对这些变化感到满意。但是，我们认为仍有优化空间。如果您有不寻常的技术可以帮助我们-请告诉我们！4.加分在应用上述优化后，我们注意到瓶颈仍然是获取/api/jobs接口和下载初始HTML的时间。这样做的原因是初始HTML和此API由位于欧洲的单点服务器提供。我们寻找可行的解决方案并决定在服务器级别缓存所有内容。使用Cloudflare，默认情况下仅缓存静态资源。但是，可以通过添加一个简单的页面规则来缓存任何页面或资源：这允许我们的网站直接由Cloudflare的CDN提供服务，甚至不需要访问服务器。结果呢？全球加载时间减少50%！现在，您可能对缓存初始HTML和动态API的想法持怀疑态度，但考虑一下：首先，我们的界面不会经常更改——每天一次分批添加新作业；其次，我们以编程方式清除缓存。这使我们能够在不到1秒的时间内为世界任何地方的SwissDevJobs提供服务！5.作者介绍SwissGreg，白天是程序员，晚上是独立黑客——SwissDevJobs.ch。
