当前位置: 首页> 优化经验> 网站性能优化的度量
网站性能优化的度量
发布日期:2020-05-16 08:00:00

当你很快摆脱困境,并遵循在线性能优化教程时,你会感到自满,认为网站加载速度必须比以前更快。但真的是这样吗?

当我们谈到性能优化时,我们常常过于关注哪些措施可以使性能更好,例如压缩和混淆CSS/JS、缓存静态资源等等,但是这些操作真的有效吗?你如何确保这些行动是有效的?

我可以打开浏览器控制台,直接查看网络选项卡。

你看,这个资源请求比以前快了1秒!!!

它看起来不稳定,快和慢,但它可以快到2秒!!!小明这样说。

是的,当你在浏览器开发工具中打开网络来检查网络速度时,你会发现资源确实更快了,但是真正的用户感觉更快了吗?此更改对用户有什么可见的影响?此资源加载速度更快。其他资源呢?它减速了吗?

毕竟,性能优化不是工程师的私利问题,而是真正为最终用户着想的问题。

的确,开发人员工具打开自己的浏览器可以作为各种资源下载的衡量标准,但单用户和单次的衡量标准无法达到我们需要的精度。

因此,您需要对多个用户、多个网络环境甚至多个地理环境进行多次时间测量,以获得相对准确的结果。这种测试通常被称为综合测试。

别被这门外语吓坏了。事实上,无论你如何找到一台机器访问你的网站,记录一些数据,甚至录制一段视频。然后你拿着数据开始分析你的网站。为了提高数据的准确性,市场上的综合业务通常允许您设置多个节点。例如,你可以在东亚建立四个节点,即北京、日本、香港和新加坡,定期进行数据统计。它可以在每天12点的深夜测试5次。当然,您可以选择不同的操作系统和浏览器环境,以便于分析不同的浏览器数据。

您可以看到一个典型的测试结果,它将告诉您网站的加载时间是多少秒,speedindex是多少等等。右上角也有一些分数。您可以查看自己的综合情况等,此外,您还可以自定义性能测试机的地理位置和浏览器类型。

当然,除了pagespeedtest,还有一个工具你可能听说过。它叫灯塔。和网页测试一样,它也是一种综合测试。除了一些绩效指标的结果外,还可以看到一些改进建议,非常方便。

这两个工具已经足够强大了,但是您可能正在考虑如何使持续的性能测试自动化。一方面,您可以使用这两个工具对应的API来构建自己的速度测量节点。这要求您在不同的位置有多个服务器。当然,也有现成的服务可以直接使用,比如speedcurve。

综上所述,综合测试是一种比较成熟的性能优化方案。这是否意味着我们可以通过合成测试取得成功?

综合测试通常由网站所有者来衡量,它在固定的时间点模拟固定的屏幕大小、操作系统和浏览器类型。有可能你的网站在你所报道的综合测试中表现良好,但事实上,在遥远的新西兰,IE用户打开你的网站需要一分钟以上的时间。这就是真实用户数据测量(RUM)的含义,帮助您了解网站在真实用户体验中的表现。

rum的工作原理是在你的网站中插入一个短脚本,当有真正的用户浏览你的网站时运行,通过JavaScript收集用户浏览器、操作系统、页面加载时间等相关信息。如果你使用过像谷歌分析这样的数据分析工具,原理基本上是一样的。

在我们了解了这两种性能测试方法之后,下一步就是要知道在性能测试中应该重点关注哪些关键指标。

在讨论重要指标之前,让我们先看看浏览器的加载过程。

在上图中,navigationstart表示浏览器已收到跳转到网页的请求。可能是您在地址栏中输入了一个链接并按回车键,也可能是您单击了要跳转的链接。从该事件开始,浏览器将尝试解析DNS。服务器接收到相应数据库查询或相关操作的请求,并返回HTML。

在这个过程中,一个重要的指标是ttfb。

也就是说,从NavigationStart开始,浏览器接收到第一个字节,这意味着第一个请求所需的DNS和HTTPS握手已经结束,并且后端已经完成了相应的操作并返回了相应的HTML。如果ttfb的数据不理想,通常意味着你的后台应用需要优化,这可能是为了让网站静态化,降低数据库压力,也可能是数据库查询的瓶颈。更多的问题需要像newrelic这样的专业工具来分析。

浏览器收到第一个字节后的下一个重要里程碑是startrender。

我们知道有很多因素阻止浏览器在加载过程中呈现,例如嵌入在头标记中的脚本(没有async/defer标记),或者您的CSS文件太大而无法加载。startrender指示器指示用户现在可以看到一些内容加载,而不是纯白色屏幕。

接下来你可能想关注的是我看到了内容,所以我可以互动吗?例如,单击某些按钮、滑动以查看图片等。如果网站没有得到很好的优化,您可能会看到内容,但单击页面上的按钮不起作用。此时,我们需要注意第一个cpuidle索引。

一般来说,浏览器使用主线进行页面布局、垃圾收集、解析和JS执行。如果您的JS文件很大,需要大量的CPU时间来解析,那么这个指示器可以很好地显示这个问题。此时,您可能需要减小JS文件的大小,删除无用的CSS/JS等。

除上述三项指标外,还有许多其他指标。不同的指标类型表示不同的问题。但是,我建议您在开始其他指标之前,应该熟悉并计算以上三个指标。

大家都相信平均值的计算方法是清楚的。中值是总样本的1/2处的性能数据。第95个百分位数是如何计算的?

95%值是对数据进行排序并找出95%的数据。通常,这些数据是整个数据集底部的数据。它不仅可以帮助你扩大问题,还可以让你体验用户组中最“弱”的用户体验(可能是设备性能不好或网络不好)。如果您能保持这个值相对稳定和优化,它基本上表示您的系统具有更好的稳定性和性能。

并不是每一次系统优化都会带来很大的改进,就像当系统出错时,你可能不会失去所有。

在阅读CSAPP一书时,我读到了一个定理,即系统性能的优化取决于系统的重要性和改进程度。例如:

页面加载最初需要10秒,CSS解析需要2秒。

您已经做了一些优化,也就是说,CSS的解析时间减少了一半,但是页面加载速度没有增加一半。显然,网页的优化加载速度是:

因此,当您尝试优化系统时,可以选择占用系统最长时间的部分。如果此部分已优化到最后,请更改为优化的一部分。因为加载网页的时间是10秒,所以在没有网站的情况下,CSS解析时间只能优化2秒。

在线咨询 电话咨询