中文网站(不需要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个内容加起来决定着一个页面的请求加载速度。
作者:Syw