注册
软件工具

深入了解GTmetrix速度测试工具

WBOLT_COM
6.5k+
0

深入了解GTmetrix速度测试工具

作为网站所有者，在运行速度测试以检查性能时，您有很多选择。之前我们深入了解了Pingdom工具。今天我们想深入探讨如何更好地使用和理解来自流行的网站速度测试工具GTmetrix的数据。像这样的工具依赖于评分系统和分数，以及您网站上可能出现的问题的警告。有时这些可能会令人困惑，因此花一些时间来解释它们的实际含义，不仅可以帮助您提高分数，还可以帮助您提高网站的性能，这才是真正重要的。

GTmetrix由位于加拿大的公司GT.net开发，作为其托管客户轻松确定其网站性能的工具。除了Pingdom，它可能是当今网络上最知名和最常用的速度测试工具之一！与其他开发工具相比，GTmetrix非常易于使用，初学者可以很快上手。它结合使用Google PageSpeed Insights和YSlow来生成分数和推荐。

GTmetrix速度测试工具

GTmetrix速度测试工具

GTmetrix分析选项

GTmetrix的基本版本是完全免费的，您只需注册一个帐户即可访问许多选项。他们也有高级计划，但在今天的帖子中，我们将使用免费版本。如果您有一个帐户，您可以使用指定一些额外的分析选项。

第一个是选择要测试URL的位置。您选择的物理位置实际上非常重要，因为它与您的网站实际托管的位置有关。延迟越少，加载时间越快。目前可用的地点包括：

  • 美国达拉斯
  • 中国香港
  • 英国伦敦
  • 印度孟买
  • 悉尼，澳大利亚
  • 巴西圣保罗
  • 加拿大温哥华

您可以选择要使用的浏览器。您可以使用Chrome（桌面）和Firefox（桌面）进行测试。移动版本在其高级计划中可用。它们还允许您更改连接速度，这意味着您可以模拟各种连接类型以查看它们如何影响您的页面加载。

GTmetrix测试格式选项

GTmetrix测试格式选项

其他选项包括创建视频的能力。这可以帮助您调试问题，因为您可以查看页面的呈现方式。AdBlock  Plus是一个不错的功能。如果您正在运行Google Adsense等第三方广告网络，则可以启用此选项以查看广告对加载时间的全部影响。

GTmetrix额外选项

GTmetrix额外选项

其他选项包括停止测试加载（稍后我们将深入探讨）、能够随请求一起发送cookie、使用HTTP身份验证、将URL列入白名单和黑名单的能力、屏幕分辨率和设备像素比以及用户代理覆盖.

使用GTmetrix速度测试工具进行分析

网页由不同的资产组成，例如HTML、JavaScript、CSS和图像。其中每一个都会生成请求以呈现您在网站上看到的内容。通常，您的请求越多，您的网站加载速度就越慢。情况并非总是如此，但大多数时候都是如此。

下面我们将分解每个GTmetrix部分，并更详细地解释这些信息与您网站的整体性能有关的含义以及如何处理这些建议。  记住不要过分关注分数，而要在您的网站上进行实际的速度改进。

GTmetrix概要（性能分数和详细信息）

当您通过GTmetrix运行WordPress网站时，它会生成一份性能报告，其中包括您的“GTmetrix Grade”和“Web Vitals”。

GTmetrix等级是根据两个指标计算得出的——性能和结构。

  • GTmetrix Performance是来自Lighthouse站点审计工具的性能分数
  • GTmetrix Structure是一种专有的性能指标，用于衡量页面的整体性能。

2020年，Google推出了一套标准化的Web性能和用户体验指标，称为Web Vitals。Web Vitals包含多种指标，但GTmetrix考虑的指标是最大内容绘制 (LCP)、总阻塞时间 (TBT) 和累积布局偏移 (CLS)。

  • 最大内容绘制 (LCP)是加载页面最大部分所需的时间。对于某些站点，LCP可以是一个大的Hero图像，而在其他站点上，LCP可能指的是正文。
  • 总阻塞时间 (TBT)是页面在用户与其交互之前被阻塞的时间。阻止渲染的CSS和JS会对TBT产生巨大的影响。
  • 累积布局移位 (CLS)是指在页面加载时元素的移位。例如，包含嵌入式推文的页面布局会随着页面加载而发生巨大变化。

在我们的示例中，我们使用案例研究域kinstalife.com。在我们的第一次速度测试中，我们的网站记录了以下统计数据。

  • GTmetrix等级 – B
  • GTmetrix性能 – 85%
  • GTmetrix结构 – 83%
  • LCP – 1.0s
  • TBT – 0毫秒
  • CLS – 0

