今天我们想深入探讨如何更好地使用和理解流行的网站速度测试工具Pingdom的数据。您可以使用它对您的WordPress网站进行我们所说的瀑布分析。这可以帮助您快速诊断性能问题,并且不会误诊问题。
很多时候我们看到WordPress用户在Pingdom速度测试工具中解释数据错误,这导致有时将网站配置为比以前更糟糕的状态。请记住,所有此类工具都将用作指南,它们永远不会100%准确。重要的是在所有测试中保持一致并使用相同的工具。
Pingdom
Pingdom是一家总部位于瑞典的公司(现归SolarWinds所有),提供各种不同的服务,例如正常运行时间监控、页面速度监控、交易监控、服务器监控和访问者洞察 (RUM)。他们最著名的事情之一可能是他们的免费网站速度测试工具。它是WordPress 社区中最受欢迎的性能测试工具之一。
为什么如此受欢迎?嗯,首先,它可能是最容易使用的速度测试工具!并非每个人都是网络性能专家,因此对于典型的WordPress用户来说,其他一些替代工具可能会让人不知所措。有时正如他们所说,少即是多。毕竟,您只关心两件事:您的网站有多快以及如何使其更快。
Pingdom网站速度测试
Pingdom 目前允许您测试来自全球7个不同地点(5大洲)的任何网站的速度:
- 亚洲 – 日本 – 东京
- 欧洲 – 德国 – 法兰克福
- 欧洲 – 英国 – 伦敦
- 北美 – 美国 – 华盛顿特区
- 北美 – 美国 – 旧金山
- 太平洋 – 澳大利亚 – 悉尼
- 南美洲 – 巴西 – 圣保罗
注意:我们注意到有时并非所有测试位置都可用。这很可能是因为它因维护而停机,或者由于太多人试图对其进行测试而使其过载。如果您一直使用的测试站点位置不再存在,请在一两个小时后回来查看。很有可能它会再次出现。
您选择的测试位置实际上非常重要,因为它与您的网站实际托管的物理位置有关。这就是一个叫做网络延迟的小东西 发挥作用的地方。但我们将在下面更详细地介绍这一点。
使用Pingdom速度测试工具进行瀑布分析
网页由不同的资源组成,例如HTML、JavaScript、CSS、图像和视频。这些中的每一个都会生成请求以呈现您在网站上看到的内容。通常,您的请求越多,您的网站加载速度就越慢。情况并非总是如此,但大多数情况下确实如此。
下面我们将分解每个Pingdom部分,并更详细地解释信息的含义,因为它与您网站的整体性能以及如何进行瀑布分析有关。
- Pingdom摘要
- 性能洞察
- 响应代码
- 按内容类型划分的内容大小和请求
- 按域划分的内容大小和请求
- 瀑布图
- 案例研究域配置
Pingdom摘要
当您通过Pingdom运行WordPress网站时,它会生成性能等级、总加载时间、总页面大小以及您在网站上的请求数量。在我们的示例中,我们使用的是perfmatters.io,这是一个运行Easy Digital Downloads的电子商务网站。
如您所见,我们运行了第一次测试,在Pingdom上的得分为88/100,总加载时间为541毫秒。它让我们知道合并资产的总大小和请求数量。
DNS和缓存之前的Pingdom速度测试
然后我们运行了一个额外的测试 ,现在我们的总加载时间是392毫秒,页面大小和请求数量相同!那是怎么回事?🤔 如果您多次通过Pingdom速度测试工具运行您的网站,您可能会注意到这一点。较大的站点会注意到更大的差异。
发生的主要原因有三个:DNS缓存、CDN缓存和WordPress缓存。这就是为什么你应该总是多次运行测试。当然,对第三方资源和 API 的外部调用也会对此产生影响。在我们的瀑布分析中进一步了解原因。
DNS后Pingdom速度测试
想要在您的WordPress网站上获得更好的Pingdom分数吗?根据您的网站和配置,可能并不总是能获得完美的100/100 分,尤其是对于那些运行电子商务网站和营销像素的人。但简单地花一些时间提高你的分数是一个很好的起点。整体速度真的很重要。
有时,用户体验也可能胜过您在网络上阅读的一些网络性能技巧。您不能忘记用户体验! 但是请放心,我们将在下面与您进一步分享一些提示和技巧,以了解我们如何将上述网站带到现在的位置,因此请继续阅读。
提高页面性能
性能洞察部分,现在“提高页面性能” 已于2018年更新,他们删除了一些旧项目并添加了新项目。这很可能是因为他们报告的一些建议不再像以前那样相关。在Web性能优化方面,事情总是在变化。如果人们只是想追求完美的Pingdom分数,有时会很麻烦。
Pingdom性能洞察
但是,我们将在我们的帖子中保留整个部分(一些旧的和新的),因为了解这些分数的计算方式很重要。这些基本上都是基于Google PageSpeed Insight规则。通常,如果您在网站上改进这些,您应该会看到整体加载时间减少。
以下是改进页面性能部分的一些类别:
- 使用内容交付网络 (CDN)
- 避免HTTP 404(未找到)错误
- 最小化重定向
- 添加过期标题
- 从静态资源中删除查询字符串
- 使用无Cookie的域
- 跨主机名并行下载
- 指定缓存验证器
- 指定一个Vary: Accept-Encoding标头
现在让我们深入研究其中的一些,看看哪些仍然适用于今天。
使用内容交付网络 (CDN)
今天在您的 WordPress 网站上实施的最重要的服务之一是内容交付网络(CDN)。这些是遍布全球的服务器网络(也称为 POP)。它们旨在托管和交付WordPress网站的静态(有时是动态)内容的副本,例如图像、CSS、JavaScript 和视频流。
CDN 的一些好处包括性能提升(更低的 TTFB 和网络延迟)、更低的带宽和托管成本,甚至还有SEO优势。
重要提示:新更新的Pingdom工具目前有一个错误,可以准确地检测任何CDN提供商。
使用内容交付网络 (CDN)
我们推荐的一些第三方CDN提供商包括:
- KeyCDN
- Cloudflare
- StackPath
- CDN77
- 又拍云(目前正在使用的CDN服务商)
- 阿里云
- 华为云
在我们自己的CDN速度测试中,我们发现CDN在某些情况下可以将页面加载时间减少50%以上!
避免HTTP 404(未找到)错误
此部分以前称为“避免错误请求”。这总是相关的!这个警告就像听起来一样,它是一个无法成功完成的请求。这通常会发生在您手动链接到已被删除的资产或图像,从而导致404错误。这在Pingdom中显示为橙色圆圈,以及响应标头状态的404。
避免错误请求 – 404错误
始终确保您网站上的每个请求都以成功状态返回。这将确保不会对不再存在的资产生成任何查询。
最小化重定向
太多的重定向总是你需要注意的事情。简单的重定向,如单个301重定向、HTTP到HTTPS或www到非www(反之亦然)都可以。很多时候,您网站的某些区域需要这些。但是,每个都会对您网站的性能产生影响。如果您开始将重定向堆叠在一起,那么重要的是要了解它们如何影响您网站的性能。这适用于页面和帖子重定向、图像重定向等。
重定向在Pingdom中显示为蓝色圆圈,以及响应标头状态上的301或302。
重定向对您的网站有多大影响?让我们做一个小测试。首先,我们在联系我们页面上运行速度测试:https://perfmatters.io?ref=1172/contact/
。正如您在下面看到的,我们的总加载时间为417毫秒。
没有重定向的网站速度测试
然后我们稍微修改URL并运行另一个速度测试以查看多次重定向的影响。http://www.perfmatters.io/contact
. 如您所见,现在加载同一个页面需要695毫秒。这增加了66%。
具有多个重定向的网站速度测试
查看我们关于WordPress重定向的深入文章,以及提高性能的最佳实践。
添加过期标题
此建议以前称为利用浏览器缓存。用外行的话来说,WordPress站点上的每个脚本都需要附加一个HTTP缓存标头(或者应该附加)。这确定文件上的缓存何时到期。要解决此问题,请确保您的WordPress主机具有正确的cache-control
标头和expires
标头设置。查看有关如何手动将缓存标头添加到您的服务器的步骤,并阅读有关如何添加过期标头的指南。
利用浏览器缓存 – 缓存标头
另一个问题是,当您加载第三方脚本时,您无权添加缓存标头,因为您无法控制他们的Web服务器。常见的罪魁祸首包括Google Analytics脚本和营销像素,如Facebook和Twitter。要解决此问题,您可以使用Perfmatters之类的插件在本地托管您的Google Analytics脚本(尽管这不受官方支持)。WP Rocket现在还可以选择在本地托管您的Facebook营销像素。
在本地移动脚本可能会因它对站点性能的影响程度而有所不同。一个优点是您可以完全控制文件并可以从您自己的CDN提供服务。这也会删除另一个第三方DNS请求。然而,记住这些文件可能已经缓存在人们的浏览器中也很重要。
请参阅我们关于如何修复浏览器缓存警告的深入文章 。
从静态资源中删除查询字符串
另一个常见问题是处理查询字符串。您的CSS和JavaScript文件通常在其URL末尾带有文件版本,例如https://domain.com/file.min.css?ver=4.5.3
. 某些服务器和代理服务器无法缓存查询字符串。因此,通过删除它们,您有时可以改善缓存。
您可以使用像Perfmatters这样的高级插件 ,它有一个简单的一键式选项来删除查询字符串。
或者您可以手动将以下代码添加到您的主题 functions.php
文件中。更好的选择是使用像Code Snippets这样的免费插件来添加代码。这样您就不必直接编辑您的主题。
function remove_query_strings() { if(!is_admin()) { add_filter('script_loader_src', 'remove_query_strings_split', 15); add_filter('style_loader_src', 'remove_query_strings_split', 15); } } function remove_query_strings_split($src){ $output = preg_split("/(&ver|?ver)/", $src); return $output[0]; } add_action('init', 'remove_query_strings');
但是,在您立即删除站点上的查询字符串之前,了解使用查询字符串的原因很重要。WordPress开发人员通常使用文件版本控制来解决缓存问题。
举例来说,如果他们推出的更新和变革style.css
,从?ver=4.6
到?ver=4.7
,这将被视为一个完全新的URL并不会被缓存。如果您删除查询字符串并更新插件,这可能会导致缓存版本继续提供服务。在某些情况下,这可能会破坏您网站的外观,直到缓存资源过期或缓存完全刷新。
此外,一些CDN可以缓存查询字符串。
从静态资源警告中删除查询字符串
请参阅我们关于如何从静态资源中删除查询字符串的深入教程。
使用无Cookie的域
我们有一篇关于如何处理来自无cookie 域警告的服务静态内容的深入文章。很多时候您可以忽略此警告,因为HTTP/2等新协议现在使这变得不那么重要。新连接的成本通常比通过同一连接流式传输所有内容的成本更高。但是,解决此问题的两种方法是使用CDN提供商去除cookie或创建单独的域和/或子域。
提供来自无cookie域警告的静态内容
使用GZIP压缩组件
当Pingdom检测到未使用GZIP压缩的资产时,会出现“使用GZIP压缩组件”警告。GZIP是一种压缩方法,用于减小基于文本的文件(如HTML文档和 CSS/JS 文件)的大小。在服务器上启用 GZIP 压缩,并在将网页和资产发送给访问者之前对其进行压缩。从我们的测试中,我们看到启用GZIP压缩将请求的文件大小减少了78%以上。
使用GZIP压缩组件
部分服务器提供商,您不必担心手动启用GZIP,因为它已在服务器上默认启用。如果您发现您的虚拟主机没有启用GZIP,我们建议您联系他们的支持团队立即启用它,因为它会对您的页面速度产生巨大影响。如果在服务器上启用GZIP后仍然看到“使用GZIP压缩组件”,则可能是托管站点所需外部资产的服务器没有启用GZIP。如果是这种情况,则您无法做任何事情来更改服务器行为。
跨主机名并行下载
“跨主机名并行下载”警告的结果是由于 HTTP/1.1 的限制和 Web 浏览器对它们可以与主机建立的并发连接数的限制;这通常是6个连接。此警告通常出现在具有大量请求的网站上。过去,绕过这个限制的唯一方法是实现他们所谓的域分片。但是,如果您使用支持HTTP/2的网络主机或CDN提供商,您现在可以放心地忽略这一点,因为现在可以通过单个连接并行加载多个资源。
跨主机名并行下载警告
指定缓存验证器
此警告是指缺少HTTP缓存标头,这些标头应包含在每个源服务器响应中,因为它们都验证并设置了缓存的长度。如果没有找到标头,它每次都会为资源生成一个新的请求,这会增加服务器的负载。这些头文件包括last-modified
,ETag
,Cache-Control
,和Expires
。就像浏览器缓存警告一样,这些标题应该由您的WordPress主机自动添加。如果您有第三方请求,您会看到这一点,您无能为力,因为您无法控制他们的Web服务器。
指定缓存验证器警告
阅读我们关于如何修复指定缓存验证器警告的深入文章。
指定一个Vary: Accept-Encoding标头
我们有一篇关于如何修复指定变量:接受编码标头警告的文章。这是一个HTTP标头,应该包含在每个源服务器响应中,因为它告诉浏览器客户端是否可以处理内容的压缩版本。
指定一个变化:接受编码头警告
Pingdom响应代码
Pingdom速度测试工具的下一部分是响应代码。响应代码,也称为HTTP状态代码,就像来自Web服务器的简短注释,它被添加到网页的顶部。这是来自Web服务器的消息,让您知道在收到查看页面的请求时情况如何。一些常见的有:
-
200:“一切正常。” 这是当网页或资源完全按照预期方式运行时交付的代码。
Pingdom 200响应代码示例
-
301:“请求的资源已被永久移动。” 当网页或资源已被其他资源永久替换时,会传递此代码。它用于永久URL重定向。
Pingdom 301响应代码示例
-
404:“未找到请求的资源。” 最常见的错误信息。这段代码意味着请求的资源不存在,服务器不知道它是否曾经存在过。
Pingdom 404响应代码示例
按内容类型划分的内容大小和请求
接下来的部分是按内容类型划分的内容大小和按内容类型划分的请求。这些中的每一个都有助于快速查看网页上占用最多资源的内容。根据HTTP Archive,图像通常占网页平均总大小的43%。我们也看到通常情况也是如此。但是,正如您在本网站下方看到的,情况并非总是如此。
Pingdom内容类型
为了优化您的图像,我们强烈建议您阅读我们关于如何优化Web图像和WebP的深入文章 。有许多很棒的工具和插件可以进一步压缩您的图像并确保它们不是您网站页面加载的主要内容。在我们上面的例子中,perfmatters.io网站正在利用使用大字体真棒图标代替图像。这可能是一项伟大的战略,可以产生巨大的影响。
按域划分的内容大小和请求
按域划分的内容大小和请求是快速查看网站上哪些外部服务和脚本的好方法。在我们的示例中,您可以看到我们从CDN加载了所有资产。然后是从Web服务器加载网站的初始HTML DOC,以及对Google Analytics域的外部调用。根据您的站点,您可能有更多的外部服务,例如Facebook、Twitter、Hotjar、SumoMe、AdRoll、New Relic、CrazyEgg等。
按域的Pingdom请求
通常,您可以做出的外部请求越少越好,因为每个外部服务都会引入自己的延迟、TLS 握手延迟、DNS查找等。
通常,最好尽可能减少请求数量并将资产托管在一处,例如将它们移动到您的Web服务器或CDN。一个例子是字体真棒。而不是链接到外部脚本以获得很棒的字体,而是下载它并直接提供它。
Pingdom瀑布图
最后但并非最不重要的是,我们有Pingdom速度测试工具请求部分,它会生成您网页上所有单个请求的瀑布图(如下所示)。然后,您可以分析每个请求以查看导致站点延迟和性能问题的原因。当我们说我们正在进行瀑布分析时,这就是我们的意思。以下是对每种状态颜色含义的更深入总结和/或定义。
Pingdom瀑布分析
DNS(粉红色)
那么什么是DNS?好吧,把它想象成一本电话簿。有一些称为域名服务器的服务器,它们保存有关您网站的信息以及应该将其路由到哪个IP。当您第一次通过Pingdom运行您的网站时,它会执行新的查找,并且必须查询DNS记录以获取IP信息。这会导致一些额外的查找时间。DNS服务器的位置也很重要。
Pingdom中的DNS延迟
当您多次通过Pingdom运行您的网站时,它会缓存DNS,因为它已经知道IP信息并且不必再次执行查找。这就是您的网站在通过Pingdom多次运行后显示速度更快的原因之一。
正如您在下面的屏幕中看到的,在我们运行的第二个测试中,初始DOC加载的DNS查找时间为3.6毫秒。通常它会下降到0毫秒,事实上,它应该,因为请求已经缓存。这是很多人误解的一个领域!
Pingdom中的缓存DNS
此外,您还可以通过使用高级DNS服务进一步优化它,而且它还有很多额外的好处。Cloudflare的免费DNS也很快(对于海外用户来说)!
在多次测试后,您的网站可能会显示得更快还有其他原因。其中之一是如果您使用的是内容交付网络 (CDN)。对于那些不熟悉CDN的人来说,它是一个全球服务器网络,可将您的内容(JS、CSS、图像等)缓存在离访问者更近的位置。当您第一次通过Pingdom运行您的网站时,它可能必须从CDN中获取最新的资产。CDN缓存的工作方式与DNS非常相似,一旦缓存,它在连续加载时会快得多。
另一个加速DNS的技巧是使用DNS预取。这允许浏览器在后台在页面上执行DNS查找。您可以通过在WordPress网站的标题中添加一些代码行来实现。请参阅下面的一些示例。
或者,如果您运行的是WordPress 4.6或更高版本,您可能需要使用资源提示。开发人员可以使用wp_resource_hints
过滤器,添加自定义域名和网址为dns-prefetch
, preconnect
, prefetch
或prerender
。
SSL(紫色)
紫色状态颜色代表浏览器执行SSL/TLS握手所需的时间。每当您通过HTTPS运行网站时,就意味着涉及SSL证书,并且由于加密过程(SSL/ TLS握手)而需要额外时间。在我们的示例域中,我们在Web服务器和我们的CDN上都有一个证书。因此,从Web服务器和我们的资产加载的初始HTML文档都存在SSL协商时间。
Pingdom中的SSL加载时间
虽然运行HTTPS的开销很小,但由于HTTP/2是一种有助于加快网络速度的新协议,因此现在可以忽略不计!由于浏览器支持HTTPS需要使用HTTP/2。
同样重要的是要注意,即使在2018年,也并非所有提供商都支持HTTP/2。这包括来自网络托管方和CDN方。因此,当您四处寻找托管和CDN时,请确保两者都支持它!
截至2018年中,Pingdom终于升级了他们的工具以使用Chrome 60 及更高版本。您可以user-agent
在请求标头中看到正在使用的。以前他们使用Chrome 39,Chrome直到版本49才支持HTTP/2。所以我们很高兴地说,Pingdom工具现在在运行测试时展示了HTTP/2的所有优点!
Pingdom支持HTTP/2
连接(蓝绿色)
Pingdom中的连接时间是指TCP连接,或创建TCP连接所需的总时间。您实际上并不需要了解它是如何工作的,但这只是主机/客户端和服务器之间必须发生的一种通信方法。
Pingdom连接时间
等待(黄色)
Pingdom中的等待时间实际上是指首字节时间,在某些工具中也称为 TTFB。TTFB是一种衡量指标,用于指示Web服务器或其他网络资源的响应能力。通常,低于100毫秒的任何东西都是可以接受的,并且是良好的TTFB。如果您接近 300-400 毫秒的范围,您的服务器可能配置错误,或者可能是时候升级到更好的网络堆栈了。
等待时间——TTFB
减少TTFB的最简单方法是什么?最好的两种方法是有效的WordPress缓存和CDN。所以让我们运行几个测试。
没有WordPress主机缓存的TTFB
在清除WordPress网站上的缓存后,我们首先进行了测试。这意味着它必须再次预加载缓存。如您所见,我们的总加载时间为541毫秒,初始请求的TTFB(等待时间)为185.2毫秒。
没有WordPress缓存的Pingdom TTFB
带有WordPress主机缓存的TTFB
然后我们再次运行测试。它现在直接从缓存中提供服务。正如您所看到的,我们的总加载时间下降到392毫秒,初始请求的TTFB现在是52.8毫秒!这就是缓存的不同之处。
带有WordPress缓存的Pingdom TTFB
如果您的网站为该国不同地区或全球的访问者提供服务,另一种大幅降低TTFB的简单方法是使用CDN。我们再次进行了一些测试以显示差异。
没有CDN的TTFB
我们首先在禁用CDN的情况下运行测试,如您所见,我们的总加载时间为1.93秒,资产的平均TTFB约为176毫秒。
没有CDN的TTFB
带CDN的TTFB
然后我们启用了CDN并再次运行测试。正如您所看到的,我们的总加载时间下降到1.21秒,我们在CDN资产上的平均TTFB现在是4.6毫秒!CDN可以带来多大的不同。
带CDN的TTFB
事实证明,CDN缓存如何提高速度并减少TTFB。
当然,拥有一个经过深思熟虑的架构的优秀WordPress主机对于降低TTFB也至关重要。
发送(橙色)和接收(绿色)
Pingdom中的发送和接收状态真的不需要太多解释。发送时间只是Web浏览器将数据发送到服务器所需的时间。而接收时间是网页浏览器从服务器接收数据所需的时间。在您的测试中,这两者通常都非常低或不存在。
HTTP响应头
您还可以在进行瀑布分析时单击单个请求并查看HTTP响应标头。这提供了有价值的信息。在下面的屏幕中,我们可以立即看到诸如在Web服务器上启用了gzip之类的内容,并且它是从缓存中提供的(HIT,否则将显示MISS)、缓存控制标头、过期标头、浏览器用户代理和更多的。
HTTP响应头
案例研究域配置
如果您在我们的瀑布分析帖子中深入了解了这一点,那么您将大饱眼福。看到人们分享技巧和案例研究,但不分享他们是如何到达那里的,总是很烦人。所以下面是我们对上面使用的案例研究域的确切配置!随意复制它。
Architecture
- 案例研究域 (perfmatters.io) 托管在美国的Google Cloud Platform上(美国爱荷华州Council Bluffs (us-central1))。目前提供28个不同的数据中心可供选择。GCP的高级网络是包含在闪电般快速网络延迟的所有计划中。
- 网站服务器使用HTTP/2、Nginx、MariaDB,这些都有助于加快加载时间。
- 该站点正在使用KeyCDN,它为CDN提供支持。免费 CDN 带宽包含在所有托管计划中。
- 该站点没有使用任何缓存插件。在服务器级别缓存所有内容,这大大简化了事情!
- 该站点使用的是PHP 7.3。较新版本的PHP总是表现出巨大的性能改进。
更新WordPress网站的PHP版本
WordPress插件和主题
以下是影响 WordPress 电子商务网站上使用的性能的插件列表。
- 高级Perfmatters插件。这摆脱了不必要的HTTP请求,例如嵌入、表情符号,并且还有一个脚本管理器来启用/禁用某些脚本以在每个页面/帖子/站点范围的基础上加载。
- 高级Imagify插件用于压缩图像。
- 免费的Safe SVG插件用于将SVG图像上传到WordPress站点。
- 高级WordPress主题GeneratePress用于构建EDD站点。
进一步阅读的推荐教程:
- 如何消除阻塞渲染的JavaScript和CSS
- 如何禁用WordPress表情符号
- 如何禁用WordPress嵌入功能
- 如何实现WordPress网站的Google PageSpeed Insights测试满分
小结
如您所见,了解Pingdom速度测试工具如何更好地工作以及所有图表的含义可以帮助您在性能方面做出更加数据驱动的决策。我们称之为瀑布分析,了解您的个人资产如何加载以及它们如何受到您的WordPress主机、物理位置、CDN等的影响至关重要。