H5--性能测试(PageSpeed Insights )
中文网站(不需要翻墙): 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个内容加起来决定着一个页面的请求加载速度。
最新文章
- ubuntu下安装chrome
- 【vbs】vbs写ini文件
- Oracle的AWR报告分析
- IOS登陆+注册+抽奖+排行榜
- anyexec
- hdu 1087 Super Jumping! Jumping! Jumping!(动态规划)
- SpringMVC 接收复杂对象
- Android之场景桌面(一)
- [设计模式] Iterator - 迭代器模式:由一份奥利奥早餐联想到的设计模式
- 中英文代码对比系列之Java一例
- bzoj 4565 状压区间dp
- python之路-----前端之http协议
- config-toolkit之config-face
- 数据结构(C语言版)-第1章 绪论
- 响应式web设计之@media
- Android中Xposed框架篇-微信实现本地视频发布到朋友圈功能
- C#中XML文档注释编译DLL引用到其它项目
- 分享PHP小马一枚,完美绕过安全狗检测。
- Maven-Optional Dependencies &; Dependency Exclusion
- 33.HAVING 子句
热门文章
- Django时区导致的datetime时间比较报错
- idea设置创建类的注释模板
- JMeter 脚本请求错误 HTTP Status 415 的解决
- [转帖]时序数据库技术体系 – InfluxDB TSM存储引擎之数据写入
- python基础 — CSV 数据处理
- C++11 特性
- 【转发】Java split()用法
- VS.NET(C#)--2.1认识控件
- Unity_如何判断应用设备内存小于1G(内容可定制为根据机器配置进行不同LOD)
- TextBox 显示横线