WebPageTest网站测速工具深入浅出图文教程

每个网站都应该尽可能快地加载。然而，要实现良好的网站性能，需要你一直处于领先地位。这意味着监测网站的性能，做出改变以改善它，并确保每个页面都能提供尽可能好的用户体验。

WebPageTest可以帮助你做到这一点。有了这个工具，你可以对你网站上的任何页面进行速度测试。测试报告包括关于你可以做哪些改变来提高性能的信息，以及历史数据，以了解你的网站是否比以前做得更好或更差。所有这些信息都是免费提供的。

在这篇文章中，我们将仔细研究WebPageTest，以及你如何能从中受益。我们还将向你展示如何运行测试和解释结果，讨论使用该工具的优点和缺点，并谈论价格问题。

1. 什么是WebPageTest？
2. 为什么要使用WebPageTest？
3. 如何使用WebPageTest
4. 如何解释WebPageTest的结果
5. 您是否应该使用WebPageTest？
6. WebPageTest的定价
7. WebPageTest与其他网站速度测试工具的比较

什么是WebPageTest？

WebPageTest是一个功能强大的开源工具，旨在帮助网站所有者和开发人员监控和优化其网站的性能：

WebPageTest

它提供了一个全面的分析，包括加载时间、渲染速度和网络使用。你还会得到单个页面元素的详细分类，使你能够确定瓶颈和需要改进的地方。

WebPageTest于2008年推出，是最古老的网站性能测试服务之一。在开始时，它是AOL内部的一个测试工具（是的，它有那么老）。

不久之后，WebPageTest以开源许可的形式发布。2011年，该服务的网站启动了。

从那时起，它已经扩大了其工具集。现在，它还提供了移动测试和一个API，使你能够将测试与你自己的项目相结合。

WebPageTest的主要特点：

• 来自世界各地不同地点的模拟测试
• 支持各种浏览器，包括Chrome、Firefox和Safari
• 分析网页的渲染和加载过程，包括瀑布图和胶片图
• 可定制的测试设置，如连接速度和屏幕分辨率
• 高级指标，包括速度指数（Speed Index）、首字节加载时间（TTFB）和首次内容绘制（FCP）

你可以免费使用WebPageTest。该服务提供了一个免费层级，使你能够每月运行数百次测试并获得详细的结果。

为什么要使用WebPageTest？

有很多网站性能服务可用。其中许多是免费的，你得到的数据在很大程度上取决于你使用什么服务。

然而，WebPageTest提供了比普通工具多得多的好处。让我们看一下其中的一些：

• 识别性能问题。WebPageTest帮助你发现潜在的瓶颈和需要改进的地方，使你能够对你的网站进行有针对性的优化。
• 改善用户体验。加载速度快的网站可提供更好的用户体验，从而提高访客参与度和转化率。如果你的网站加载速度快，访客可能不会注意到，但如果速度慢，他们会注意到。
• 提升搜索引擎的排名。网站速度是谷歌等搜索引擎的一个排名因素，更快的网站往往在搜索结果中排名更高。
• 随着时间的推移监测性能。通过 WebPageTest 的定期测试，您可以跟踪性能趋势，并在它们成为主要问题之前确定任何回归。你可以使用免费计划监测一年多的性能数据，这对发现趋势来说是足够的。

此外，WebPageTest以一种清晰的方式展示结果。如果你是性能测试和优化领域的新手，这一点是非常有价值的：

WebPageTest的性能总结

在这些简短的总结之上，你会得到一些与你的网站性能有关的硬数字。在下一节中，我们将告诉你如何解释这些结果。

我们相信，每个人都应该使用页面性能测试和监测工具。如果你对你的网站做了大的改动，如设计和功能的更新或迁移到一个新的主机上，这就特别重要。运行定期测试和其他优化策略，如使用内容交付网络（CDN），将有助于保持你的网站处于最佳状态。

如何使用WebPageTest

使用WebPageTest运行测试很简单。首先，你需要注册一个免费账户，这不需要你输入支付信息。

一旦你登录了，回到主页，寻找 “Start a site performance test” 选项。输入你要测试的页面的URL，并选择一个配置：

在WebPageTest上启动一个测试

为了获得最全面的结果，我们建议同时进行移动和桌面测试。另外，你要使用离你的网站服务器最近的测试地点，这样结果就不会因为距离而有所偏差。

如果默认地点中没有一个适用于你的测试，请选择Advanced Configuration选项。这将使你能够从其他测试地点中进行选择并输入高级参数：

配置你的设置

当你对配置感到满意时，点击Start Test.。结果将需要几秒钟的时间来生成，一旦生成，你就可以获得一份详细的性能报告。

如何解释WebPageTest的结果

像WebPageTest这样的工具的最大问题之一是，在你运行测试后，它们会向你抛出很多信息。如果你知道要关注哪些指标，这并不是一个问题。然而，如果你是第一次使用该服务，它可能会让你感到害怕。

当涉及到解释结果时，我们建议你专注于WebPageTest报告的三个关键领域。首先是Performance Summary部分，它提供了你的网站结果的概述。它将向你展示你的网站在性能、可用性和弹性方面的情况：

Opportunities and Experiments

你可以点击每个类别下面的图标来查看更多信息。每个类别都将包括关于被测试的元素和结果的细节。如果网站有问题，报告会提到是什么元素造成的，并提供如何修复它的建议：

Largest Contentful Paint

一旦你返回到主报告页面，向下滚动到Page Performance Metrics（页面性能指标）部分。在这里，你会发现几个指标，显示你的网站需要多长时间来加载和成为功能：

页面性能指标

如果你不确定这些指标中的每一个意味着什么，这里有一个快速的细分：

• Time to First Byte (TTFB)。这个指标衡量网站对浏览器的初始请求作出反应所需的时间。缓慢的服务器可能需要一段时间来响应，这将增加网站的整体加载时间。
• 开始渲染。 这告诉你页面开始显示视觉元素需要多长时间。网站可能在后台加载，但直到用户看到一些东西，他们可能不知道页面是否正常工作。
• First Contentful Paint (FCP)。 这是浏览器渲染页面上第一块内容所需的时间。FCP越低，表明网站的加载速度越快。
• Speed index。 一个综合得分，代表用户看到页面内容的速度。分数越低，越好。
• Largest Contentful Paint (LCP)。 这个指标告诉你渲染一个页面上最大的元素需要多长时间。它通常是页面整体加载时间的一个好指标。
• Cumulative Layout Shift (CLS)。 这个分数告诉你一个页面的布局在加载时的 “偏移” 或变化程度。变化越大，用户体验就越差。零是你在这里应该争取的数字。
• Total blocking time。 通过这个指标，你可以看到在页面变得可用之前需要多长时间。它可能已经完成了视觉上的渲染，但页面可能在后台加载脚本，这使得访问者无法使用它。

接着，”Real-World Usage Metrics” 部分显示了与其他用户最近的测试数据（如果有的话）相比较的相同指标的概况。为了全面了解你的网站的性能，我们建议你将这些指标与前面的Page Performance Metrics部分进行比较。

理想情况下，后者的结果应该是相似或更好：

真实用户使用指标

最后，我们建议你查看瀑布图，它显示了页面上每个元素的加载过程。这可以帮助你识别导致延迟的特定资源，或者可以优化以提高性能。

一旦你确定了需要改进的地方，你就可以对你的网站进行有针对性的修改，比如优化图片，最小化CSS和JavaScript文件，或者实施缓存。

您是否应该使用WebPageTest？

如果你有一个网站，你会想定期进行性能测试，以确保它提供一个良好的用户体验。你可以使用你喜欢的任何性能工具，但让我们看看为什么我们推荐WebPageTest的原因。

为了全面了解情况，我们还将谈谈使用该服务的缺点。

