H5--性能测试（PageSpeed Insights ）

中文网站（不需要FQ）： http://www.googlespeed.cn

 

主要可实现：

　　1、测试手机与电脑打开的速度对比。

　　2、详细的测试结果

　　3、直观的统计数据，查看页面的共xx个请求、总共大小、image、script、font等等各占多少个请求数量及大小。

 

使用总结：

（1）页面的显示介绍如下截图：

     

 

二、具体的使用介绍

1、分类介绍

（1）移动设备：指的是在手机上打开此页面的测试结果

（2）桌面设备：指的是电脑打开此页面的测试结果

 

2、功能使用介绍（默认加载的是第一页的内容）

（1）分析：在文本框中输入需要测试的链接，点击”分析“等待执行完成即可看到测试的数据

　　

（2）测试结果的分析

　　1、实验室数据：

　　　　这里记录的数据只是参考，不作为我们查看的重点。

　　

 　　2、优化建议：

　　　　我们关注的部分，这里的数据具体可跟开发沟通下，根据这里记录的结果查看参考价值有多大，是否适合自己的项目去做优化

　　　　

　　3、诊断结果：

　　　　可作为我们重点关注的部分。这里有我们测试主要去查看的数据。

　　　　

　　　　　　

 

性能分析说明与解决方案：

《1》采用高效的缓存策略提供静态资源：此处标注了 45项资源，也就意味着当前的这个页面并未做缓存。

　　要求：一般的页面都会做缓存，避免再次请求时的耗时过大

　　

 

《2》Keep request counts low and transfer sizes small中的Image数量过大。意味着这个页面首次在加载时一次加载了第一页所需的所有图片

　　要求：一般可做懒加载，当页面滑动下去时在加载出图片，已此来降低首次请求时的时间过长。

 

《3》other：此处记录的other为5。跟开发沟通后的结果是：此处本可将后端去处理的请求放在了前段在处理，因此在耗时上也有一定的增加。

　　要求：

　　<1>一般为接口请求。可以对照项：用浏览器打开分析的链接。右键”检查“---》network---》XHR，查看请求的数量是否与other统计的一致。

　　<2>不应该把过多的请求处理放在前段去做，否则会耗时太多。可以将这些处理放在后端实现。

　　

 

《4》Script和Stylesheet：可以看到Script为7，Stylesheet为0，跟开发沟通后的结果是CSS的样式也写在了JS中，并未做分离。

　　 要求：一般情况下Script和Stylesheet会隔离开写。在页面加载时会优先加载CSS，再次加载js脚本。已此来节省时间

　　

《5》注意点：虽加载此页面时你看到了此页面未使用的脚本或者样式。但是此部分内容可能是公共项，因此同样会加载出来。

 

重要提示：

1、将测试的结果可与对应的开发沟通。查看测试结果和优化项是否适合你们的项目。并且已此来做参考项优化代码，提升页面加载速度

 2、页面的加载速度相关连性：网络的带宽（2G、3G、4G）、后端的慢请求、前段或者客户端工程师实际可优化的项。此3个内容加起来决定着一个页面的请求加载速度。