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 能力还是很不错的，我们可以方便的放到我们的分析平台中