传统网站性能优化的三种手段

点选下方红色“流程猿DD”，优先选择“标为隆哥蒙”

天然资源

传统网站性能优化的三种手段

对控制技术人来说，操控性强化是三个世世代代维持不变的热门话题。而随著架构、词汇、库等辅助工具的急速重构，现代的强化方式与否依然适用于？在控制技术创新的自然环境下，又有什么样极为死路的强化方式？在责任编辑中，翻译者将以两年前的中文网站为试验第一类，试著了新一代的四种方式，有效地将中文网站操控性提升了 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文件中加入的这一行0.5秒的加载时间。本来他们可以早点实现那个技巧，但是Chrome浏览器中曾经有一些问题导致重复下载。不过如今看来已经改好了。2. 在服务器端实现超级简单的缓存在实现JSON预加载后，他们发现下载职位值得一提的是/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

传统网站性能优化的三种手段