如何使用Chrome开发人员工具或Firebug可靠地跟踪实际页面加载时间？

Question

我正在尝试使用chrome开发人员工具优化Magento网站来分析页面加载时间。目标是在接下来的15天内构建一份报告，以跟踪页面加载时间的改进。但问题是每次加载页面时，开发人员工具记录的加载时间不同，例如目前它在5到9秒之间变化。

我对如何可靠地测量页面加载时间感到困惑？我知道我的网页有一些外部内容，这是这种变化的主要原因。但是我如何忽略这些变化并确定实际的加载时间，以便我确信我实际上正在优化这个东西？

以下是两个连续F5的截图。

Answer 1

首先，您应该在读取数据时禁用缓存，因为如果Chrome只需要从缓存加载资源，加载时间就会减少。请参阅我的回答here。

其次，通过导出HAR，您将获得更准确的读数。您可以通过右键单击并选择＆＃34;另存为内容和＃34;如下所示：

您将获得更准确，更详细的个人请求数据。只需在文本编辑器中打开生成的*.har文件，然后查看JSON。

＆＃34;真实＆＃34;加载时间包括外部请求。您可以过滤掉面板中显示的请求，例如，按域。见Network Advanced Filter。

以下使用BBC新闻网站的示例，通过右键单击标题并选择列名称，我在面板中添加了“域”列。在过滤条中，我添加了domain:www.bbc.co.uk，其中显示了对该域的所有请求。您也可以尝试使用＆＃34;远程地址＆＃34;并根据它对网格进行排序。

您将获得所需的所有数据。这只是挖掘你想要的东西的问题。

重要提示：总转移时间不会因过滤器而发生变化。您需要在面板中总结总计，其中包括舍入（不准确）或使用未舍入的HAR值（更准确）。

有关详细信息，请查看Evaluating Network Performance。