深入了解GTmetrix速度测试工具:如何使用GTmetrix提升网站速度和AI可见性

深入了解GTmetrix速度测试工具:如何使用GTmetrix提升网站速度和AI可见性

文章目录

  • 什么是GTmetrix?
  • 为什么要使用GTmetrix?
  • GTmetrix免费账户有哪些限制?
  • 最佳免费GTmetrix替代方案:WebPageTest.org
  • 如何使用GTmetrix?
  • 步骤 1:访问GTmetrix网站
  • 步骤 2:输入您的网站URL
  • 步骤 3:选择您的测试位置和浏览器(可选)
  • 步骤 4:开始测试
  • 如何阅读和分析您的GTmetrix报告?
  • Summary选项卡
  • Performance选项卡
  • Structure选项卡
  • CrUX选项卡
  • Waterfall选项卡
  • Video选项卡
  • History选项卡
  • 如何使用GTmetrix进行SEO和AI可见性优化 (GEO)?
  • 如何提升WordPress网站速度?
  • 推荐的进一步阅读教程:
  • 小结
  • GTmetrix常见问题解答 (FAQ)

如何使用GTmetrix提升网站速度和AI可见性

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

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

GTmetrix速度测试工具

GTmetrix速度测试工具

什么是GTmetrix?

GTmetrix 是一款流行的在线网站速度测试工具,它可以分析您网站的性能,并提供有用的改进建议。

当您使用 GTmetrix 分析您的网站时,该平台会根据 Google Lighthouse 和 Core Web Vitals 的重要指标对您的网站进行评分。

该报告可以帮助您精确定位网站加载过程中的瓶颈,并优先修复那些能够加快加载速度并提升整体用户体验的问题。

为什么要使用GTmetrix?

GTmetrix 是目前最受欢迎的网站速度和性能分析工具之一。

您应该考虑使用它的原因有很多。

  • 它提供免费版本:虽然功能有所限制,但您无需支付任何费用即可使用 GTmetrix 的基本功能。
  • 它易于使用:与许多性能测试工具相比,GTmetrix 非常人性化。这意味着您可以快速了解网站哪些方面运行良好,哪些方面需要改进。
  • 它提供真正有用的数据:GTmetrix 在真实的 Web 浏览器中运行测试,因此它提供的信息能够真实反映您的网站状况。
  • 它指导您进行优化:GTmetrix 不仅仅是一个测试工具。它会准确地告诉您如何提升网站性能。

听起来很完美!但别高兴得太早……

GTmetrix免费账户有哪些限制?

GTmetrix 曾经是一款免费工具,提供高级升级选项。但最近,免费账户的限制更加严格:

  • 每月测试次数限制为五次
  • 您无法进行移动设备测试。
  • 每天只能监控一个 URL;高级用户可以获取多个网站的每小时测试结果。
  • 您只能使用七个测试服务器位置
  • 测试数据仅保存一周。
  • 最重要的是:您只能享受 6 个月的免费按需测试服务。

要解锁 GTmetrix 的完整版本,您需要订阅高级版。套餐起价为每年 51 美元,价格并不算太贵。

但如果您刚开始进行网站优化,您可能更倾向于使用免费帐户……或者使用其他工具。

最佳免费GTmetrix替代方案:WebPageTest.org

虽然 GTmetrix 是网站性能测试领域最知名的工具,但也有一些优秀的完全免费的替代方案。我们推荐 WebPageTest.org

WebPageTest.org
免费版提供:

  • 每月 150 次测试
  • 完整的移动设备测试
  • 更长的数据保留时间
  • 免费版没有时间限制

显然,WebPageTest.org 是一个值得考虑的竞争对手,但它显然更面向开发者,提供大量的诊断细节,但辅助功能较少。这可能会让普通网站所有者感到有些不知所措。

我们建议您同时尝试这两款工具,看看哪一款更适合您。

如何使用GTmetrix?

使用 GTmetrix 分析网站性能其实非常简单。以下是帮助您入门的分步指南:

步骤 1:访问GTmetrix网站

访问 https://gtmetrix.com

该工具完全基于网页,因此您无需下载任何内容即可使用。

访问GTmetrix网站
免费版涵盖基本功能;您需要创建帐户才能使用某些功能。要解锁所有功能,您需要升级到 GTmetrix 付费订阅。

步骤 2:输入您的网站URL

在首页的大框中输入您网站的 URL。

输入您的网站 URL

步骤 3:选择您的测试位置和浏览器(可选)

GTmetrix 为高级用户提供不同的分析选项,例如选择不同的测试位置和浏览器。

此选项可以显示您的网站在全球不同设备和连接速度下的性能表现。

