Web页面性能优化——前端监控监控

原创

Im小泽

修改于 2023-09-12 20:49:33

7410

修改于 2023-09-12 20:49:33

对于网站来说，一个良好的页面性能能够有效的提升用户体验、增加用户留存率，并对网站的SEO排名和转化率带来积极的作用。而前端性能监控则可以帮助我们实时监测和分析页面加载速度、交互性和视觉稳定性等指标，通过定位和解决性能问题，进一步提升页面的加载速度和用户体验。而前端性能监控可以收集页面加载次数、完全加载耗时、慢加载占比、JS 错误次数等关键指标数据。这些数据可以帮助我们了解页面加载性能的具体情况，识别潜在的性能问题，并对页面进行有针对性的性能优化。从而减少页面卡顿等问题，从而提升页面加载速度和交互性。

本文分为接入前端性能监控、使用前端性能监控、性能优化三部分，可以通过目录跳转到对应的部分浏览。

接入前端性能监控

1.登录腾讯云可观测平台-前端性能监控控制台，首次使用需要创建业务系统

2.业务系统用于分组管理您接入的应用，请根据业务需要进行相关信息的配置

业务系统名称：根据需要填写，用以区分分组业务系统描述：根据需要填写，用以区分分组计费模式：支持后付费流量计费和预付费套餐包计费方式，流量计费单个主账号每天共享50万条的免费上报数据量，超过免费上报数据量后将按照0.34元/万条上报数据量进行计费，详情可参考计费概述。地域：根据业务用户地域选择标签：便于区分业务所属，按需设置

3.完成创建后转到应用设置，点击应用接入

4.配置应用相关信息

应用名称：根据实际需要配置应用描述：根据实际需要配置应用类型：根据实际需要选择，本文主要介绍Web页面优化，故选择Web 应用代码仓库地址：配置应用仓库，帮助识别应用类型（没什么必要）上报域名：填写访问域名，如r2wind.cn 所属业务系统：选择刚刚创建的业务系统

5.完成创建后会弹出接入指引，按指引完成引入，此处支持npm和<script> 标签引入,此处仅介绍<script> 标签引入的方式

一种方式是直接在网站的头部添加下面的代码：

 <script src="https://tam.cdn-go.cn/aegis-sdk/latest/aegis.min.js"></script>
      <script>
        const aegis = new Aegis({
          id: '16Q3xHlK1nQRxY4jj7', // 上报 id
          uin: 'xxx', // 用户唯一 ID（可选）
          reportApiSpeed: true, // 接口测速
          reportAssetSpeed: true, // 静态资源测速
          spa: true, // spa 应用页面跳转的时候开启 pv 计算
          hostUrl: 'https://rumt-zh.com'
        });
      </script>

另一种方式是是同时引入两个js文件，比如笔者使用的是hexo+butterfly主题，如果直接更改代码比较麻烦，只能引入两个js文件，另一个做为钩子

 <script src="https://tam.cdn-go.cn/aegis-sdk/latest/aegis.min.js"></script>
 <script src="/rum.js"></script>

// rum.js
const aegis = new Aegis({
    id: '16Q3xHlK1nQRxY4jj7', // 上报 id
    reportApiSpeed: true, // 接口测速
    reportAssetSpeed: true, // 静态资源测速
    spa: true, // spa 应用页面跳转的时候开启 pv 计算
    hostUrl: 'https://rumt-zh.com'
});

6.完成接入后，访问网站验证是否正常上报，如正常上报，可以在数据概览页面看到对应的数据，也可以查看网络请求验证数据是否正常上报

数据总览：