加载性能

操作步骤

1. 登录APM控制台。
2. 单击左侧，选择“管理与监管> 应用性能管理 APM”，进入APM服务页面。
3. 在左侧导航栏选择“前端监控 > 加载性能”，默认展示该站点“加载性能”详情。
   图1 加载性能
   
   • 单击“站点”、“运营商”、“地域”、“浏览器”以及“操作系统”的下拉菜单选择筛选条件，进一步查看所需要的信息。
   • 展示平均加载时间、P75 LCP最大内容绘制、JS错误数、慢接口占比、接口成功率、资源加载次数、资源加载成功率、资源加载平均耗时、静态资源加载次数、静态资源加载平均耗时、动态资源加载次数以及动态资源加载平均耗时。
   • 页面性能：展示访问速度指标趋势图，性能趋势图、性能样本分布、加载次数、加载过程耗时、加载状态。
   • 详情分析：展示页面性能分析列表以及资源加载列表。
   • 分布统计：展示地域分布、运营商分布、浏览器分布以及操作系统分布相关指标信息。

     表1 加载性能相关参数说明

     参数名称	说明
     平均加载时间	页面加载的平均时间。
     P75 LCP最大内容绘制	最大内容绘制(LCP)是页面内首次开始加载的时间点，到可视区域内最大的图像或文本块完成渲染的相对时间。这里取的是P75分位数的值。
     JS错误数	JS错误的数量。
     慢接口占比	慢接口指加载耗时大于1000ms的调用，慢接口占比=慢接口数量/总接口数量。
     接口成功率	接口成功率=接口成功数/总接口。
     资源加载次数	静态资源和动态资源加载总次数。
     资源加载成功率	动态资源和静态资源加载的成功率。
     资源加载平均耗时	静态资源和动态资源加载平均耗时。
     静态资源加载次数	静态资源加载次数。
     静态资源加载平均耗时	静态资源加载的平均耗时。
     动态资源加载次数	动态资源加载的次数。
     动态资源加载平均耗时	动态资源加载的平均耗时。

4. 在加载性能页面的右上角，单击时间维度选择按钮，默认“近20分钟”。

   当前支持“近20分钟”、“近1小时”、“近3小时”、“近6小时”、“近1天”、“今天”、“昨天”、“近7天”、“近30天”以及自定义。

页面性能

“页面性能”页签展示访问速度指标趋势图，性能趋势图、性能样本分布、加载次数、加载过程耗时、加载状态。

图2 页面性能

• 访问速度指标趋势图
  展示加载次数、平均加载时间、FCP首批时间、FP白屏时间、TTI可交互时间、CLS累积布局偏移、INP绘制交互以及平均LCP最大内容绘制。

  表2 访问速度指标趋势图相关参数说明

  参数名称	说明
  加载次数	页面加载次数。
  平均加载时间	页面平均加载时间。用户打开一个网站时，从开始加载直到浏览器首页面内容渲染完成的耗时。
  FCP首屏时间	页面渲染出第一个内容（文本、图片、canvas等）的时间。
  FP白屏时间	页面渲染出第一个像素点的时间，一般发生在HTML解析完成或解析一部分时触发。
  TTI可交互时间	页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
  CLS累计布局偏移	累计布局偏移(CLS)会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。
  INP绘制交互	绘制交互(INP)它是一种网站性能度量指标，用于衡量用户界面的响应性，即网站对用户的交互（如点击或按键）做出反应的速度。(默认关闭，通过初始化参数中的enableInp开关控制。)
  平均LCP最大内容绘制	最大内容绘制(LCP)是页面内首次开始加载的时间点，到可视区域内最大的图像或文本块完成渲染的相对时间。这里取的是平均时间。

  • 单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
  • 鼠标停留在柱形图上，可以展示该节点详细指标信息。
• 性能趋势图

  在某个时间点，某个指标的P50、P75、P90、P95、P99的趋势图。

  图3 性能趋势图
  
  • 如图3中1所示，单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
  • 如图3中2所示，在下拉菜单中选择指标，包括：LCP最大内容绘制、FCP首屏时间、CLS累积布局偏移、FP白屏时间以及INP绘制交互。
  • 如图3中3所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
• 性能样本分布
  在某个时间段内，加载次数的柱形图。鼠标停留在柱形图上，可以展示该节点详细指标信息。

  • 如图4中1所示，在下拉菜单中选择指标，包括：LCP最大内容绘制、FCP首屏时间、CLS累积布局偏移、FP白屏时间以及INP绘制交互。

    如图4所示，LCP最大内容绘制时间在2500~3000ms之间的加载次数为2次。

  • 如图4中2所示，鼠标停留在柱形图处，可以展示该节点详细指标信息。
    图4 性能样本分布
    