如果您拥有 GTmetrix Pro 帐户,则可以从 22 个位置的测试服务器中进行选择。您还可以使用特定浏览器进行测试,包括 Google Chrome、Firefox 和移动浏览器,或使用不同的连接,从 56k 拨号连接到不限速连接。

如果您尚未注册或使用的是免费帐户,则无法使用这些选项。因此,您可以跳过此步骤,直接分析您的网站。

选择您的测试位置和浏览器(可选)

GTmetrix分析选项

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

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

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

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

GTmetrix测试格式选项

GTmetrix测试格式选项

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

GTmetrix额外选项

GTmetrix额外选项

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

步骤 4:开始测试

点击“Test Now”按钮。GTmetrix 将开始分析您的网站。

分析完成后,您将收到一份详细的报告。准备好深入了解并解读结果了吗?

接下来我们就来解读。

如何阅读和分析您的GTmetrix报告?

GTmetrix 提供关于您网站的大量信息。为了便于理解,该工具首先会快速概览您的测试结果。

GTmetrix报告
左侧是 GTmetrix 等级面板,包含三个部分:

  • GTmetrix Grade:越接近 A 越好。目标是 B 或更高。
  • Performance score:衡量您的网站从用户角度来看的性能表现。得分越高越好。
  • Structure score:衡量您的网站为实现最佳性能而构建的程度。得分越高越好。

右侧是 Web Vitals 面板。该面板显示最重要的指标:

  • LCP(最大内容绘制)网页浏览器可见区域中最大图像或文本块的显示时间。这会对感知加载时间产生显著影响。我们希望 LCP 不超过 1.2 秒。
  • TBT(总阻塞时间):脚本阻塞网页加载过程的时间。基准值约为 150 毫秒。
  • CLS(累积布局偏移)网页加载过程中发生的意外布局移动次数。目标值应为 0.1 毫秒或更低。

您可以将这些指标视为重点——您必须确保万无一失的关键要素。但还有更多内容值得关注。

您会在结果页面上看到一些选项卡:摘要、性能、结构、CrUX、瀑布图、视频和历史记录。每个选项卡都包含有关您网站的更多信息。

Summary选项卡

“Summary”选项卡提供 GTmetrix 获取的有关您网站的高级信息的概览。

页面顶部是一个速度可视化图表,显示页面加载期间关键事件的时间线——例如首次内容绘制时间、可交互时间以及完全加载时间。

Summary选项卡
下方列出了 GTmetrix 识别出的影响您网站性能的主要问题。

“摘要”选项卡底部是“页面详情”部分。此处显示所有页面元素的文件大小及其百分比。

您无需在此选项卡上花费太多时间;它主要用于提供信息。

Performance选项卡

在“Performance”选项卡中,您可以深入了解网站的加载时间指标。

还记得我们之前看到的时间线吗?“性能指标”部分使这些数据更易于浏览。

Performance选项卡
除了我们之前看到的指标外,您还可以找到以下指标的计时:

  • 首次内容绘制 (First Contentful Paint):页面上第一个内容元素出现的速度。对于某些网站,这是文本。对于其他网站,这是图像。2.5 秒以内均属正常。
  • 可交互时间(Time to Interactive):网站完全可交互所需的时间,即页面开始加载后,用户需要多长时间才能执行点击链接和按钮等操作。
  • 速度指数(Speed Index):页面内容对用户可见的速度。

继续向下滚动,您将看到“浏览器计时”部分。这里提供了许多其他指标供我们探索。

  • 重定向持续时间(Redirect Duration):所有重定向(HTTP 到 HTTPS、域名重定向等)完成所需的时间。
  • 连接持续时间(Connection Duration):用户浏览器与服务器之间建立连接所需的时间,如果网站使用 HTTPS,则包括 TLS/SSL 握手所需的时间。
  • 后端持续时间(Backend Duration):服务器生成页面所需的时间。
  • 首字节时间 (TTFB):从用户发出 HTTP 请求到服务器返回第一个字节数据所需的时间。
  • 首次绘制(First Paint):第一个可视元素出现在屏幕上所需的时间。
  • DOM 交互时间(DOM Interactive Time):页面 HTML 文档对象模型 (DOM) 完全构建并可交互所需的时间。
  • DOM 内容加载时间(DOM Content Loaded Time):DOM 可交互且所有脚本加载完毕所需的时间。
  • 页面加载时间(Onload Time):页面及其所有资源(包括图像、CSS 和 JavaScript)完全加载并触发 onload 事件所需的时间。
  • 完全加载时间(Fully Loaded Time):页面完全加载以及所有其他网络活动停止所需的总时间。

与“Summary”选项卡类似,这里是查找有关您网站的更多信息的绝佳位置。但最有价值的数据还在后面!

