Performance insights 简介
使用性能洞察面板获取有关您网站性能的可操作和用例驱动的洞察。
面板
1. 开始/重新开始录制
2. 设置网络和cpu
打开本地录制文件
保存当前录制数据
(disable catch: 禁止捕获)
面板2
红色区域为页眉和开始的页面功能一样只是多了几个功能
3. 本次录制临时生成的文件名以及多次录制转换区域
6. 删除选中录制
7. 意见反馈
8. 设置(设置具体见文章末尾)
9. 快捷键
蓝色区域为主窗口区
主要为了观测
绿色区域为洞察区 (提供了页面洞察的概览,显示了页面的关键指标)
1. 概览见解(鼠标悬停在见解上可以定位在哪里,单击跳转详情)
2. 见解详情(获取潜在性能的修复意见,深入了解详细情况)
黄色区域为页脚时间管理区
1. 屏幕截图显示/隐藏按钮(显示/隐藏屏幕缩略图)
2. 时间开始/暂停按钮以此查看您的页面是如何以视觉方式加载的,暂停时间之后可以拖动时间轴以查看时间点的屏幕截图
3. 到开头
4. 播放速度
5. 放大缩小
性能指标
基于用户可感知的过程(用户体验)的常见指标有:
白屏时间(FirstPaint,FP):从屏幕空白到第一个画面出来的时间;
首次内容渲染时间(FirstContentful Paint,FCP):渲染出首个文本或图片的时间;
最大内容绘制时间(Largest Contentful Paint,LCP) :渲染出最大文本或图片的时间;
可交互时间(Time To Interactive,TTI):网页需要多长时间才能提供完整交互功能。
业界阈值
设置具体翻译
0. 时间线
1. 是否显示屏幕截图
2. 显示用户互动
3. 显示导航事件
4. 页面指标
5. 数据轨道
6. 布局变化
7. 网络
8. 互动
9. 用户时间
10. 渲染器
11. GPU