如何在WordPress上使用GTmetrix速度测试工具+提高您的GTmetrix PageSpeed分数

如何在WordPress上使用GTmetrix速度测试工具+提高您的GTmetrix PageSpeed分数

如何在WordPress上使用GTmetrix速度测试工具+提高您的GTmetrix PageSpeed分数
СОДЕРЖАНИЕ
02 июня 2020

如果您想提高WordPress网站的性能,则需要知道自己现在的位置。这就是GTmetrix速度测试工具为您提供的帮助.


使用GTmetrix,您可以插入网站的URL,而GTmetrix会吐出当前的性能指标以及得分,建议和分析工具,以帮助您优化网站的性能.

但是这些报告中包含很多信息,因此您如何充分利用这些信息来加快网站速度?

这就是我们将在GTmetrix速度测试教程中介绍的内容。在这篇文章中,我们将:

  • ✅带您了解GTmetrix性能工具提供的所有内容
  • ✅告诉您如何提高GTmetrix分数(以及首先如何重视这些分数)
  • ✅向您展示一些高级分析工具,例如瀑布分析

如何使用GTmetrix速度测试工具

基本信息和GTmetrix常见问题解答

在深入探讨之前,让我们先了解一些基本信息和有关GTmetrix提供什么以及它如何工作的问题.

GTmetrix速度测试提供了什么?

GTmetrix速度测试可帮助您以几种不同的方式评估网站的性能.

从较高的角度来看,它可以让您了解网站加载所需的时间.

但是,这也可以帮助您分析网站为何以这种方式加载以及如何进行改进。为此,它:

  • 根据两个不同的指标对您的网站进行评分 – Google PageSpeed和YSlow.
  • 提供瀑布图和时序分析 让您了解每个单独的请求如何加载以及潜在的瓶颈在哪里.
  • 进行录像 这样您就可以了解您的网站如何加载给访问者.
  • 记录您的历史测试结果 过去30天内的数据,以便您分析网站的性能随时间变化的情况.

GTmetrix分数来自哪里?

GTmetrix没有自己的评分机制。而是使用两种第三方方法生成分数:

  • Google PageSpeed –这是一组26条不同的规则。每个规则都有自己的分数,并且权重也不同。总体得分是您的整体PageSpeed得分的来源.
  • 慢速 – YSlow是Yahoo(还记得Yahoo?)的开源项目,可以根据19个不同的规则对您的网站进行评级。就像PageSpeed一样,您的总体得分来自所有这些单独规则的加权结果.

GTmetrix分数重要吗??

是的,没有.

这是 "是" 部分:

您应该注意GTmetrix分数,因为分数较低可能意味着您尚未实施一些重要的前端性能最佳实践.

但这是 "没有" 部分:

您的访问者不在乎您的GTmetrix分数,而是在乎您的网站加载和互动需要多长时间.

拥有一个可以在不到两秒钟的时间内加载WordPress网站且GTmetrix得分在70分之内的网站要比拥有一个需要四秒钟才能加载但满分为100分的WordPress网站好得多.

基本上,请注意得分,因为它们可以帮助您快速评估网站的优化程度,但不要着迷,因为到最后,唯一重要的是您的网站加载速度.

GTmetrix分数较低的网站是否仍可以快速加载?

是的,一点没错.

这是其中的重要原因之一:

GTmetrix的两个得分(PageSpeed和YSlow)都主要与前端性能优化有关,例如图像的优化程度以及代码的外观.

但是,后端性能优化同样重要,甚至不重要。这涵盖了诸如托管服务提供商和服务器架构的出色程度(例如使用Nginx与Apache).

如果您的后端性能非常糟糕,即使您的GTmetrix得分很高,您的网站仍然可以缓慢加载。同样,如果您选择优秀的WordPress托管,即使您的GTmetrix分数较低,您的网站仍然可以快速加载.

为了获得最佳结果,您需要同时优化前端和后端性能.

我可以运行GTmetrix移动速度测试吗?

是!强烈建议同时测试台式机和移动设备的性能,因为如今大多数人都在移动设备上浏览网络.

基本上,了解桌面访问者如何加载您的网站只是成功的一半-您还想测试移动设备的情况.