Structure选项卡

“Structure”选项卡是关键所在。GTmetrix 会在此根据 Google 制定的最佳实践,对您的网站进行全面审核。

或者简单来说,这就是您的待办事项清单。

Structure选项卡
在此标签页中,您将看到 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解析完成之前推迟下载资源。解决此问题的一些简单方法是利用免费的AutoptimizeAsync 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压缩时,这也是固定的。但请务必查看我们关于如何修复指定变化的深入文章:接受编码标头 推荐。同样,您无法在第三方资源上解决此问题。

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

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

要查看完整教程,请点击右上角的“Learn how to improve this”。

根据您网站存在的问题数量,您应该将大部分时间花在 GTmetrix 的“CrUX”选项卡上。在尽可能多地解决问题后,您可以探索分析中的其他选项卡。

CrUX选项卡

想要深入了解访客如何体验您的网站?您需要查看 CrUX(Chrome 用户体验报告)选项卡。此分析区域提供来自 Google Chrome 浏览器真实用户的数据。

这意味着您可以准确了解您的网站在实际环境中的运行情况,而不仅仅是在 GTmetrix 测试条件下的情况。

遗憾的是,CrUX 选项卡并不总是像您预期的那样有用——这仅仅是因为 Google 没有足够的数据来得出有意义的结论。但无论如何,查看此选项卡都是值得的。如果您看到数据,请将其与“Performance”选项卡中的数据进行比较。任何重大差异都可能意味着需要修复某些问题。

Waterfall选项卡

为什么它被称为“Waterfall”选项卡?因为它包含一个瀑布图:一个详细展示网站加载过程的图表。

Waterfall选项卡
这意味着脚本、媒体文件、请求的第三方资源及其请求详情、持续时间和执行时间都会被详细列出。柱状图的长度表示每个元素请求、下载和执行所花费的时间。

“Waterfall”选项卡乍一看可能有点复杂,但逐部分分析可以帮助您发现网站的瓶颈或问题区域。

阻塞(棕色)

当浏览器加载网页时,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支持。因此,在选择要使用的速度测试工具时请记住。

Video选项卡

在“Video”选项卡中,您可以观看页面加载的视频。您甚至可以减慢视频播放速度,以便更好地观察加载过程,并跳转到页面加载过程中的关键节点。

Video选项卡
请注意,此功能仅在您创建 GTmetrix 帐户(免费)后可用。而且它不会自动包含在首次分析中;您需要访问“Video”选项卡,然后点击“Enable Video and Re-test”才能查看视频。

History选项卡

最后,还有“History”选项卡。在这里,您可以查看过往的报告(如果您拥有账户并已登录)。

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

历史

历史

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

在GTmetrix中比较报告

在GTmetrix中比较报告

您还可以使用“History Graphs”将您网站的功能与过往的分析结果进行比较,并跟踪其随时间推移的性能变化。

如何使用GTmetrix进行SEO和AI可见性优化 (GEO)?

像 Google 这样的搜索引擎希望为用户提供最佳体验。缓慢、笨拙的网站会令用户非常反感。

因此,网站速度成为搜索引擎优化 (SEO) 的关键因素。正如我们之前提到的,更快的网站速度可以带来更高的用户参与度、更低的跳出率,并最终提升排名。

您可以将 GTmetrix 视为您的网站性能教练。它会提供清晰的指导,帮助您打造搜索引擎青睐的用户体验。

网站速度和用户体验对于下一代搜索技术——生成式搜索引擎优化 (GEO) 也至关重要。

像 ChatGPT 和 Google 的 SGE 这样的 AI 搜索引擎旨在提供直接的答案。它们会从它们认为高质量、权威且快速的信息源中提取信息。

良好的用户体验是衡量网站质量的通用指标,它能让您的网站对传统搜索算法和新型 AI 模型都更具吸引力。

加快网站加载速度有助于 AI 平台更高效地评估您的内容。它们非常看重这一点。

那么,如何将 GTmetrix 报告转化为切实的 SEO 和 GEO 优势呢?首先,关注以下几个关键领域。

  • 力争“A”级:GTmetrix 最高等级是对您整体表现的快速总结。获得“A”级且性能得分高于 90% 可以清晰地向搜索引擎表明您的网站已得到良好优化。
  • 关注核心网站指标:密切关注 LCP、TBT 和 CLS 得分。GTmetrix 会将任何“Poor”或“Needs Improvement”的指标标记出来。修复这些问题是提升搜索排名的首要任务。
  • 深入研究“结构”选项卡:这是您的 SEO 宝库。“结构”选项卡提供了一系列经 Google 认可的网站性能优化方法,涵盖从图片优化到浏览器缓存等各个方面。
  • 密切关注您的瀑布图:使用此功能识别加载缓慢的元素(如大图像或笨拙的脚本),这些元素会降低您的用户体验,从而降低您的搜索潜力。

