网站应用性能简析

简介: 网站应用性能简析

image.jpeg


Web 应用分析



欢迎查看我写的《前端性能优化小技巧》、《快速搭建全链路平台》《四个例子教你提高用户体验》、《裸奔的前端绿皮车 》、《用户体验数据采集》、《报错/卡顿是制约产品体验的关键因素

简介


应用数据采集后,可以查看应用性能分析,改善页面加载(LCP)、互动性(FID)和页面稳定性(CLS),提高用户体验。

LCP、FID、CLS 是谷歌网站核心指标,用来衡量网站的载入速度、互动性和页面稳定性。


指标 说明 目标值
LCP(Largest Contentful Paint) 计算网页可视范围内最大的内容元件需花多少时间载入 小于2.5s
FID(First Input Delay) 计算用户首次与网页互动时的延迟时间 小于100ms
CLS(Cumulative Layout Shift) 计算网页载入时的内容是否会因动态加载而页面移动,0表示没有变化。 小于0.1


6c83a121fe49435a91810f6c26fc5b79~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

场景分析


根据可视化的Web应用分析,内置多维度Web应用监测数据场景,包括概览、页面性能分析、资源加载分析、JS错误分析。


概览


Web应用的概览场景统计页面访问的错误数、错误率、会话数、会话分布、浏览器、操作系统、最受欢迎页面、资源错误排行等内容,可视化的展示用户访问Web页面的数据统计,快速定位用户访问Web应用的问题,提高用户访问性能。可通过环境、版本筛选查看已经接入的Web应用。


e06edfde5c1c414ea6ac34ff3cf1bb5b~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg


性能分析


Web应用的页面性能分析,通过统计PV数、页面加载时间、网站核心指标、最受关注页面会话数、页面长任务分析、XHR & Fetch 分析、资源分析等指标,可视化的实时查看整体的Web应用页面性能情况,更精准的定位需要优化的页面,可通过环境、版本等筛选查看已经接入的Web应用。

2a1ec6fee783422e9d5ec977675d9ef7~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

资源分析


Web应用的资源分析,通过统计资源分类、XHR & Fetch 分析、资源耗时分析等指标,可视化的实时查看整体的Web应用资源情况;通过统计资源请求排行,更精准的定位需要优化的资源;可通过环境、版本等筛选查看已经接入的Web应用。

e89c0bcec5ef4fbd840b7aed5fed9325~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg


错误分析


Web应用的JS错误分析,通过统计错误率、错误分类、错误版本、网络错误状态分布等指标,可视化的实时查看整体的Web应用错误情况;通过受影响的资源错误统计,可快速定位资源错误;可通过环境、版本等筛选查看已经接入的Web应用。

b8b0f31d558b408bb3d78ea4e4cb2570~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

文章选自《web应用分析》

目录
相关文章
|
前端开发 JavaScript 安全
【面试题】路由的两种模式:hash模式和 history模式
【面试题】路由的两种模式:hash模式和 history模式
291 1
|
JavaScript 前端开发
VUE组件:如何在Vue中实现组件的动态引入?
VUE组件:如何在Vue中实现组件的动态引入?
2070 0
|
Java Spring
idea @Autowired 注入爆红(无法注入)
idea @Autowired 注入爆红(无法注入)
219 0
|
3月前
|
存储 缓存
sessionStorage和localStorage的区别
sessionStorage和localStorage的区别
180 0
|
存储 SQL 关系型数据库
15. Mysql 变量的使用
15. Mysql 变量的使用
217 1
|
应用服务中间件 nginx
Nginx nginx: [emerg] bind() to 0.0.0.0:8083 failed (48: Address already in use)
Nginx nginx: [emerg] bind() to 0.0.0.0:8083 failed (48: Address already in use)
716 1
|
12月前
|
安全 前端开发 JavaScript
什么是跨域?为什么会产生跨域?怎么解决跨域?
什么是跨域?为什么会产生跨域?怎么解决跨域?
1756 0
成功解决:Failed to load resource: net::ERR_FILE_NOT_FOUND
这篇文章提供了解决"Failed to load resource: net::ERR_FILE_NOT_FOUND"错误的步骤,通过修改配置文件中的资源路径设置为相对路径"./"来成功运行打包后的项目。
成功解决:Failed to load resource: net::ERR_FILE_NOT_FOUND
|
存储 JavaScript 搜索推荐
js【详解】arr.sort()数组排序(内含十大经典排序算法的js实现)
js【详解】arr.sort()数组排序(内含十大经典排序算法的js实现)
139 0
|
数据采集 数据挖掘 数据管理
如何发现和解决无效数据?
如何发现和解决无效数据?
290 2