移动设备可能具有不同的模式。例如,低功耗手机渲染JavaScript所花的时间要比廉价台式机还要多。因此,如果您的网站使用JavaScript繁重,那么它对移动页面加载时间的影响可能会大于桌面加载时间的影响.

除非您专门测试移动性能,否则您将不会知道.

为了运行GTmetrix移动速度测试,您需要注册一个免费帐户-稍后详细介绍.

如何进行GTmetrix速度测试

在GTmetrix上运行测试的最简单方法是 转到GTmetrix主页, 插入您网站的URL,然后单击 测试您的网站

GTmetrix匿名测试

但是,我建议您不要注册,而是注册 自由 运行测试之前的GTmetrix帐户.

在测试的公共版本中,速度测试将始终使用以下配置:

  • 来自加拿大温哥华的测试
  • 台式机上的Chrome浏览器
  • 不受限制的连接

但是,如果您注册一个 自由 帐户,您可以更改所有这些条件以满足您的需求.

例如,如果您的大多数访问者都来自美国西南部,则可以将测试地点更改为德克萨斯州达拉斯,以更好地了解目标受众的效果.

除了更改测试位置之外,您还可以选择使用移动测试设备或更改连接速度(例如,模拟较慢的3G连接与快速的有线连接).

注册免费帐户后,您就可以扩展 分析选项 配置有关测试功能的更多信息:

高级测试配置选项

GTmetrix根据您的条件运行测试后,将向以下结果页面吐出:

  • 顶部的快速摘要,其中包含您的效果得分和基本页面详细信息
  • 详细结果,分为六个选项卡

摘要结果

让我们浏览一下六个标签…

1. PageSpeed标签

PageSpeed 选项卡是运行GTmetrix测试时的默认活动选项卡。它会根据Google的PageSpeed规则为您的网站评分.

对于这26条规则中的每条,您的网站将获得0到100的分数。然后,GTmetrix将这些得分相加,以产生您的整体PageSpeed得分.

这26条规则的权重分配不均,因此有些规则对您的总体得分的影响比其他规则更大.

如果您单击箭头以展开其中一项规则,则会看到有关网站上引起问题的特定元素的更多详细信息:

GTmetrix速度测试PageSpeed选项卡

以下是一些最常见的PageSpeed问题以及如何解决这些问题以提高您的分数…

优化图像

压缩图像使您可以以零或最小质量损失来缩小文件大小,具体取决于压缩算法.

要自动优化和压缩WordPress网站上的所有图像,您可以使用 Optimole插件


图像优化和Optimole的延迟加载 图像优化 & Optimole的延迟加载

作者: 擎天柱

当前版本:2.3.1

上次更新时间:2020年4月21日

optimole-wp.zip


96%的评分


50,000+安装


WP 4.7+要求

利用浏览器缓存

浏览器缓存通过将某些静态资产存储在访问者的本地浏览器中来加快加载时间。这意味着,在以后的访问中,访问者的浏览器可以从访问者的本地计算机提供这些资产,而不是每次访问都下载它们.

许多WordPress缓存插件已经提供了浏览器缓存,包括WP Super Cache,WP Rocket和WP Fastest Cache。.

服务缩放的图像

缩放后的图像是大小适合您使用的尺寸的图像,我们拥有 关于主题图像上缩放图像概念的整个文章.

同样,在WordPress上提供缩放图像的一种简单方法是 Optimole插件 –它可以自动为您完成工作,因此无论访问者使用哪种设备,您的图像始终可以完美缩放.

指定图像尺寸

这涉及HTML –嵌入图像时您要指定图像的实际宽度和高度.

例如…

并非最佳

最佳:

当您在编辑器中插入图片时,默认情况下WordPress会执行此操作,但您需要确保指定您在其他地方使用的图片(例如在插件中).

缩小HTML,CSS和JavaScript

从技术上讲,这是三个独立的规则,但由于基本概念相同,因此我将它们合并在一起.

缩小化涉及在不更改网站功能的情况下去除网站代码中不必要的字符。例如,删除空格和换行符.

一些WordPress性能插件,例如 WP火箭, 包括缩小。或者,您可以使用 免费的Autoptimize插件 缩小您网站的代码.


自动优化 自动优化

作者: 弗兰克·古森斯(Futtta)

当前版本:2.7.2

上次更新时间:2020年5月21日

