Web性能分析插件通过提供详尽的性能指标和优化建议,帮助开发者提升网站质量和用户体验。使用这些工具时,应考虑它们的功能范围、易用性和是否支持多平台测试。
插件特色
- 关键性能指标。忽略页面卸载时间、重定向时间。
1. 首包:`responseStart - domainLookupStart`
2. 首次渲染/白屏:`responseEnd - fetchStart`
3. 首次可交互:`domInteractive - fetchStart`
4. DOM Ready:`domContentLoadedEventEnd - fetchStart`
5. 页面加载:`loadEventStart - fetchStart`
- 各阶段指标瀑布流
1. unLoad:`unloadEventEnd - unloadEventStart`
2. Redirect:`redirectEnd - redirectStart`
3. AppCache:`domainLookupStart - fetchStart`
4. DNS:`domainLookupEnd - domainLookupStart`
5. TCP:`connectEnd - connectStart`
6. TTFB:`responseStart - requestStart`
7. 数据传输:`responseEnd - responseStart`
8. DOM:`domContentLoadedEventStart - responseEnd`
9. DCL:`domContentLoadedEventEnd - domContentLoadedEventStart`
10. 资源加载:`loadEventStart - domContentLoadedEventEnd`
11. onLoad:`loadEventEnd - loadEventStart`
- 资源分析
1. 首页资源请求数量、加载大小和域名分布情况。
2. 请求资源域名分布,与各个域名平均耗时。
3. 未设置响应头域名分布情况。
4. http 压缩情况,未压缩分布,缓存命中率。
5. 资源类型情况。
6. 抽样10条最耗时的资源和 ajax 请求。
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点,在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况,可以将crx文件右键,然后选择【管理员取得所有权】,再尝试重新安装
5、安装好后即可使用

扫码关注公众号,发【识别码】获取