网站优化加速监测诊断工具GTmetrix如何分析瀑布图

2019-05-29 15:03  阅读 88 次 评论 0 条

GTmetrix如何分析瀑布图概观

本文旨在成为分析瀑布图的一种非常广泛和通用的方法。

没有丰富的经验和技术知识,很难真正了解瀑布图中发生的事情。即便如此,您可能经常被猜测,因为网站的性质在设计和实施方面都很复杂。

我们遵循这些指南的目标是帮助您识别常见问题或模式 - 如果您的瀑布图表存在 - 可以为您提供有关如何诊断和纠正您的性能问题的一些见解。

 


 

网站加速工具使用关键事项要知道

在查看瀑布图时,有几点需要注意。

1)瀑布图是缩放的

Scaled Waterfall Charts乍一看可能会产生误导。

这是关于瀑布图的关键点。条形和间隙的长度缩放为总页面加载时间和请求数。
示例A - 满载时间20秒,有11个请求

GTmetrix如何分析瀑布图

GTmetrix如何分析瀑布图

瀑布图表的20秒满载时间页面。一般请求持续时间以秒为单位。

这个特殊的瀑布图表的加载时间很长,主要是由于图像。请注意,请求持续时间以秒为单位

例B-满载时间0.36秒,有11个请求

GTmetrix如何分析瀑布图

GTmetrix如何分析瀑布图

瀑布图表0.36秒满载时间页面。一般请求持续时间以毫秒(ms)为单位。初始扩展栏误导性地暗示了后端问题。

这些请求持续时间以毫秒(ms)为单位
乍一看,上面的瀑布图表可能让您相信后端存在问题,因为初始条形似乎很长。然而,经过仔细检查,你会发现根本没有任何问题,因为后端时间的207ms通常很好。

重点外卖

短的满载时间会缩放整个条的长度,条形看起来很长。始终查看满载时间和实际请求持续时间,以确保您在正确的上下文中阅读图表。

 


 

2)响应标题是揭示

虽然技术上不是分析瀑布图模式的一部分 - 了解您的请求响应的内容是非常有用的。

这包括可能包括以下数据:

  • CDN详情
  • 缓存状态
  • 到期值
  • 压缩设置
  • …和更多

 

GTmetrix如何分析瀑布图

GTmetrix如何分析瀑布图

响应标头为您提供了丰富的见解。

 

PageSpeed和YSlow库查看了许多建议的响应标头。如果响应标题中缺少相关数据,则结果会降低您的分数。

重点外卖

如果PageSpeed / YSlow报告问题 - 请检查您的回复标题。它们是确认/反驳问题的良好检查,或者是为您指明追踪性能问题的正确方向的见解。

 

 


 

如何快速得出结论

现在您已熟悉瀑布图的线条,颜色和条形,让我们看看如何进行快速评估。

请记住 - 仅仅因为您在瀑布图中识别出这些模式中的某些模式,并不一定意味着它们需要注意或修复; 它们并不总是表明存在错误。

话虽如此,这里有一些你应该注意的模式。

 


 

4xx / 5xx请求

红色请求表示尝试加载请求时发生错误。如果无法检索请求,浏览器可能会跳过它。

有时,这些请求可能会导致阻塞,或者继续尝试完成请求,从而使整个负载性能受损。

清除您找到的任何4xx / 5xx错误。

清除您找到的任何4xx / 5xx错误。

清除您找到的任何4xx / 5xx错误。

 

删除或修复导致这些错误的任何请求,以便您有一个干净的,无错误的瀑布图来评估。

 


 

长条

长条确实表示请求持续时间很长。应调查超过500毫秒的任何事情(视频文件通常都可以)。
长条背后的潜在原因:

接收

如何分瀑布图

如何分瀑布图

这是长条的最常见原因。较大的文件大小导致自然下载数据的时间较长,因此过大的文件会显示长灰色条。