如何提升WordPress网站速度?

使用 GTmetrix 的意义在于获得切实可行的网站优化建议,这些建议能够针对真正拖慢网站速度的原因量身定制——所以务必从这里开始。当然,还有一些最佳实践可以帮助所有人确保网站运行速度飞快。如果您的 WordPress 网站需要提升速度,请尝试以下建议:

  • 选择合适的主机:网站主机提供商对网站性能至关重要。选择信誉良好的主机提供商,确保其提供的资源能够满足你的需求。
  • 使用内容分发网络 (CDN):CDN 可以将网站的静态内容分发到全球各地的服务器上,让访客能够从离他们更近的服务器加载网站。
  • 优化图片:大型图片文件会拖慢网站速度。使用 SmushEWWW Image Optimizer 等工具或插件来压缩和调整图片大小,同时保证图片质量。你还可以启用延迟加载,并选择 WebP 和 AVIF 等现代格式
  • 文件压缩和合并:压缩 CSS、JavaScript 和 HTML 文件以减小其大小。WP RocketAutoptimizeW3 Total Cache 等插件可以帮助您完成这项工作,许多框架也能实现同样的效果。
  • 使用缓存:实施缓存以存储常用数据的副本,从而减少重新生成这些数据的需要。常用的缓存插件包括 WP Super CacheW3 Total CacheWP Rocket
  • 优化数据库:定期清理 WordPress 数据库,删除不必要的数据,例如文章修订、已删除的项目和临时选项。
  • 减少重定向:重定向会增加页面加载时间,尤其对于移动用户而言。尽量减少网站上的重定向次数。
  • 使用最新的 PHP 版本:WordPress 基于 PHP 运行。为了获得良好的性能和安全性,请确保您的服务器运行的是最新版本的 PHP。

最重要的是——保持 WordPress 更新!保持 WordPress 核心程序、主题和插件更新,以便获得最新的速度优化升级和安全补丁。

小结

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

GTmetrix常见问题解答 (FAQ)

仍然对 GTmetrix 或网站性能感到好奇?我们在这里为您解答所有疑问。

GTmetrix 是免费的吗?

GTmetrix 提供免费版本,用户可以使用它来测试和分析自己的网站。

但如果您需要更高级的功能,例如多地点测试和更频繁的监控,则需要付费订阅 PRO 版本。

GTmetrix 是一个可靠的工具吗?

是的,GTmetrix 是一个非常可靠的工具,因为它使用 Google 的 Lighthouse 数据来分析您网站的性能。

它可以非常准确地反映您的网站技术性能和用户体验。

为什么我多次测试网站时会得到不同的结果?

由于服务器流量、网络状况和第三方广告等因素,测试结果出现细微差异是正常的。

为了获得最准确的结果,请运行三次测试,并关注中位数结果,而不是单个分数。

GTmetrix 与 WebPageTest.org 等工具相比如何?

GTmetrix 非常适合生成快速、易于理解的报告。如果您只是普通的网站所有者,想要进行一些改进,那么它会非常适合您。

相比之下,WebPageTest.org 提供来自更多来源的更高级、更深入的免费诊断。这使其成为开发人员的首选,因为他们可能需要解决复杂的问题。

什么样的 GTmetrix 评分才算好?

目标是获得“A”级 GTmetrix 评分,并且性能得分达到 90% 或更高。同时,确保所有核心 Web 指标都处于“良好”(绿色)范围内。

高分表明您正在提供搜索引擎青睐的友好用户体验。

如果我的 GTmetrix 评分很低该怎么办?

别慌!仔细查看报告中的“结构”和“瀑布图”选项卡。在这里,您会找到一份优先级排序的清单,其中列出了需要修复的具体问题,例如优化大图或解决加载缓慢的脚本。

我的网站实际加载速度应该有多快?

目标是将最大内容绘制时间 (LCP) 控制在 2.5 秒以内,谷歌认为这属于“良好”的用户体验。

超过 4 秒则被视为“差”,会显著增加访客在网站加载完成前离开的几率。请定期与竞争对手进行基准测试,并持续改进加载速度,以提供最佳的用户体验。

评论留言

闪电侠

(工作日 10:00 - 18:30 为您服务)

2025-12-05 11:32:51

您好,无论是售前、售后、意见建议……均可通过联系工单与我们取得联系。

您也可选择聊天工具与我们即时沟通或点击查看:

您的工单我们已经收到,我们将会尽快跟您联系!
取消
选择聊天工具: