跳转到主要内容
优化页面有助于根据真实用户流量数据识别浏览器性能问题的根本原因。通过浏览器指标(如核心网页指标和 Flashduty 自定义加载时间指标)排查页面加载缓慢的原因,这些指标可以从用户的角度评估完整页面的加载时间。 为了进行更深入的分析,优化页面提供了按用户人口统计(例如浏览器、地区和应用版本)的核心网页指标的详细拆分。您可以利用这些信息跟踪性能趋势,了解受影响最多的用户群体,精准优化。

诊断优化流程

您可导航至优化页面,该页面位于性能监控菜单下,选取待洞察的指标即可。您也可以通过在分析看板中查看对应的性能数据跳转至此功能。
1

指标选择

选择页面和指标后,便可开始做性能数据洞察:
  1. 点击指标卡片选择要洞察的指标(目前支持 LCP、FCP、INP、CLS)
  2. 在「显示筛选细分」中选择一个组
  3. 在不同的百分位数处评估指标(例如 p75 表示第 75 个百分位数值)
2

数据查看

您可通过调整数据聚合方式或修改筛选条件,查看该指标在不同条件下的数据表现情况,从而推进诊断优化工作。
数据查看
3

问题诊断

在问题诊断部分,您可以看到用户在页面上遇到的可能影响指标性能的资源和错误。
问题诊断
例如,对于最大内容绘制(LCP),您可以查看在触发 LCP 之前加载的资源。由于 LCP 是最大元素在页面上加载所需时间的指标,您可以从资源加载和解决错误两个方面进行问题诊断。
4

查看事件样本

如果在资源分析阶段无法更准确地定位到关键信息,您可在事件样本区块中选取合适的事件样本进行更详细的上下文分析。
事件样本

优化方向

资源加载分析面板展示当前视图下所有资源的详细加载信息,帮助您识别性能瓶颈。您可以通过「全部资源」和「阻塞资源」两个选项卡切换查看范围:
  • 全部资源:展示视图中加载的所有资源
  • 阻塞资源:仅展示标记为 blocking 的渲染阻塞资源,这些资源会延迟页面的首次渲染
资源列表包含以下字段:
字段说明
URL GROUP资源的 URL 路径分组
TYPE资源类型(如 JS、CSS、Image 等)
AVG CLIENT SIZE平均客户端资源大小
AVG TRANSFER SIZE平均传输大小(如传输大小明显小于客户端大小,说明部分采样命中了缓存)
AVG START TIME平均开始加载时间
AVG DURATION平均加载耗时,并以色条可视化展示 DNS 解析、连接建立、首字节等待和下载四个阶段的耗时占比
将鼠标悬停在耗时色条上,可查看各阶段的具体耗时数值,帮助您判断是网络连接、服务器响应还是资源大小导致的加载缓慢。