• 加载次数

  在某个时间点，某个指标的script、fetch、xmlhttprequest、img以及other的趋势图。

  图5 加载次数
  
  • 如图5中1所示，单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
  • 如图5中2所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
• 加载过程耗时

  在某个时间点，某个指标的RTT耗时、DNS耗时、TCP耗时、SSL耗时的趋势图。

  图6 加载过程耗时
  
  • 如图6中1所示，单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
  • 如图6中2所示，在下拉菜单中选择指标，包括：script、fetch、xmlhttprequest、img以及other。
  • 如图6中3所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
• 加载状态

  在某个时间点，某个指标的失败率、错误数、缓慢率的趋势图。

  图7 加载状态
  
  • 如图7中1所示，单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
  • 如图7中2所示，在下拉菜单中选择指标，包括：script、fetch、xmlhttprequest、img以及other。
  • 如图7中3所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。

详情分析

“详情分析”展示页面性能分析列表以及资源加载列表。

1. 在左侧导航栏选择“前端监控 > 加载性能”，向下滚动页面，默认展示“详情分析”页签。
   • 页面性能分析
     展示页面性能数据分析信息详情，包括：页面URL、加载次数、P75 LCP最大内容绘制、平均LCP最大内容绘制、P75 LCP最大内容绘制-含预渲染、平均LCP最大内容绘制-含预渲染、平均加载时间、FCP首屏时间、FP白屏时间、TTI可交互时间、CLS累积布局偏移以及INP绘制交互。

     图8 页面性能分析
     
     • 在页面性能分析列表的搜索框输入搜索条件后，单击，查看满足搜索条件的页面性能分析列表。
     • 单击页面性能分析列表右上角的自定义列表项，使界面上显示您需要查看的指标数据。
     • 页面性能分析列表默认按照“加载次数”降序排列。
     1. 单击页面性能分析“页面URL”列的某一条URL链接，展示该URL加载性能的指标数据值。
        图9 加载性能URL
        

        表3 加载性能相关参数说明

        参数名称	说明
        加载次数	页面加载次数。
        平均加载时间	页面平均加载时间。用户打开一个网站时，从开始加载直到浏览器首页面内容渲染完成的耗时。
        FCP首屏时间	页面渲染出第一个内容（文本、图片、canvas等）的时间。
        FP白屏时间	页面渲染出第一个像素点的时间，一般发生在HTML解析完成或解析一部分时触发。
        TTI可交互时间	页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
        首次有效绘制	浏览器从响应用户输入网址地址，到首次渲染有意义的内容的时间。
        P75 LCP最大内容绘制	最大内容绘制(LCP)是页面内首次开始加载的时间点，到可视区域内最大的图像或文本块完成渲染的相对时间。这里取的是P75分位数的值。
        图片数量	页面展示图片的数量。
        首载接口数量	首次加载接口的数量。
        接口数量	访问某一个页面的url接口数量。
        静态资源数量	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的数量。
        首载资源大小	首次加载资源的大小。
        JS错误率	JS错误率=运行JavaScript触发的错误总数/运行JavaScript的总数。
        资源加载耗时	页面加载资源消耗的时间。
        网络耗时	网络通信中消耗的时间。

        • 页面访问速度指标趋势图
          展示某条URL访问页面的加载次数、平均加载时间、FCP首屏时间、FP白屏时间、TTI可交互时间、CLS累积布局偏移、INP绘制交互以及平均LCP最大内容绘制。各个参数说明参见表2。

          图10 页面访问速度指标趋势图
          

          1. 单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
          2. 鼠标停留在柱形图上，可以展示该节点详细指标信息。
        • 性能趋势图
          在某个时间点，某个指标的P50、P75、P90、P95、P99的趋势图

          图11 性能趋势图
          

          1. 如图中1所示，单击各指标名称前的彩色圆圈，当鼠标悬浮于圆圈上时，则该指标展示为高亮；当圆圈呈现灰色时，则该指标将不在趋势图中展示；当圆圈呈现彩色时，则该指标在趋势图中展示。
          2. 如图中2所示，在下拉菜单中选择指标，包括：LCP最大内容绘制、FCP首屏时间、CLS累积布局偏移、FP白屏时间以及INP绘制交互。
          3. 如图中3所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
        • 性能样本分布
          在某个时间段内，加载次数的柱形图。鼠标停留在柱形图上，可以展示该节点详细指标信息。

          1. 如图12中1所示，在下拉菜单中选择指标，包括：LCP最大内容绘制、FCP首屏时间、CLS累积布局偏移、FP白屏时间以及INP绘制交互。

             如图12所示，LCP最大内容绘制时间在0~1000s之间的加载次数为6次。

          2. 如图12中2所示，鼠标停留在折线节点处，可以展示该节点详细指标信息。
             图12 性能样本分布
             
        • 页面资源加载时间趋势图
          展示某条URL页面资源加载时间、静态资源数量、接口数量以及静态资源大小。

          表4 页面资源加载时间指标相关参数说明

          参数名称	说明
          资源加载时间	页面加载资源消耗的时间。
          静态资源数量	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的数量。
          接口数量	访问某一个页面的url接口数量。
          静态资源大小	前端固定页面，不需要查询数据库和程序处理，直接就能在页面进行显示的资源的大小。

          图13 页面资源加载时间趋势图
          
        • 加载性能分布图
          展示URL加载性能在区间内的加载次数。鼠标停留在柱形图上，可以展示该节点详细指标信息。

          图14 加载性能分布图
          
        • 页面加载瀑布图

          将页面加载的各部分耗时分成网络耗时、DOM解析、资源加载三个主要部分显示在右上角，并将网络连接的细节拆分到瀑布图中显示。

          

          表5 页面加载时间相关参数说明

          参数名称	说明
          DNS查询	查找此页面的DNS所花费的时间。
          TCP连接	用户连接到服务器所需的时间，其中包括SSL握手、SSL建连、TCP的三次握手等时间。
          SSL建连	SSL建联的耗时，在HTTPS请求中存在此耗时，被包含在TCP连接时间中。
          请求响应（ttfb）	请求发送到收到第一个字节的时间。
          内容传输	浏览器接收服务器响应的耗时。
          网络耗时	从用户发出页面请求到浏览器接收服务器响应的耗时，包括DNS查询、TCP连接、请求响应、网络传输等事件。
          DOM解析	DOM解析阶段，绘制浏览器DOM结构树的时间。
          资源加载	文档解析完成，HTML、JS解析完成，CSS、图片等资源加载完成的时间。

        • 页面单次访问性能分析
          1. 移到页面最下方“页面单次访问性能分析”表格，单击“查看详情”，查看用户单次访问的页面详情信息。

             

             页面单次访问性能分析默认按照“访问时间”降序排列。

          2. 进入单次访问详情页面，查看用户页面性能的详细信息。页面主要分为三个模块：页面数值信息、页面加载时间分解图、资源加载分析图。
             1. 页面数值信息

                

             2. 页面加载时间分解图，展示从页面加载到页面加载完成的各部分耗时，瀑布图参数说明见表5 页面加载时间相关参数说明。

                

             3. 资源加载分析图，展示资源加载相关信息。不同资源类型有不同的颜色，柱子长度代表加载资源的耗时。悬浮到柱子上方可看到此加载时间的具体信息，可通过右上角的页签组件进行类型的过滤。

                

     2. 单击“接口数量”下面的“查看”，展示某url调用接口的详细信息。包括：请求总数、错误次数、错误率、慢请求次数、慢请求占比、成功调用平均耗时以及指定API链路追踪列表、API汇总列表和状态码汇总列表。
        图15 url详细信息
        

        表6 url调用接口相关参数说明

        参数名称	说明
        请求总数	API请求的请求总数。
        错误次数	API请求的错误次数。
        错误率	API请求的错误率。
        慢请求次数	API请求的慢请求次数。
        慢请求占比	API请求的慢请求占比。
        成功调用平均耗时	API请求成功调用平均耗时。

        • 指定API链路追踪列表：展示指标包括：上报时间、url、API、设备ID、会话ID、uid、tag、附加信息、请求耗时、等待耗时、连接耗时、TTFB请求时间、下载时间、API请求状态、状态码以及后台信息。详细操作参见步骤4。
        • API汇总列表：展示指标包括：API、请求总数以及请求次数占比。详细操作参见API汇总列表。
        • 状态码汇总列表：展示状态码、请求总数以及请求次数占比。详细操作参见请求状态码分布详细信息下钻。
   • 资源加载

     展示资源加载信息详情，包括：资源名称、资源类型、请求次数、平均耗时(ms)、失败率(%)、慢请求以及慢请求占比(%)。

     图16 资源加载
     
     • 在资源加载列表的搜索框输入搜索条件后，单击，查看满足搜索条件的资源加载列表。
     • 单击资源加载列表右上角的自定义列表项，使界面上显示您需要查看的指标数据。
     • 资源加载列表支持详细信息下钻。
       1. 单击资源加载列表列中的某一条资源名称，展示该加载资源的加载次数、平均加载时间、资源请求失败率、数据量、TCP耗时、SSL耗时以及DNS耗时等信息。
          图17 资源加载下钻详细信息
          

          加载情况：鼠标放置在“加载情况”的趋势图上，则展示当前时间的慢请求延时、慢请求占比、慢错误请求延时以及错误请求占比。

          请求耗时：鼠标放置在“请求耗时”的趋势图上，则展示当前时间的平均请求时间、平均RTT、平均DNS时间、平均TCP时间以及平均SSL时间。

          加载状态码：鼠标放置在“加载状态码”的趋势图上，则展示当前时间的各状态码占比。

          地域分布：鼠标放置在“地域分布”的趋势图上，则展示当前时间的各地域占比。

          浏览器分布：鼠标放置在“浏览器分布”的趋势图上，则展示当前时间的各浏览器占比。

          系统分布：鼠标放置在“系统分布”的趋势图上，则展示当前时间的各系统占比。

          运营商分布：鼠标放置在“运营商分布”的趋势图上，则展示当前时间的各运营商占比。

          列表：展示页面网络资源详情，包括访问时间、状态码、平均请求时间、平均RTT、平均DNS时间、平均TCP时间、平均SSL时间以及会话ID。

       2. 单击“访问时间”列的某一条访问时间，展示该访问时间的访问数据。
          图18 加载资源-访问数据
          
          • 加载信息：展示当前时间的加载信息，包括：加载时间(LoadTime)、静态资源大小、状态码、请求响应 (ttfb)、内容传输耗时、TCP耗时、SSL耗时以及DNS耗时。
          • 访问信息：展示当前时间的访问信息，包括：访问页面以及访问时间。
          • 访问用户：展示当前时间的访问用户的信息，包括：用户ID、地域、浏览器、分辨率、用户IP、操作系统、运营商以及会话ID。

            单击“会话ID”跳转至“会话追踪”页面，展示用户轨迹的详细信息。“会话追踪”介绍请参见会话追踪。

          • 页面加载分解图：展示当前时间的页面加载信息的柱状图。包括：DNS查询、TCP连接、SSL建连、内容传输耗时以及内容传输五种指标，在某个时间点的内容传输。内容传输包括：起始时间、结束时间以及耗时。

