web-vitals 站点健康metrics npm 包
web-vitals 是chrome 团队开源的站点健康metrics 包，轻量、使用简单
web-vitals 目前提供的metics
- CLS （Cumulative Layout Shift）
- FID (First Input Delay)
- LCP (Largest Contentful Paint)
- FCP (First Contentful Paint)
- TTFB (Time to First Byte)
参考使用
- 环境准备
yarn init -y
yarn add web-vitals
yarn add --dev parcel@next
- package.json
{
"name": "web-vitals-learning",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"web-vitals": "^0.2.4"
},
"devDependencies": {
"parcel": "^2.0.0-beta.1"
},
"scripts": {
"app": "parcel index.html"
}
}
- 简单代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demoapp {
text-align: center;
}
.demoapp img {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<div class="demoapp">
<img src="https://parceljs.org/assets/parcel-front@2x.webp" alt="">
</div>
<dlaongdemo></dlaongdemo>
<script src="./index.js"></script>
</body>
</html>
index.js
import {getCLS, getFID, getLCP,getTTFB} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
getTTFB(console.log);
- 运行
yarn app
- 效果
说明
当前web-vitals 还在持续开发中，但是提供的api 能力还是很不错的，我们可以方便的放到我们的分析平台中
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2019-08-23 presto-gateway lyft 团队开源的prestodb 的负载均衡、代理、网关工具
2018-08-23 streamsets 集成 minio s3测试
2018-08-23 streamsets 集成 cratedb 测试
2018-08-23 streamsets k8s 部署试用