对于图像,PageSpeed将通过Optimize Images建议警告您未经优化的图像。

等候

如何分瀑布图

如何分瀑布图

如果您看到一个长紫色条,这可能表示服务器端问题。这基本上是服务器为请求生成响应所花费的时间。

如果第一个初始响应很长,则可能表示后端问题。阅读我们的文章,为什么我的页面速度慢?

闭塞

长米色条表示请求已启动,但被阻止或排队。无法为资源建立连接(JavaScript / CSS执行或最大同时连接)阻止与服务器的连接。

最后,扩展的绿色条表示连接到服务器以获取请求所需的时间。这可能表示网络问题,连接错误或服务器过载。
 


 

长空隙

请求之间的空隙表示在某处阻止执行或解析脚本(即在此期间没有发出请求 - 源)

空缺可能表示脚本的执行/解析。

 

瀑布图表中的较早部分出现间隙,它对性能的影响越大,因为它会延迟页面资源的其余部分加载(即显示更多不完整的页面)。如果在瀑布图表的早期出现较长的间隙,请优先调查其原因。
瀑布图末尾的空隙通常是可以的,因为脚本在已经请求和处理大部分资源时执行。
总的来说,遗憾的是,这种模式很难确定问题。网站很复杂,包含任意数量的JavaScript / CSS文件,甚至是运行和定义页面加载行为的内联脚本。关键的一点是要知道脚本正在某个地方运行/执行,以防止其他请求继续进行。开发人员可以进一步调查这些差距的原因。

 

推迟解析JavaScript

关于这些差距需要注意的一个潜在建议是“ 推迟解析JavaScript ” - 这有助于将JavaScript文件移动到页面末尾,以减少差距。

延迟JavaScript确保在大多数请求已经完成之后,在最后发生长空隙。

 

从本质上讲,您可以通过延迟加载“底层”资源(如分析JavaScript,Facebook像素,甚至Hotjar,LiveChat等营销工具)来减少为用户加载页面所需的时间。或OptinMonster。

尽管存在这些差距的原因还有其他可能性,因此请通知开发人员您的评估并让他们进行更深入的研究。


 

缓慢重定向链

如果您在瀑布图表的开头看到多个3XX代码,则表示重定向会不必要地延迟加载页面的过程。

此处显示的多个重定向意味着用户看不到任何内容(空白屏幕)0.3秒。

 

有时需要重定向,但请务必优化重定向以减少延迟。

多个重定向链的原因包括

  • 重定向到www或非www
  • http://到https://
  • 重定向到备用目录
  • 以上的组合

一个常见的重定向链问题是这种情况发生时:

  • 用户在其浏览器中键入xmaoseo.com
  • 被重定向到http://www.xmaoseo.com
  • 然后,再次被重定向到https://www.xmaoseo.com

重定向应该从非www和http://直接转到最终的www和https://

 


 

长瀑布图总体而言

如果您遇到性能不佳但看不到出色的模式,请检查瀑布图的长度。

如果它是一个很长的瀑布图,您的页面上可能会有大量请求,从而导致性能问题。

大量请求是有问题的,因为您从服务器请求的项目越多,下载,处理和呈现它们所需的时间就越长。

由于以下原因,请求可能很多:

第三方服务

添加第三方服务是一种快速扩展请求的方法。流行的小部件包括社交媒体嵌入,YouTube视频嵌入,Hotjar等营销跟踪器或LiveChat等服务。

第三方服务可以向您的网页添加大量请求。

 

进行审核并确保您实施的第三方服务为您提供真正的价值。如果没有,请考虑将它们全部从您的网站中删除。

本文地址:https://www.xmaoseo.com/seogongju/1566.html
关注我们:请关注一下我们的微信公众号:扫描二维码SEO优化自学教程网_网站推广技术培训的公众号,公众号:TopHtml
版权声明:本文为原创文章,版权归 小猫SEO优化 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论


表情