如何衡量网站速度优化的影响

Question

给予：

• 你有一个机会清单*，这可能改善你的网站的速度指标。例如，总阻塞时间(TBT)是一个严重影响访问者体验的指标。
• 您已经运行了灯塔(或任何其他速度测试工具)，它告诉您每个机会的“估计节省”。
• 你没有足够的时间去弥补每一个机会，所以你需要把它缩小到一些。

*一些机会的例子是预加载图像，减少未使用的javascript，在WebP中提供图像而不是png和jpg，减少未使用的css，避免遗留javascript。灯塔告诉你具体的脚本，文件等，为每个机会。

在Chrome浏览器中，您将如何衡量生产过程中特定机会的实际寿命节省？

例如，如果删除脚本x，如何使用前后度量度量这对总阻塞时间的影响程度？

基本上，所以我可以说“我采取了这个行动，这是该行动对现场速度的直接影响”。

注意:我在堆栈溢出问题上提出了同样的问题，但我认为它可能过于宽泛和面向方法，这就是我来这里的原因。

Answer 1

没有神奇的解决办法。

• 您可以选择一个度量和相应的度量方法。
• 你收集基线指标。
• 您实现了优化。
• 你收集最新的指标。
• 如果不值得的话，您可以比较这些指标并恢复更改。

谷歌灯塔是一个非常好的工具，收集某些指标。

您正确地担心，许多更改可能太小，无法单独进行重大更改。例如，删除一个未使用的脚本可能无法产生任何可测量的效果。您可以用统计数据(大量的测量，然后执行统计测试)来响应这个问题，或者执行更大的优化活动，这样就可以观察到更大的效果。与其删除一个脚本，不如在执行优化类之前/之后进行度量。

通常不可能事先知道哪种优化是最好的。你必须在这里运用你的专业判断。但是，优化最多可以节省完全消除任务的时间，特别是如果此任务是关键路径的一部分。灯塔确实使用这样的测量来估计从某些节省中可能节省的最大限度。您可以使用它来确定优化思想的优先级。

不执行一些建议的优化也是可以的。你的时间是有限的和宝贵的。追逐最后一毫秒的延迟可能不是对你时间的明智利用。相反，一个可以节省100毫秒的改变将是明显的，不会被随机噪音掩盖--而且许多网站确实有充分的改进机会。

例如，灯塔以6.2秒的时间在移动上的交互式软件工程站点的首页评分，并估计通过避免像jquery.min.js这样的渲染阻塞资源被请求，大约可以节省1秒。原来，以前从CDN加载资源的最佳实践已经不再是HTTP/2和缓存分区时代的最佳实践。