autoptimize.2.7.2.zip


94%的评分


1,000,000+安装


WP 4.9+要求

避免目标网页重定向

URL重定向对于引导流量很有用。但是,您要尽可能避免使用它们,因为它们会降低您的网站速度.

要解决此问题,请确保所有内部链接都直接指向当前网址-不要依赖重定向来解决问题。例如,如果您自动将http://yoursite.com重定向到https://yoursite.com以强制使用SSL,请确保始终链接到站点的HTTPS版本,以避免不必要的重定向.

延迟解析JavaScript

在谈论页面加载时间时,网站可见的速度与整个网站加载的时间一样重要(如果不是更多的话).

JavaScript可以通过迫使访问者的浏览器暂停呈现页面来下载和解析JavaScript,从而减慢此速度。这就是为什么您会经常看到它称为渲染阻止JavaScript的原因.

要解决此问题,您应该尝试延迟解析JavaScript,以便仅在网站的可见部分已加载后,您的网站才开始加载/解析该JavaScript。.

WP Rocket包含一个内置工具来帮助您完成此任务。或者,您可以使用 免费的异步JavaScript插件, 来自相同的Autoptimize插件开发人员.


异步JavaScript

作者: 弗兰克·古森斯(Futtta)

当前版本:2.20.03.01

上次更新时间:2020年3月1日

async-javascript.2.20.03.01.zip


92%的评价


100,000+安装


WP 4.6+要求

使用CSS精灵组合图像

这是一项高级技术,可让您使用CSS将多个图像文件合并为一个文件。这样可以减少加载页面所需的HTTP请求数量.

您不应该对所有图像都使用CSS精灵,因为这会对SEO和可访问性产生负面影响(因为您无法再添加图像替代文本)。相反,您只应将CSS精灵用作装饰性图片,例如客户徽标或社交分享图标.

不幸的是,没有插件可以自动设置CSS Sprites-您需要手动进行. 就是这样.

启用压缩

我们之前已经讨论过图像压缩,但这 "压缩" 是指使用称为Gzip压缩的东西在服务器级别压缩您网站的所有文件.

平均而言,Gzip压缩可将您网站文件的大小缩小约70%.

许多WordPress性能插件可以帮助您启用Gzip压缩,包括WP Rocket,WP超级缓存和WP Fastest缓存。或者,您可以使用简单免费 启用Gzip压缩插件 专用解决方案.


启用Gzip压缩

作者: Moki-Moki Ios

当前版本:1.0.3

上次更新时间:2020年5月8日

enable-gzip-compression.1.0.3.zip


86%的评价


20,000+安装


3.0.1要求

2. YSlow标签

您的YSlow得分与PageSpeed得分采用类似的方法,只是使用一组不同的规则进行测试。列表要小一些– GTmetrix的YSlow选项卡仅包含19条规则.

就像您的PageSpeed得分一样,每个规则都有自己的得分,而您的总体得分是基于这些得分的加权平均值.

GTmetrix速度测试Y“慢速”选项卡

这是您会遇到的一些最常见的建议…

使用内容传送网络(CDN)

CDN通过从全球服务器网络中传递站点的静态内容来加快站点的页面加载时间. 在这篇文章中了解更多.

要通过CDN提供图像,您可以使用 免费的Optimole插件. 要将CDN用于您网站的所有静态文件, 云耀斑 也是一个不错的选择.

顶级CDN服务的比较��

缩小JavaScript和CSS

我已经在PageSpeed部分中对此进行了介绍。您可以使用专用插件(例如Autoptimize)来最小化CSS和JavaScript。或者,许多WordPress性能插件也包含其自己的缩小功能.

压缩组件

这与 "启用压缩" PageSpeed标签中的推荐。您可以通过启用Gzip压缩来修复它.

许多WordPress缓存插件都包含Gzip压缩功能。或者,您可以使用专用 启用Gzip压缩插件.

避免URL重定向

这与 "避免目标网页重定向" 在PageSpeed中.

尝试始终链接到页面的当前URL,而不是依靠重定向将人们转移到正确的目的地.

减少DNS查找

访客的浏览器需要针对您的网站所包含的内容的每个域执行DNS查找.

