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

WBOLT_COM 5 月 15, 2023 2.7k+ 0

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

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

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

什么是WebPageTest？
为什么要使用WebPageTest？
如何使用WebPageTest
如何解释WebPageTest的结果
您是否应该使用WebPageTest？
WebPageTest的定价
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或其他高级技术主题。