kinstalife.com的GTmetrix速度测试

kinstalife.com的GTmetrix速度测试

然后我们进行了额外的测试，现在我们的GTmetrix等级是“A”！那是怎么回事？如果您多次通过GTmetrix速度测试工具运行您的网站，您可能也会注意到这一点。发生这种情况的原因之一是缓存，包括DNS缓存和服务器缓存。在我们的瀑布分析中进一步了解原因。

我们使用GTmetrix进行的第二次速度测试

我们使用GTmetrix进行的第二次速度测试

GTmetrix概要页面还包含速度可视化，显示页面加载期间关键事件的时间线。在下面的屏幕截图中，您可以看到kinstalife.com的TTFB、FCP、LCP、加载时间、交互时间和完全加载时间。

GTmetrix概要页面

在概要页面的底部，还有“热门问题”和“页面详细信息”部分。在“热门问题”下，您可以看到要修复的高优先级项目列表，而“页面详细信息”提供页面的百分比和文件大小细分。

GTmetrix热门问题和页面详细信息

GTmetrix热门问题和页面详细信息

性能

接下来是GTmetrix的“Performance”选项卡，它显示了许多来自Lighthouse性能数据的有用指标。除了摘要页面上显示的LCP、TBT和CLS之外，“性能指标”部分还显示了速度指数 (SI)、交互时间 (TTI) 和首次内容绘制 (FCP)。

GTmetrix Lighthouse性能指标

GTmetrix Lighthouse性能指标

虽然“性能指标”部分没有准确地向您展示您需要修复的内容，但它确实很好地概述了您可以改进哪些关键用户体验指标。

在页面的下方，GTmetrix还显示了一些更传统的“浏览器计时”统计信息，包括加载时间、第一个字节的时间、完全加载的时间等。在过去，这些传统指标非常重要。但是，随着Google为使用Web Vitals的标准化指标铺平道路，我们建议改为针对这些指标进行优化。在大多数情况下，您会发现针对Web Vitals进行优化也会产生良好的浏览器计时指标。

GTmetrix浏览器计时指标

GTmetrix浏览器计时指标

结构

GTmetrix速度测试的“Structure”选项卡是您可以查看影响站点性能的特定问题的地方。此页面非常有用，因为它为您提供了可操作的信息，例如“消除渲染阻塞资源”和“最小化CSS”以开始优化您的网站。

我们将尝试涵盖我们看到WordPress网站所有者苦苦挣扎的最常见和最受欢迎的那些。请务必将此文章添加为书签，因为我们将不断更新它。通常，如果您在您的网站上改进这些，您应该会看到性能的提高。

GTmetrix PageSpeed分数

GTmetrix PageSpeed分数

提供缩放图像

在您的网站上处理图像时，您应该始终尝试将它们上传到缩放，而不是让CSS调整它们的大小。如果你不这样做，你最终会得到服务缩放图像推荐。如果您使用的是WordPress，默认情况下，它会在将图像上传到媒体库时调整图像大小。这些设置可以在“设置 > 媒体”下找到。您需要确保最大宽度接近您网站的宽度。这样，CSS不会尝试将图像大小调整为适合内部。您还可以使用图像优化插件自动调整它们的大小。

提供缩放图像

提供缩放图像

内联小CSS

通常不建议内联CSS，因为它会增加页面请求的整体下载大小。但是，如果您的站点很小，请求最少，它可以提高您的性能。

内联小CSS

内联小CSS

要内联您的CSS，您可以使用像Autoptimize这样的免费插件。只需检查“内联所有CSS？” 选项，然后确保您已排除未内联的其他CSS文件。

自动优化内联CSS

自动优化内联CSS

内联小JavaScript

就像内联小CSS一样，内联小JavaScript也是如此。通常不建议这样做，因为它会增加页面请求的整体下载大小。但是，如果您的站点很小，请求最少，它可以提高您的性能。同样，您可以使用Autooptimize的JavaScript设置。

内联小JavaScript

内联小JavaScript

利用浏览器缓存

利用浏览器缓存是人们难以接受的一个非常常见的建议。这是由于您的Web服务器上没有正确的HTTP缓存标头而生成的。请参阅我们关于如何修复浏览器缓存警告的深入文章。您只能在您控制的资源上解决此问题。例如，如果您在第三方广告网络上看到此内容，则您无能为力。

利用浏览器缓存

利用浏览器缓存