WebPageTest的优点

• 全面的分析。WebPageTest提供有关您的网站性能的详细信息，使您更容易确定需要改进的地方。
• 可定制的测试。该工具支持各种浏览器、位置和测试设置，使您能够模拟不同的用户体验。你可以随心所欲地定制测试设置，如果你想快速浏览，也可以使用该服务提供的默认选项。
• 免费和开放源代码。我们是开源软件的大粉丝，所以这是使用WebPageTest的一个优点。虽然该服务提供了一个高级层，但免费计划对大多数网站来说是绰绰有余的。
• 历史性能数据。通过WebPageTest，你可以访问你使用该服务的任何网站的13个月的测试数据。这对于监测大多数网站的性能趋势来说是绰绰有余的信息。
• 性能改进建议。WebPageTest根据它在您的网站上检测到的问题，提供建议或 “机会 “来提高网站性能。这些建议包括解释为什么每个变化都是重要的。

WebPageTest的缺点

• 需要注册。尽管WebPageTest提供了一个全面的免费计划，但你必须注册该服务以运行测试。然而，在注册过程中，该服务不会要求你提供付款信息。
• 学习曲线。WebPageTest提供了大量的数据，这对于刚接触网络性能优化的用户来说，可能会感到不知所措。然而，与其他类似工具相比，WebPageTest的学习曲线要宽松得多。
• 有限的自动化。虽然可以通过其API将WebPageTest自动化，但与其他一些具有内置自动化功能的工具相比，它可能需要额外的设置和编码知识。
  没有关于性能改进的说明。这在网站性能测试工具中有些常见。使用WebPageTest，你可以直接得到关于改善网站性能的机会的建议。然而，这些建议并不附带如何
• 实施它们的说明。这意味着你需要对一些主题进行研究，如如何延迟加载阻塞渲染的JavaScript或其他高级技术主题。

WebPageTest的定价

WebPageTest提供免费和高级两种计划。免费计划使你能够每月运行慷慨的300个测试。此外，该平台为免费和高级用户存储13个月的测试数据：

定价模式

就福利而言，高级计划用户可以进行更多的测试。如果服务处于饱和状态（这并不常见），你也会得到优先权。此外，如果你想获得WebPageTest的API访问权，你需要支付一个高级计划。

WebPageTest与其他网站速度测试工具的比较

正如我们前面提到的，网站速度测试工具有很多其他选择。两个最受欢迎的WebPageTest替代品是谷歌PageSpeed Insights和Pingdom工具。

让我们来看看WebPageTest与这两个选项的对比情况。

Google PageSpeed Insights

该工具由谷歌开发，提供了一个简单的性能评分，并提供具体的优化建议。与WebPageTest相比，其结果也同样详细。

然而，WebPageTest在每次运行时对每个页面进行多次检查。此外，它使你能够运行自定义测试，这是PageSpeed Insights所不具备的功能。

Pingdom工具

如果你想用一个体面的服务器选择来运行快速测试，这个工具是完美的。与PageSpeed Insights或WebPageTest不同，Pingdom不提供对改进机会或你的网站问题的深入分析。相反，你会通过数字得到你的网站性能的概述，这可能是你不时需要的全部。

根据我们的经验，你可以通过使用不同的工具进行定期测试来获得最佳的性能结果。然而，如果你要使用单一的服务，与PageSpeed Insights和Pingdom Tools等替代品相比，WebPageTest可以提供最全面的结果。

小结

如果你想保持你的网站运行在最佳状态，监测性能是必不可少的。这意味着要定期进行速度测试，并采取措施来改善加载时间。

虽然有很多工具可以用来监测页面性能，但我们推荐WebPageTest。该服务是免费使用的，而且它提供了深入的报告。此外，你可以存储长达13个月的测试数据，这意味着你可以得到你的网站在一段时间内的性能概况。

原文地址：https://www.wbolt.com/webpagetest.html