使用 WebPageTest 进行性能分析

已发表: 2021-05-19

一个快速的网站现在是绝对必须的。在移动时代，对于住院消费者而言，缓慢的网站可能是您的业务兴旺或失败之间的区别。那么，您究竟如何测试您的网站的速度，以及如何确定可能会减慢网站速度的任何问题？

在本文中，我们将介绍一个名为 WebPageTest 的流行工具。此测量工具提供了大量详细的统计数据和数据，可用于从性能角度确定您网站中可以改进的区域。然而，提供的信息量之多可能有点压倒性。不用担心……我们将逐步分解如何使用 WebPageTest，以便清楚如何充分利用这个免费工具。

WebPageTest 入门

首先，前往webpagetest.org 开始。布局非常清晰，您会立即看到一个框，您可以在其中输入您的网站网址。

一开始您可以选择……您是使用默认的“高级测试”选项卡还是前往“简单测试”选项卡？好吧，简单测试功能非常适合快速浏览您的网站，但在本文中，我们将查看高级测试选项卡。

高级测试设置

向下滚动页面，您将看到一个测试位置下拉菜单。这是不言自明的。您要选择的位置是最接近目标受众所在位置的位置。如果他们位于澳大利亚，那么在英国伦敦进行测试就没有多大意义。本练习的目的是了解我们的网站如何为用户提供服务。

有很多位置，但有些位置以用于测试的浏览器的形式提供了比其他位置更多的测试选项。同样，您想尝试选择一个可能被您的目标受众使用的产品。要查看访问您网站的浏览器的一些统计信息，您可以使用 Google Analytics 等工具。

您可以选择的其他非常酷的设置是连接等。因此，这将是最终用户的设备连接到互联网的方式。单击“连接”旁边的下拉菜单，您将看到包含 3G 连接（慢速或快速）的选项。这真的很简洁，因为它让您对您的受众将如何体验您的网站有一种真实的感觉。

另一个非常有用的设置是“重复查看”选项。启用此选项意味着站点将在首次加载后重新测试，这有助于显示您在站点上启用的任何缓存的影响。

您可能想要探索大量更高级的选项。对于我们大多数人来说，除非您真正深入地测试您的网站，否则上述设置就足够了。对于那些想要了解更多关于可用的真正细节设置的人，请查看 WebPageTest 文档。

记下您更改的任何设置。重要的是，在测试和优化阶段，您要继续使用相同的设置重新测试，否则您将扭曲您获得的结果。准备好后，点击“开始测试”按钮，然后坐下来等待结果（通常需要大约一分钟）。

第一个屏幕

在此示例中，我们使用了 Apple 的网站 (apple.com)，并通过来自英国伦敦的快速 3G 连接对其进行了测试。初步结果如下所示：

看看右上角，您会看到 7 个彩色框，它们提供了页面执行情况的初始“提醒”概述。让我们来看看这些是什么。

方框 1 – 安全评分

这是 WebPageTest 最近提供的一项功能，它实际上是与 Snyk 的集成，可以深入了解网站的安全性。如果您单击彩色框，您将被带到 synk.io 网站，其中包含从安全角度对相关网站的详细分析。特别值得注意的是在客户端和服务器之间交换的 HTTP 安全标头，以定义通信的安全细节。最重要的是 Strict-Transport-Security、Content-Security-Policy、X-Frame-Options。

如果您的网站缺少任何重要的安全标头，您将在 Synk 网站上收到通知。

方框 2 – 第一个字节时间

第二个框提供第一个字节时间（也称为第一个字节时间或 TTFB）。这是服务器将第一个数据字节响应回客户端请求所用的时间。理想情况下，您的目标是低于 300 毫秒。此值与服务器更相关，与呈现网站文件所消耗的时间无关。例如，它可能会受到慢速 DNS 服务器或缓存不足的影响。

此时请务必注意，如果您启用了缓存，则应重新运行网页测试，以便测量缓存的内容。事实上，建议您至少运行 3 次测试，以确保结果完全反映您网站上的缓存内容。

第一个字节时间是三个值的总和：发送 HTTP 请求所需的时间、服务器处理的时间和服务器需要将第一个字节发送回客户端的时间。您可以通过单击框获得更多详细信息：

正如我们所看到的，Apple 网站在测试的这个特定部分中表现不佳。

建立此连接后，即可开始交付资源。 TTFB 缓慢的最常见原因是网络问题、Web 服务器配置、可能的服务器磁盘 I/O 和 RAM 问题。

方框 3 – 保持活力

