目录
在衡量网站性能时，GTmetrix 是 PageSpeed Insights 的最佳替代品之一。
在 WP Rocket，我们每天都使用 GTmetrix 以及其他性能测试工具来帮助我们的客户审核他们的网站并充分利用其建议。
虽然 PageSpeed 主要关注颜色和分数来指导用户完成其推荐，但 GTmetrix 依靠更经典的界面，其中它的瀑布起着主导作用。
多个自定义选项（测试服务器区域、浏览器类型等）使 GTmetrix 的体验完整可靠。
在本教程中，我们将深入研究 GTmetrix，您将了解为什么它是评估网站真实性能的非常有效的工具。
什么是 GTmetrix，它是如何工作的？
GTmetrix 是由位于加拿大温哥华的托管公司 GT.net 的人构建的免费性能测试工具。他们提供专用、集群和私有云托管解决方案，以及专用于性能的特定工具集：其中包括 GTmetrix。
在使用 GTmetrix 运行性能测试之前，我们建议做的第一件事是创建一个免费帐户。
这允许您自定义测试并获得更可靠的性能结果。
如何自定义您的 GTmetrix 测试？
您可以调整多个选项，以使用 GTmetrix 自定义您的测试体验。让我们一起看看它们。
位置（测试区域）
有 30 个测试服务器可供试用。正如我们在关于如何正确测量网站速度的文章中提到的，获得可靠速度测试结果的第一步是选择一个尽可能靠近您的服务器的位置。
这意味着，如果您的服务器位于欧洲，那么从加拿大测试您的速度会给您带来误导性的结果，除非您也针对加拿大受众。在这种情况下，请不要忘记在您的站点上启用 CDN！
您可以在此处找到 GTmetrix 服务器的位置。
浏览器
您可以选择：
- Firefox 桌面版
- Chrome 桌面版
- Android 版 Chrome （Galaxy Nexus）
连接
现在 Google 已经切换到移动优先索引，了解您的网站在不同类型网络上的表现至关重要。
GTmetrix 为您提供了多种可能性：
- 不受限制的连接
- 宽带（慢速、快速和正常）
- 3G 移动版
- 2G 移动
- LTE 移动版
- 56K 拨号
广告拦截器
使用此选项，您可以查看 Ads 对您网站的影响。当您勾选 AdBlock 选项时，GTmetrix 将在广告被阻止时扫描您的 URL。
您可以在 GTmetrix 的网站上查看真实案例，他们在那里使用了 Smashing Magazine 网站。
Stop Test Onload
这将在 Onload 事件之后立即停止速度测试，而不是在网络处于非活动状态 2 秒后（这是 GTmetrix 的默认设置，称为 Full loaded time）停止。
Onload 事件是指页面的整体处理结束，并且页面的所有资源都已下载。
使用此选项的不便之处在于，有时，在 Onload 事件触发之前，并非会下载页面的所有元素（请考虑基于 JavaScript 的图像轮播或类似行为）
因此，启用此选项时测量的页面加载时间可能不一致。
这就是为什么默认情况下，GTmetrix 会考虑 Full loaded 时间测试您的网站：它等待 Onload 事件触发（包括广告和非首屏元素），然后等待网络不活动 2 秒。
重要的是要考虑到，网站可以在比 Full loaded 时间所指示的更短的时间内完全可用。
创建视频
如果您想查看页面的确切加载情况，可以启用 视频 选项。
GTmetrix 将录制一个视频，您将在其中看到您的页面加载速度慢了 4 倍，因此更容易检测到最终的加载问题。
如何阅读 GTmetrix 选项卡并解释其结果
启动 GTmetrix 报告后，您将看到有关您网站性能的所有信息。
首先，您有所选测试选项的摘要：
GTmetrix 的好处是它允许您查看多种类型的指标，包括来自其他测试工具（如 PageSpeed 和 Yslow）的指标。
这就是为什么您会在左侧看到外部性能分数（GTmetrix 不计算自己的分数），在右侧看到页面详细信息：
页面详细信息是您可以获得的有关网站性能的最重要和最直接的信息：
- 满载时间，以秒为单位
- 总页面大小（以 MB 为单位）
- HTTP 请求数
这是了解您网站表现的良好开端。
正如我们在关于 WordPress 页面速度优化的指南中所解释的那样，不同的速度工具可以提供不同的加载时间或性能结果。
当查看 GTmetrix 的选项卡时，这个声明立即变得清晰起来。
以下是 PageSpeed 选项卡中的建议列表：
以下是同一网站在 YSlow 选项卡下的得分：
深入了解 GTmetrix 瀑布图
要深入了解您网站性能的细节，您必须单击第三个选项卡并阅读 GTmetrix 的瀑布图。
瀑布图通过剖析每个请求并测量其时间来描述页面的加载行为。
它包含测试页面中包含的每个脚本、媒体文件或外部资源。
此选项卡对于了解页面加载的资源和顺序非常有用。
对于每个请求，您都有其加载时间，由水平条表示：条形越长，请求下载/执行的速度越慢。
GTmetrix 瀑布图包括五列;从左到右：
- 所请求资源的文件名;
- 从服务器返回该资源的 HTTP 响应状态;
- File Origin，即资源的来源;
- 每个资源的文件大小;
- Load Time Breakdown，表示下载/执行每个资源所需的时间。
如果将鼠标悬停在文件名上，您将能够读取所选文件的完整路径。如果你 Ctrl + 单击它，你可以在另一个选项卡中打开文件，以更好地识别它并查看其内容。
由于您使用的是 WordPress，因此很容易理解该文件是否来自您正在使用的插件或主题之一。
此时，您面前有一幅非常清晰的图片，说明您的网站运行情况如何。
在继续 加载时间细分 部分，请留意第四列， 文件大小.
如果您发现此处的文件大小较大，请记下该文件并尝试修复它：它们是图像还是视频？在这种情况下，请查看我们的综合指南 如何优化图像 并减小其文件大小.
加载时间细分
GTmetrix 设计的颜色代码有助于区分每个资源加载过程的不同部分。
将鼠标悬停在每个资源的加载时间栏上将打开一个弹出窗口，其中资源加载过程的不同阶段以不同的颜色表示：
- 棕色表示阻塞
- 用于 DNS 查找的 Teal
- 绿色表示连接
- 红色表示发送
- 紫色表示等待
- 灰色表示接收
除了请求执行的每个阶段的相对时间外，GTmetrix 还指示事件计时，即达到某些里程碑的特定时间。
活动时间也有一个颜色代码：
- 一条绿线表示页面上开始第一次渲染的时刻（第一次绘制);
- 蓝线表示浏览器认为 DOM 准备就绪的时刻。
- 红线是 Onload，即页面及其所有组件已下载并由浏览器处理的时间。
- 使用紫色线条，我们可以看到 Fully loaded 事件：Onload 已触发，并且 2 秒内没有任何网络活动。
其中一些行也显示在下一个 GTmetrix 选项卡中，标记为 Timing。
Timings 选项卡
这个选项卡非常有用，因为它清晰直观地解释了页面加载时间被分割的不同时刻。
在上图中，您可以看到其中包含的信息。您将指示最终重定向所需的时间、连接和后端持续时间。然后，您将能够看到 Time to First Bytes 需要多长时间，然后是 DOM 交互时间、First Paint、Contentful Paint、DOM loaded 和 Onload。
我们最喜欢这个标签的地方是 GTmetrix 团队如何花时间用通俗易懂的英语解释每个指标的含义。
对于了解复杂的页面加载过程非常有用！
任何 GTmetrix 报告的最后两个选项卡都是 Video 和 History。
第一个视频记录了页面加载的视频（包括瓶颈），而第二个视频则显示了同一测试页面的性能历史记录。
结束语
在本文中，您了解了 GTmetrix，这是最好的性能测试工具之一，您可以将其用作 PageSpeed Insights 的替代（或与一起）使用。
GTmetrix 的优点在于它不仅提供速度和性能的即时指标（如以秒为单位的加载时间和分数），还提供一套全面的选项卡供您探索：从瀑布图到事件计时，再到计时选项卡，以及一系列关于性能指标的精彩见解和解释。
现在是时候继续了解其他性能测试工具以及如何使用它们了：
发表回复