从一致的URL提供资源

如果您从一致的URL看到服务资源，则很可能是从同一 URL 提供了相同的资源。很多时候，当涉及到查询字符串时，就会发生这种情况。查看如何从静态资源中删除查询字符串。一旦它们消失，它应该不再需要加载它两次。

从一致的URL提供资源

从一致的URL提供资源

延迟解析JavaScript

JavaScript和CSS默认是渲染阻塞的。这意味着它们可以阻止网页显示，直到它们被浏览器下载和处理。defer属性告诉浏览器在HTML解析完成之前推迟下载资源。解决此问题的一些简单方法是利用免费的Autoptimize或Async JavaScript插件。请务必查看我们关于如何消除渲染阻塞JavaScript和CSS的深入文章。

延迟解析JavaScript

延迟解析JavaScript

如需深入解释，请阅读：如何在WordPress中延迟解析Javascript警告（4种方法）。

最小化CSS和JavaScript

Minification（最小化）本质上是在不改变其功能的情况下从源代码中删除所有不必要的字符。这可能包括换行符、空格、缩进等。这样做可以节省数据字节并加快下载、解析和执行时间。

最小化CSS和JavaScript

最小化CSS和JavaScript

同样，免费的Autoptimize插件非常适合这个。只需确保选中“Optimize JavaScript Code”和“Optimize CSS Code”即可。如果您有一个大型网站，您可能还想使用下面的高级设置，因为有些可能会损害您网站的性能。通常不建议在大型网站上内联或组合CSS和JavaScript。这就是HTTP/2的力量发挥作用的地方。

自动优化缩小CSS和JavaScript

自动优化缩小CSS和JavaScript

优化图像

根据HTTP Archive的数据，截至2017年4月，图像平均占网页总体积的66%。因此，在优化您的WordPress网站时，图像是您应该首先开始的地方！它比脚本和字体更重要。

深入了解GTmetrix速度测试工具-1

优化图像

在一个完美的世界里，每张图片都应该在上传到WordPress之前进行压缩和优化。但不幸的是，这并不现实。因此，我们建议使用一个好的图像优化插件。这将有助于自动压缩您的图像，调整它们的大小，并确保它们在您的网站上轻量且快速加载。查看我们关于如何优化网络图像的深入文章。

减少初始服务器响应时间

对于WordPress，初始服务器响应时间慢的主要原因是缺少页面缓存。在没有页面缓存的情况下，WordPress使用PHP为每个单独的请求动态构建页面，这意味着它很快就会被请求淹没。启用页面缓存后，您的站点可以服务器预先生成的HTML文件，这比使用PHP来满足每个页面请求要快得多，并且更具可扩展性。

减少初始服务器响应时间

减少初始服务器响应时间

如果您的WordPress主机不支持页面缓存，您可以安装缓存插件，例如WP Rocket或W3 Total Cache。为了进一步减少服务器响应时间，我们建议将Cloudflare APO与您的WordPress站点集成。Cloudflare的这项创新优化服务将您网站的HTML页面分发到世界各地，这可以在全球范围内缩短服务器响应时间。

缩小HTML

就像CSS和JavaScript一样，HTML也可以被缩小以去除不必要的字符并为您节省字节数据以加快执行时间。

缩小HTML

缩小HTML

免费的自动优化插件也非常适合这个。只需启用“Optimize HTML Code”选项即可。

自动优化HTML代码

自动优化HTML代码

启用GZIP压缩

GZIP是一种文件格式和用于文件压缩和解压缩的软件应用程序。GZIP压缩在服务器端启用，并允许进一步减小HTML、样式表和JavaScript文件的大小。它不适用于图像，因为它们已经以不同的方式压缩。由于压缩，有些人已经看到了高达70%的减少。当涉及到WordPress时，这可能是您可以进行的最简单的优化之一。

启用GZIP压缩

启用GZIP压缩

要在Apache中启用GZIP压缩，只需将以下代码添加到您的 .htaccess 文件中。

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

如果您在NGINX上运行，只需将以下内容添加到您的nginx.conf文件中。

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

请务必查看我们关于如何启用GZIP压缩的深入文章。

最小化重定向

最小化从一个URL到另一个URL的HTTP重定向可以减少额外的RTT和用户等待时间。查看我们关于WordPress重定向的文章，其中我们发现2个错误的重定向将网站加载时间增加了58%！简单明了，WordPress重定向会减慢您的网站速度。这就是为什么值得花时间尽量减少重定向到您网站体验的访问者数量的原因。

最小化重定向

最小化重定向

