腾讯云可观测平台页面性能（控制台操作指南）

一、前提条件

在你开始执行操作前，请确认已在前端性能监控接入应用。如何接入应用，请参应用接入。

1. 登录腾讯云可观测平台。

2. 在左侧菜单栏中单击前端性能监控 > 页面性能。

3. 进入页面性能页面即可查看页面性能情况。

展示页面性能关键指标变化趋势图。

·单击上方的图例可取消或展示对应的数据。

·支持按时间段或近14天粒度展示变化趋势图。

·在曲线中拖动鼠标可展示某一时刻首屏渲染时间。

·把鼠标移动到图表中，并向上滑动鼠标可缩小图表时间跨度，向下滑动鼠标可放大图表时间跨度。

通过页面加载瀑布图可查看各阶段的耗时情况，你可以根据各阶段耗时情况优化页面性能。
页面完全加载时间为 TCP、DNS、SSL、TTFB、DOM 解析和资源加载的时间之和。

Core Web Vitals 通过不同的角度加载速度，交互性和视觉稳定性反映了用户的体验，并根据良好，需要优化，较差三个等级的进行评分，协助你进行用户体验优化。
Core Web Vitals 包含四个核心基础指标 LCP、FID、CLS 和 FCP，含义如下：

指标名称	英文名称	含义
LCP	Largest Contentful Paint	从用户请求网址到在可视窗口中渲染最大可见内容元素所需的时间。最大的元素通常是图片或视频，也可能是大型块级文本元素
FID	First Input Delay	从用户首次与你的网页互动（单击链接、单击按钮等）到浏览器响应此次互动之间的用时。这种衡量方案的对象是被用户首次点击的任何互动式元素
CLS	Cumulative Layout Shift	CLS 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。得分是零到任意正数，其中 0 表示无偏移，且数字越大，网页的布局偏移越大
FCP	First Contentful Paint	测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。

如下，表示你的 LCP 性能处于建议优化等级，可从渲染最大可见内容元素（图片、视频）方向进行优化。

视图名称	说明
页面性能 TOP 视图	展示页面性能最差的 5个页面。包括首屏时间、页面完全加载时间、与前一天的对比情况等数据。帮助你了解性能较差的页面情况，并快速定位性能瓶颈。
网络/平台视图	用饼图形式展示来自各地域网络或平台的异常数量、占比及首屏时间。其中网络包括3G、4G、WIFI 等，平台包括 Macos、Windows、IOS 等
ISP 视图	用饼图形式展示来自各运营商的异常数量、占比及首屏时间。运营商包括移动，电信、联通等。
地区视图	用饼图形式展示来自各区域的异常数量、占比及首屏时间。
品牌/机型视图	用饼图形式展示来自手机品牌/机型的异常数量、占比及首屏时间。
浏览器视图	用饼图形式展示来自各浏览器的异常数量、占比及首屏时间。
Version 视图	用饼图形式展示来自各应用版本的异常数量、占比及首屏时间。你可以通过在接入应用时的 new Aegis 传入 version 来自定义研发相关的版本信息，默认使用 SDK 的版本。
Ext1 视图、Ext2 视图、Ext3 视图	自定义视图，由你自定义上报时传入参数。详情请参见接入指南。

注意：视图都需要勾选自定义视图选择才可生效；如下所示：

指标名称	单位	含义
首屏渲染时间（FMP）	ms	从用户请求打开新网页到浏览器呈现出首屏内容所用的时间
页面完全加载	ms	从用户请求打开新网页到浏览器完全呈现出相应网页所用的时间。页面完全加载时间 = TCP + DNS + SSL + TTFB + DOM 解析 + 资源加载
首字节（TTFB）	ms	发出页面请求到接收到应答数据第一个字节所花费的毫秒数
DOM 解析（DOM Parse）	ms	DOM 解析耗时
DOM Ready	ms	初始的 HTML 文档被完全加载和解析完成时间
DNS	ms	DNS 查询耗时
TCP	ms	TCP 连接耗时
SSL	ms	SSL 安全连接耗时
响应请求	ms	响应请求耗时
Resource Download	ms	资源加载耗时
Content Download	ms	表示浏览器从接收到第一个字节到最后一个字节所花费的时间