Pagespeed见解报告分析

Question

我正在处理页面速度洞察，我需要一些帮助才能正确理解此工具的报告。

我想清楚地知道报告在绩效问题上告诉我这项工作的内容。

这是报告显示低绩效得分的报告。

这是一份显示更高绩效得分的报告。

这是根据grunt-pagespeed报告的样子：

我无法看到这些案例的相同报告结果。您可以从上面的示例中看到它以文件​​的优化/缩小的百分比显示值，但在我的情况下，我看到优化图像的值为236,7或css缩小的值为0.65。

我不清楚如何理解这份报告的价值，虽然我只是通过查看css / html / javascript / css以及调用服务器，gzip，图像等的资源数量来改进我的页面。

Answer 1

我建议使用Google Pagespeed Insights和webpagetest.org，以便轻松查看值得关注的内容。这些实用程序在确定您的网站最初会发生什么时会更加简单。

  

这是一张瀑布图。这可让您更好地了解资源在网页上的处理和加载方式，以及哪些资源的使用时间最长。

Answer 2

在做了一些研究后，我看到这些链接实际上有助于我理解报告值的工作原理。

https://developers.google.com/speed/docs/insights/v1/getting_started

它实际上解释了此报告的结果可以包含与此工具相关的每个规则的影响百分比或值：

https://developers.google.com/speed/docs/insights/rules

http://addyosmani.com/blog/automating-web-performance-measurement-with-psi-for-node/

所以实际上在第一份报告中我们可以看到：

优化图像影响高于执行任何其他规则检查。

我们可以看到第二份报告：

尝试最小化图像大小或修复渲染块以获得更好的性能几乎相同，两者的值几乎都是2.0x

我写了一篇关于此的文章：http://jotaoncode.com/blog/news/2015/11/09/page-speed-insights/

检查性能的其他资源包括：

http://tools.pingdom.com/fpt/#!/cDKSlP/jotaoncode.com

http://www.webpagetest.org/

如果你想看看你的网站花了多少钱:)

https://whatdoesmysitecost.com/