指定缓存验证器

当缺少HTTP缓存标头时，会出现指定缓存验证器建议。这些应该包含在每个源服务器响应中，因为它们都验证和设置缓存的长度。如果没有找到标头，它将每次都为资源生成一个新请求，这会增加服务器的负载。 利用缓存标头可确保 不必从服务器加载后续请求，从而为用户节省带宽并提高性能。请记住，您无法在您无法控制的第3方资源上解决此问题。

指定缓存验证器

指定缓存验证器

有许多不同的HTTP缓存标头可用于修复此建议。查看我们关于如何指定缓存验证器的深入文章。

指定图像尺寸

就像您不应该让CSS调整图像大小一样，您也应该指定图像尺寸。这意味着在HTML代码中包含宽度和高度。

不正确

<img src="https://domain.com/images/image1.png">

正确的

<img src="https://domain.com/images/image1.png">

指定图像尺寸

指定图像尺寸

从静态资源中删除查询字符串

您的CSS和JavaScript文件通常在其URL的末尾包含文件版本，例如domain.com/style .css?ver=4.6。即使存在cache-control:public标头，某些服务器和代理服务器也无法缓存查询字符串。因此，通过删除它们，您有时可以改善缓存。这可以通过代码或免费的WordPress插件轻松完成。

查看我们关于如何从静态资源中删除查询字符串的深入文章。请记住，您无法在您无法控制的第3方资源上解决此问题。

从静态资源中删除查询字符串

从静态资源中删除查询字符串

指定Vary: Accept-Encoding标头

这是一个HTTP标头，应该包含在每个源服务器响应中，因为它告诉浏览器客户端是否可以处理内容的压缩版本。通常，当启用GZIP压缩时，这也是固定的。但请务必查看我们关于如何修复指定变化的深入文章：接受编码标头 推荐。同样，您无法在第三方资源上解决此问题。

指定一个变量：接受编码标头

指定一个变量：接受编码标头

GTmetrix瀑布图

GTmetrix瀑布图显示您网页上的所有单个请求（如下所示）。然后，您可以分析每个请求，以查看导致站点延迟和性能问题的原因。下面是对每种颜色在每个请求中的含义的更深入的总结和/或定义。

GTmetrix瀑布图

GTmetrix瀑布图

阻塞（棕色）

当浏览器加载网页时，JavaScript和CSS资源通常会阻止网页显示，直到它们被浏览器下载和处理。此时间延迟在GTmetrix瀑布图中显示为阻塞。查看我们关于如何消除阻塞渲染的JavaScript和CSS的深入文章以 获取更多信息。

深入了解GTmetrix速度测试工具-1

阻塞

DNS Lookup（蓝绿色）

您可以将DNS查找视为电话簿。有称为域名服务器的服务器保存有关您的网站的信息以及应将其路由到哪个IP。当您第一次通过GTmetrix运行您的网站时，它会执行新的查找，并且必须查询DNS记录以获取IP信息。这会导致一些额外的查找时间。

DNS Lookup

当您第二次通过GTmetrix运行您的网站时，它会缓存DNS，因为它已经知道IP信息并且不必再次执行查找。这就是为什么您可能会喜欢您的网站在多次通过GTmetrix运行后看起来更快的原因之一。正如您在下面的屏幕中看到的，在我们运行的第二次测试中，初始DOC负载的DNS查找时间为0毫秒。这是很多人误解的一个领域！我们建议您多次运行测试并取平均值，除非您希望DNS作为报告的一部分，在这种情况下您可以进行第一次测试。

第二次DNS查询

第二次DNS查询

如果您使用的是CDN，这同样适用于您的资产（JavaScript、CSS、图像）。CDN缓存的工作方式与DNS非常相似，一旦缓存，它在连续加载时会快得多。另一个加快DNS速度的技巧是使用DNS预取。这允许浏览器在后台对页面执行DNS查找。您可以通过在WordPress网站的标题中添加一些代码行来实现。请参阅下面的一些示例。

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

或者，如果您正在运行WordPress 4.6或更高版本，您可能需要使用资源提示。开发人员可以使用wp_resource_hints过滤器为 、 或 . 添加自定义域名和URL的dns-prefetch、 preconnect、 prefetchL和 prerender。

连接（绿色）

GTmetrix中的连接时间是指TCP连接，或创建TCP连接所需的总时间。您实际上并不需要了解它是如何工作的，但这只是主机/客户端和服务器之间必须发生的一种通信方法。

连接

连接

发送（红色）