分布统计

“分布统计”展示地域分布、运营商分布、浏览器分布以及操作系统分布相关指标信息。

1. 在左侧导航栏选择“前端监控 > 加载性能”，向下滚动页面，单击“分布统计”页签，查看分布统计相关分布图以及指标列表。
   • 分布统计维度：分布统计共分为地域分布、运营商分布、浏览器分布以及操作系统分布四个维度。
   • 分布图：分别展示各地域、各运营商、各浏览器以及各操作系统的总加载次数以及占比。
   • 分布列表：展示各个维度的关键字、加载次数及占比、加载时间、白屏时间以及可交互时间。

     表7 分布统计列表相关参数说明

     -	参数名称	说明
     地域分布	地域	地域名称。
     	加载次数及占比	某地域加载页面的次数以及占总加载次数的百分之几。
     	加载时间	某地域加载页面的总耗时。
     	白屏时间	某地域白屏时间总耗时。
     	可交互时间	某地域可交互时间总耗时。
     浏览器分布	浏览器	浏览器名称。
     	加载次数及占比	某浏览器加载页面的次数以及占总加载次数的百分之几。
     	加载时间	某浏览器加载页面的总耗时。
     	白屏时间	某浏览器白屏时间总耗时。
     	可交互时间	某浏览器可交互时间总耗时。
     运营商分布	运营商	运营商名称。
     	加载次数及占比	某运营商加载页面的次数以及占总加载次数的百分之几。
     	加载时间	某运营商加载页面的总耗时。
     	白屏时间	某运营商白屏时间总耗时。
     	可交互时间	某运营商可交互时间总耗时。
     操作系统分布	操作系统	操作系统名称。
     	加载次数及占比	某操作系统加载页面的次数以及占总加载次数的百分之几。
     	加载时间	某操作系统加载页面的总耗时。
     	白屏时间	某操作系统白屏时间总耗时。
     	可交互时间	某操作系统可交互时间总耗时。

2. 单击“地域分布”、“浏览器分布”、“运营商分布”以及“操作系统分布”中的蓝色字体，支持下钻功能。
   • 地域分布
     1. 单击“地域”列某个地域名称，展示该地域访问统计详细信息。详细操作以及介绍参见，请参见1.a~1.b。
   • 浏览器分布
     1. 单击“浏览器”列某个浏览器名称，展示该浏览器访问统计详细信息，详细操作以及介绍参见，请参见1.a~1.b。
   • 运营商分布

     单击“运营商”列某个运营商名称，展示该运营商访问统计详细信息，详细操作以及介绍参见，请参见1.a~1.b。

   • 操作系统分布

     单击“操作系统”列某个操作系统名称，展示该操作系统访问统计详细信息，详细操作以及介绍参见，请参见1.a~1.b。