“Keep-alive Enabled”框显示了 keep-alive HTTP 标头的状态。启用此标头后，将使用同一连接传输数据，否则必须为每个需要传输的文件创建一个新连接。 Keep-alive 在大多数情况下默认启用，通常是服务器端设置。如果您需要自己启用它，您可以编辑您的.htaccess文件并插入下面的代码

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

方框 4 – 压缩传输

Compress Transfer 值表示 Gzip 压缩的状态。这是一种用于实时压缩和稍后解压缩静态文件的技术。这样，由于文件大小减小，传输时间会减少。如果您的服务器提供商默认不应用此技术，您可以通过为每种类型的文件指定相应的规则来自己执行，如下所示：

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

同样，单击相关的彩色框将带您进入详细的概述部分，这样您就可以看到您的网站上到底发生了什么。

方框 5 – 压缩图像

压缩图像框是相当不言自明的。单击它，它将向您显示可以更好地压缩哪些图像。

在这种情况下，WebPageTest 已经确定了它认为可以成功压缩的三个图像，从而进一步节省了 54kb 的无需传输的数据。这听起来可能并不多，但在移动设备上，您可以节省的每一 kb 确实会有所作为。

图像是静态内容中最占用空间的方面。压缩它们是绝对必须的。 WebPageTest 分析可以轻松识别哪些图像可能会降低您的网站速度，因此需要注意。

方框 6 – 缓存静态内容

如果您点击“缓存静态内容”框，您将被带到名为“利用浏览器缓存静态资产”的详细部分。

您的开发人员或管理员可以通过使用正确的 HTTP 标头指示 Web 浏览器何时缓存资源、何时不缓存资源以及缓存多长时间来利用浏览器缓存。您可以在我们的文章“浏览器缓存如何工作？”中找到有关浏览器缓存的更多详细信息。您还可以在此处了解 Pressidium 如何实现浏览器缓存。

框 7 – CDN 的有效使用

如果您的用户群在地理上分散，那么 CDN（或内容交付网络）非常值得使用。例如，如果您的所有客户都位于伦敦，并且您的主机服务器也位于伦敦，那么使用 CDN 可能没有多大意义。但是，如果您的用户在地理上更加多样化，那么 CDN 可以通过将您的网站副本放置在离他们更近的服务器上，从而对这些用户的网站性能产生巨大影响。

如果您使用的是 CDN，那么 WebPageTest 将查看它的工作效率。

性能结果

让我们从性能结果开始看更多数据，您将在摘要选项卡的顶部看到这些数据。

在性能结果中，我们可以看到最重要的概述，例如首字节时间、速度指数（显示页面可见部分的平均时间）、用于测量视觉稳定性的累积布局偏移 (CLS)、消耗的时间直到文档完全加载和更多。

瀑布景观

在性能结果的正下方，我们可以看到每次运行的瀑布视图。如果您单击其中任何一个，您将被定向到包含瀑布格式运行的完整详细信息的页面。

您将获得网站每项资产的所有性能统计数据。它们的颜色不同，因此更容易区分它们。如果您单击其中任何一个，则会打开一个弹出窗口，其中提供更多详细信息。

瀑布视图是页面的可视化表示以及到达组件的加载方式。这使我们能够轻松识别任何可能减慢速度的组件。能够看到瓶颈在哪里是非常有帮助的，这意味着我们可以通过精确定位来解决问题，而不必猜测。

连接视图

连接视图板也是一个非常有用的功能，因为它允许您通过直观地总结浏览器和服务器之间连接的措施来非常容易地识别 Web 性能问题。

您可以直接从 DNS、初始连接、SSL 协商到视频资源等内容查看连接状态。在此下方，还有一个图表，描绘了正在加载网站的设备上的 CPU 使用率。还有一个带宽指示器显示数据渲染期间使用的级别。

请求详情

最后，在连接视图下方，您会看到另外两个分析板——请求详细信息和请求标头。

请求详细信息板非常有用，它列出了请求的每个资源以及与该请求相关的数据，例如内容类型、请求开始时间、下载的字节数等等。该表实际上是可排序的……只需单击列标题即可按该特定列排序。

请求标头板提供（是的，您猜对了）请求资源列表以及标头信息。单击每个以获取完整详细信息。

结论

如果您需要深入分析您网站的活动，WebPageTest 是一个非常棒的工具。即使您没有深入研究它提供的信息，您也可以快速了解您的网站是否运行良好，以及是否需要更仔细地查看它的性能。最重要的是，它是免费的！