发送时间只是网络浏览器向服务器发送数据所花费的时间。

发送

发送

等待（紫色）

GTmetrix中的等待时间实际上是指到第一个字节的时间，在某些工具中也称为TTFB。TTFB是一种衡量Web服务器或其他网络资源响应能力的指标。一般来说，任何低于100毫秒的时间都是可以接受的，并且TTFB很好。如果您接近300-400毫秒的范围，您的服务器上可能有一些错误配置，或者可能是时候升级到更好的Web堆栈了。正如您在下面的测试中看到的那样，它大约是100毫秒，这很棒。

等待

等待

一些减少TTFB的简单方法是确保您的主机有适当的缓存并使用CDN。查看我们关于在您的WordPress网站上减少TTFB的所有方法的深入文章。

接收（灰色）

接收时间只是网络浏览器从服务器接收数据所花费的时间。

接收

接收

活动时间

每次您请求一个页面时，它都有渲染和加载事物的事件时间。

  • 首次绘制（绿线）：浏览器在页面上进行任何类型渲染的第一个点，例如显示背景颜色。
  • DOM 加载（蓝线）： DOM（文档对象模型）准备就绪的点。
  • Onload（红线）： 当页面的处理完成并且页面上的所有资源（图片、CSS等）都下载完成时。
  • 完全加载（紫线）：  Onload事件触发后的点，并且2秒内没有网络活动。

活动时间

活动时间

HTTP响应标头

您还可以单击单个请求，查看他们所说的HTTP响应标头。这提供了有价值的信息。在下面的屏幕中，我们可以立即看到诸如gzip在Web服务器上启用，它在HHVM上运行，它正在从缓存中提供服务（HIT，否则会显示MISS），缓存控制标头，服务器架构（这个并不总是可见的），过期标头，浏览器用户代理等等。

GTmetrix中的HTTP响应标头

GTmetrix中的HTTP响应标头

需要注意的另一件事是GTmetrix 工具确实支持HTTP/2，这与Pingdom不同，因为它目前使Chrome 58+来运行其测试。Chrome在版本49中添加了HTTP/2支持。因此，在选择要使用的速度测试工具时请记住。

视频

为了帮助您调试视觉故障和前端性能问题，最新版本的GTmetrix包含一个“Video”选项卡。启用视频功能后，GTmetrix将自动录制一个可嵌入的视频，显示每个性能测试的页面加载方式。此功能对于调试仅出现在某些浏览器和屏幕尺寸组合上的视觉问题非常有用。

GTmetrix视频录制

GTmetrix视频录制

历史

在历史选项卡下，您可以查看所有过去的速度测试。免费帐户中存储的数量是有限制的。您还可以监控一个URL，该URL允许您跟踪一段时间内的性能，并在它们发生时查看任何更改。

历史

历史

一个非常酷的功能是您可以选择过去的报告并并排比较它们。这可能非常有用，尤其是当您在网站上进行优化以查看是否有改进时。请记住，有时您也可以过度优化。

在GTmetrix中比较报告

在GTmetrix中比较报告

案例研究域配置

如果您在我们深入的GTmetrix潜水中得到了这么多，那么您就可以享受美食了。看到人们分享技巧和案例研究，但又不分享他们是如何到达那里的，总是很烦人。所以下面是我们对上面使用的案例研究域的确切配置！随意复制它。

架构

  • 案例研究域 (perfmatters.io) 托管在Google Cloud Platform上（中心位置），使用HTTP/2、NGINX、MariaDB，这些都有助于加快加载时间。
  • 该站点正在使用HHVM。
  • 该站点未使用任何缓存插件。

WordPress插件

这是WordPress网站上使用的插件列表。

小结

如您所见，了解GTmetrix速度测试工具如何更好地工作以及所有图表的含义可以帮助您在性能方面做出更加数据驱动的决策。我们称之为瀑布分析，了解您的个人资产如何加载至关重要。请记住，在将其与Pingdom进行比较时，它们是不同的工具，因此最好坚持使用其中一种，因为它们的计算方式不同。还有其他很棒的GTmetrix技巧吗？

GTmetrix 网站优化 速度测试
评论收藏微海报
分享
分享到

相关的

评论留言

马上学习

文章目录

  • GTmetrix分析选项
  • 使用GTmetrix速度测试工具进行分析
  • GTmetrix概要（性能分数和详细信息）
  • 性能
  • 结构
  • GTmetrix瀑布图
  • 视频
  • 历史
  • 案例研究域配置
  • 架构
  • 推荐的进一步阅读教程：
  • 小结