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

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

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

接入前端性能监控

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

流量计费套餐包流量计费

应用接入

4.配置应用相关信息

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

npm
/pre>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="C4DDHaAC">一种方式是直接在网站的头部添加下面的代码：
/p>
p data-pid="QVZ_Galg">另一种方式是是同时引入两个js文件，比如笔者使用的是hexo+butterfly主题，如果直接更改代码比较麻烦，只能引入两个js文件，另一个做为钩子
/p>
p>

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

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="xPDqxDOT">浏览器打开开发者工具查看请求，如正常上报，您应该能看到下述请求：
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="Rmmzt8Z-">至此，我们已经完成了RUM接入的全部流程
/p>
h2 data-into-catalog-status="">使用前端性能监控
/h2>
p data-pid="aeatlk8d">完成接入后，我们可以对上报的数据进行分析，并依据此对网站性能进行优化
/p>
h3 data-into-catalog-status="">页面性能
/h3>
p data-pid="RTbPPfYa">
性能视图
/p>
p data-pid="mtJ-IZLF">在此我们可以查看相关的关键指标，如FMP、CLS、FCP等
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="fRla9-c-">
页面加载瀑布图
/p>
p data-pid="Beybmzcb">在此处我们可以查看各项动作的耗时时间，如DNS查询耗时、TCP链接耗时等，通过对耗时高的选项进行优化，优化页面性能，关于这里如何进行优化，我们放到第三部分性能优化进行讲解
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="UriVYcxu">
Core Web Vitals
/p>
p data-pid="Il3Y3sHp">Core Web Vitals 通过不同的角度加载速度，交互性和视觉稳定性反映了用户的体验，关于更多相关信息，可以阅读https://web.dev/defining-core-web-vitals-thresholds/
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="X9qKHlqz">
页面性能TOP视图
/p>
p data-pid="hLG_yS9w">对可以查看每个页面加载耗时排行，但对笔者来讲没有什么用，因为笔者不同的文章页面可能会有不同的内容，就可能导致图片数量存在差异等等，进而影响加载速度
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="LZ0uKg-r">
地区视图&ISP视图
/p>
p data-pid="mDF74AbR">可以监控网站在不同地区或运营商的加载速度
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="qJs7dCzL">
其它
/p>
p data-pid="LSFNtGN4">关于页面性能的其他指标不再赘述，感兴趣可以自行查看https://cloud.tencent.com/document/product/1464/58143
/p>
h3 data-into-catalog-status="">静态资源
/h3>
p data-pid="_y0eNaNX">在此页面可以查看指定页面静态资源的加载耗时
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="YEWdSvAM">
API监控
/p>
p data-pid="oxlmcipx">在此页面可以查看页面相关API接口耗时，以及请求成功率
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
h2 data-into-catalog-status="">性能优化
/h2>
h3 data-into-catalog-status="">DNS 查询耗时
/h3>
p data-pid="dWlOvbsE">此处一般不会对网站的加载速度影响太多，在过去两年中曾碰到很多用户反馈因为解析导致网站加载速度变慢，但实际核实下来来看，一般网站速度和DNS没有什么关系，但存在两种例外的情况：
/p>
p data-pid="sxoHBIW_">1.使用海外解析厂商
/p>
p data-pid="bGj287Rv">由于海外解析厂商解析节点通常无法覆盖中国大陆，或大陆访问延时较高，从而会产生数百ms解析延时，甚至解析超时，影响站点访问，
/p>
p data-pid="u-P7hG8r">2.非常用域名后缀
/p>
pre>
.tk
/pre>
p data-pid="OVHyJsPq">解决方案：
/p>
pre>
.com、.cn
/pre>
p data-pid="qMowQy6I">第二点是通过拨测工具进行dns查询，使相关的记录被缓存到递归服务器中，可以加快解析速度；
/p>
p data-pid="nOfL3Xj-">第三点是购买付费的解析服务，比如DNSPod专业版；严格来说，只要你网站访问量大，解析延迟很自然的就会降低下来了，这里涉及到一些DNS缓存的问题，在此篇文章就不细讲了。
/p>
h3 data-into-catalog-status="">TCP 连接耗时
/h3>
p data-pid="sfkbaEDm">
TCP 连接耗时主要受以下几个因素影响：
/p>
p data-pid="S_UGMfYx">下面简单的总结来说和网路线路、机器负载有较大的关系
/p>
p data-pid="Fm9JP3q3">网络延迟：远程服务器和本地设备之间的网络连接速度和质量对 TCP 连接耗时产生直接影响。
/p>
p data-pid="VhjhdbT4">服务器负载：如果服务器高负载或出现拥堵，建立新连接时可能会产生额外的延迟。
/p>
p data-pid="eDtNUbzi">设备性能：本地设备的处理器、内存和硬盘性能会影响 TCP 连接速度。
/p>
p data-pid="KBEwKv68">软件实现：TCP 连接的握手过程可能会因为软件实现的不同而有所差异，导致连接耗时不同。
/p>
p data-pid="lzbVaNj1">
优化：
/p>
p data-pid="mrdYi3R2">简单的总结一下：买点线路好的机器，降低服务器负载、使用CDN进行分发
/p>
p data-pid="wxfOxgoF">优化网络环境：确保网络连接质量良好，可以尝试使用更快的网络连接或减少网络拥堵，此外还可以考虑腾讯云 CDN 、EdgeOne 等边缘加速手段。
/p>
p data-pid="AfaLqfNr">负载均衡：如果可能，可以尝试在多个服务器之间进行负载均衡，以减轻单个服务器的压力。
/p>
p data-pid="g_uAKAXS">优化本地设备性能：升级硬件设备，例如处理器、内存和硬盘，以提高性能。
/p>
p data-pid="7Gg16Ugj">优化软件实现：针对特定软件，进行性能调优和优化。
/p>
p data-pid="i6O5kl7G">使用更高效的协议：如果可能，可以尝试使用更高效的协议，如 HTTP/2 或 QUIC，以减少握手所需的时间，目前QUIC是一种更加高效的解决方案，如您使用Nginx，可以参考https://r2wind.cn/articles/20230526.html
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
h3 data-into-catalog-status="">SSL 耗时
/h3>
p data-pid="3zqXPnaT">这里可能导致耗时的原因可能有两个，一个是算法所带来的加密解密效率问题，针对此可采用效率更高的ECC算法；另一个则是OCSP验证有效性时可能产生的延迟，针对此可以采用具有境内OCSP的节点的证书 and 通过 OCSP 装订来避免此问题。
/p>
h3 data-into-catalog-status="">资源加载
/h3>
p data-pid="sxPL6Ctg">资源加载是页面性能优化的大头，如图片、字体、视频等、此外还包括一些 CSS、JS 资源等，总结下来优化方式大概有以下几点：
/p>
p data-pid="szGcWR6G">对静态资源使用 CDN 进行分发，使用 CDN 将静态资源预缓存到 CDN 边缘节点，降低加载延迟，缓解源站压力；
/p>
pre>
Cache-Control: max-age=604800
/pre>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
pre>
Accept
/pre>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="gB_ZlLiX">对字体进行切片，可以通过字体切片等方式降低字体包文件的大小，可以参考https://r2wind.cn/articles/20230612.html；
/p>
p>

/p>
figure data-size="normal">
/figure>
p>

/p>
p data-pid="kq9hb9ZD">此外还可以通过 gzip 和 brotil 进行压缩，但个人对此效果感知较差；
/p>