1+1>2｜加快应用访问速度的两大利器

作者简介：胥耀，腾讯云监控产品经理，具有六年云产品工作经验，目前主要负责腾讯云前端性能监控和云监控相关的产品策划工作，对监控和运维领域具有深刻理解。

前言

随着互联网的发展，网站提供的功能越来越丰富；在移动互联网的兴起下，小程序和手机应用下的图片、短视频、长视频等内容日益增多。

在应用较为简单时，性能问题难以感知。但随着应用上的图片、视频等内容增多，用户的访问应用的速度会变慢，体验也会变差。

根据美国电商公司亚马逊的调研，网页打开的速度每快100毫秒，就会让网站增加1%的收益。若能增加应用的访问速度，将会极大的提升业务收入。

使用腾讯云 CDN 加速应用

内容分发网络（Content Delivery Network，CDN）是在现有互联网中增加的一层新的网络架构，由遍布全球的高性能加速节点构成。

这些节点都会按照设定好的缓存策略存储业务内容，例如：Javascript 文件、样式表、图像和视频等。当用户向网站或小程序发起请求时，请求会被调度至最接近用户的服务节点，直接由服务节点快速响应，有效降低用户访问延迟，提升可用性。

腾讯云内容分发网络（CDN）在中国境内拥有2000+个加速节点，境内总储备带宽 110Tbps+。

境内加速节点均为腾讯高规格、高安全性自建机房，享受运营商高质量网络，节点覆盖境内所有省份、自治区、直辖市。与此同时，通过推动三大运营商及50+家中小运营商接入，建立四大中心节点，大幅度提升中小型运营商的加速效果。

在腾讯云控制台开通 CDN 服务后，进入 CDN 控制台，在左侧导航栏中找到域名管理，单击添加域名即可将应用接入腾讯云 CDN，体验网站、下载、音视频加速等功能。

如何检测 CDN 资源的真实加速情况

通过 CDN 进行应用资源加速后，可以在腾讯云 CDN 控制台—全网状态监控模块查看不同地域以及运营商的可用性数据。

CDN 全网状态监控模块

这些数据均是用户在请求资源时，对到达边缘节点的请求响应后进行时延统计得出。进而，绘制出全国的 CDN 质量地图。不过这种方式无法获取应用的真实访问速度，主要有以下两个原因：

• 客户端到 CDN 边缘节点的网络链路不通，导致边缘节点无法接受请求，从而无法统计到响应的时延数据；
• 统计出的时延数据为机房探测节点访问资源的理论值，无法反映用户在复杂网络环境下的真实体验。

上面两个因素可能会导致统计数据看起来很美好，但是用户真实体验却并不理想。

正确的姿势，是在用户触达网站或小程序时就将资源的加载速度记录下来，通过静态资源加载速度，全链路衡量 CDN 加速效果。

前端性能监控（RUM）是腾讯云提供的用户真实体验监测工具，只要一行代码即可将网站或小程序接入。

基于腾讯内部多年实践，每天支持 4000 亿数据上报量

应用接入腾讯云前端性能监控（RUM）后，可以在腾讯云控制台查看以下数据，帮助解决用户真实体验和 CDN 边缘节点统计数据不一致的问题：

• 网站和小程序的首屏耗时、页面性能等
• JS 代码错误、接口报错等客户端错误信息
• 页面日志查询，还原异常发生现场
• JS、CSS、图片加载时长等静态资源

如下为腾讯云前端性能监控（RUM）的异常分析功能示例图，展示出 JS 加载异常、 CSS 加载异常、音视频资源异常等信息，从用户视角来衡量网站资源的加载情况。

异常分析功能

1+1 > 2

RUM 和 CDN 的深度集成

为了方便用户在 CDN 控制台直接进行 JS、CSS、图片等资源的性能查看， RUM 和 CDN 产品进行深度合作，并且为每个接入的应用提供每天50万的免费上报额度，助力中小企业提升网站和小程序的用户体验。

如下图所示，CDN 控制台插件中心上线了由腾讯云前端性能监控（RUM）提供的性能监测组件，已在 CDN 接入的域名可以快速接入腾讯云前端性能监控（RUM）。

点击插件中心，即可看到性能监测插件

Step.1

点击性能监测插件右侧的开启按钮，首次开通需要进行前端性能监控服务的授权，授权后即可成功开启性能监测服务。

开启插件

Step.2

成功打开插件后，可以点击跳转进入应用列表。单击新建接入后，选择已经接入 CDN 的域名，将 SDK 安装到应用后，即完成了全部的接入操作。

1. 选择需要接入的域名：

2. 在需要监测的应用前端代码中引入指定的 <script> 标签内容：

Step.3

点击汇总分析，进入应用数据详情，可以查看更详细的性能信息：

插件主要提供以下功能和视图：

• 资源加载概览，包括加载数、成功率、失败次数和请求耗时；
• 资源加载视图，包括加载数量、TCP 连接时间、DNS 查询时间等；
• 资源请求 TOP 视图，包括资源请求量的排名和耗时平均数；
• 资源加载数量地图视图，更宏观的资源请求分布视角。

资源加载概览

资源加载视图

资源请求 TOP 视图

资源加载数量地图视图

Step.4

如需查看更多维度的数据，或在应用发生 CDN 资源加载缓慢等问题时及时获取通知，可以点击页面加载瀑布图和告警配置标签栏获取更多功能。

点击页面加载瀑布图获取更多维度数据

RUM 提供的页面加载瀑布图功能

更多插件使用说明，可以查看文档：

https://cloud.tencent.com/document/product/228/70968

结语

如上即为腾讯云为开发者提供的两大利器。通过腾讯云内容分发式网络（ CDN ）和腾讯云前端性能监控（RUM）这两大利器，能够大幅提升网站和小程序的加载速度，实现 1+1 > 2 的效果，提升用户数量和业务收入。点击文末 [阅读原文] 了解更多腾讯云前端性能监控（RUM）产品信息。

如有任何疑问

欢迎扫码进入官方交流群~

近期直播推荐：

直播主题：云拨测场景实战

直播简介：手把手教您如何高效配置拨测任务，并在多场景下进行拨测，实现有效监控

直播时间：2022年4月1日（周五） 20:00-21:00

直播方式：腾讯会议，可直接入会与导师互动

直播预约：识别下方二维码预约👇

直播详情：点击查看云拨测场景实战直播详情

前端性能监控相关文档推荐：

欢迎关注腾讯云监控&腾讯云 CDN

了解最新动态