您始终会为自己的网站至少进行一次DNS查找。但是,如果您在网站上使用外部服务(例如Google字体或Google Analytics(分析)跟踪脚本),则这些服务将导致其他DNS查找.

两种解决方案是:

  • 如果不需要,请删除外部服务
  • 如果可能,请尝试自行托管内容,例如在自己的服务器上托管Google字体,而不要依赖Google字体CDN. 这个插件可以帮助.

减少HTTP请求

您会在“ 瀑布 标签部分(下一个).

3.瀑布选项卡

瀑布 标签有点高级,但是它是一个非常有用的工具,可用来了解您网站的不同部分的加载方式以及可能存在小的瓶颈的地方,这会降低整个网站的速度.

当您打开 瀑布 标签中,您会看到此页面上每个HTTP请求的列表(这些是 "要求" 来自GTmetrix结果摘要).

页面上的每个对象都是一个单独的HTTP请求。例如:

  • 每个图像都是一个HTTP请求(除非使用CSS精灵!)
  • 每个CSS或JavaScript文件都是一个HTTP请求
  • 您正在加载的所有外部脚本(例如Google Analytics(分析))也将至少是一个HTTP请求
  • 等等.

在所有条件相同的情况下,更少的HTTP请求通常意味着网站加载速度更快.

此外,当您查看列表时会看到,每个HTTP请求的加载时间和加载顺序不同(有些甚至会阻止其他请求),因此,如果您可以找到并删除缓慢的加载, HTTP请求,您可以在您网站的页面加载时间中大有作为.

将鼠标悬停在每个HTTP请求上时,可以查看其详细信息。例如,此摩洛哥鹰嘴豆图像的加载时间为102.4毫秒:

GTmetrix速度测试瀑布分析

您还可以使用顶部的过滤器和搜索选项来查找特定的HTTP请求。例如,如果您搜索wp-content / plugins,则可以找到WordPress网站的插件添加的HTTP请求.

您甚至可以进一步挖掘以查找来自特定插件的请求。例如,搜索wp-content / plugins / elementor将打开来自的所有请求。 Elementor页面构建器插件

搜索瀑布分析

如果您发现某个插件正在添加大量缓慢加载的HTTP请求,但并没有给您带来太多好处,则您可能需要考虑将其删除并找到更好的选择.

4.时间,视频和历史记录选项卡

我将把GTmetrix速度测试的最后三个选项卡归为一组,因为您可能不会经常使用它们,而且我认为它们不需要深入分析.

时机

时机 标签可让您详细了解达到各种加载时间指标所需的时间。您也可以在瀑布图中找到此信息- 时机 标签只是使其更容易可视化.

如果将鼠标悬停在其中一个指标上,GTmetrix将在下面显示说明,告诉您它的含义:

时间标签

视频

如果您在开始测试时启用了页面加载视频,则可以在 视频 标签.

您还可以将它们放慢到原始速度的1/4,以查看更多细节.

视频非常有用,因为它们不仅可以让您看到站点何时加载,还可以看到站点的加载方式。例如,您网站的哪些部分首先可见?加载过程中是否有任何奇怪的故障 "未样式化内容的闪烁"? 这些是您在优化网站性能时需要了解的有用信息.

历史

最后,如果您多次测试一个页面, 历史 标签可让您查看先前测试的结果,以便您可以分析事情随着时间的变化.

它将存储该页面最近30天的所有测试。之后,历史测试结果将被删除。.

例如,如果您进行一些调整以提高GTmetrix速度测试分数,则可以看到这些更改如何转化为实际页面加载时间的改进:

GTmetrix速度测试历史结果

从GTmetrix速度测试中获得更多

如果您想从GTmetrix速度测试工具中获得最大收益,则应该超越摘要框,并深入研究以下详细信息.

您不想太固守GTmetrix的性能得分,但是得分中的建议为您可能缺乏网站前端性能优化的领域提供了一些有用的指导.

此外, 瀑布 标签是一种很好的工具,可用于深入研究网站性能的特定方面,例如查找对网站的页面加载时间有过分影响的图像,脚本或插件.

如果您想更深入地研究WordPress性能,请查看我们的11种加快WordPress速度的方法的集合.

您对如何使用GTmetrix测试您的网站还有任何疑问吗?发表评论,我们将尽力帮助.

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Karol K的布局和演示.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector