English | 中文

React Vitals

用于提升 Web Vitals 评分 (FCP, LCP, CLS, INP) 的 React 组件，钩子和工具集合。

AfterClick

目前，LCP 计算 DOM 元素会在用户交互后停止。所以你可以在用户点击页面之后再展示广告和弹窗，以避免 LCP 增加。

AfterClick 组件就是用来将内容延迟到用户点击之后挂载。

``jsx
import { AfterClick } from 'react-vitals';

;
`

Slice

LCP 的意思是 Largest Content Painting，最大内容绘制。通常 LCP 元素是图片或者大块文字。

Slice 将一个大的块切成很多小块，再拼接起来。这样就无法被识别为 LCP 元素，而且视觉上和原来没有什么不同。

`jsx
import { Slice } from 'react-vitals';


src="https://s.cn.bing.net/th?id=OHR.ZaharaDeLaSierra_EN-CN1476470896_1920x1080.webp&qlt=50"
width={160}
height={90}
/>
;
`

Slice 切片的默认尺寸是 50x50，可以适应大多数情况。如果它不生效的话，你可以改成更小的值。

`jsx
import { Slice } from 'react-vitals';


src="https://s.cn.bing.net/th?id=OHR.ZaharaDeLaSierra_EN-CN1476470896_1920x1080.webp&qlt=50"
width={160}
height={90}
/>
;
`

SlowSkip

SlowSkip 是当页面首次加载速度较慢时进行降级，跳过某些非功能组件的渲染，比如广告等。

默认的阻断窗口期为 1.5s 到 10s。Google 设定的 LCP 优的标准是 2.5s，按照经验图片等内容的平均加载时间为 1s 左右，2.5s 减去 1s 就得到了 1.5s 的默认值。

`jsx
import { SlowSkip } from 'react-vitals';





;
`

默认阻断窗口毕竟只是一个经验值，并非适用于所有场合。你需要根据实际 Web Vitals 统计数据来调整 start 值，以避免数值太小导致内容展示率过低，或者数值太大导致 LCP 无变化。end 的值通常不需要调整，但是如果你想的话，也是可以的。

`jsx
import { SlowSkip } from 'react-vitals';





;
``