Web Vitals 演示 - 前端库演示集合

核心 Web Vitals 指标

Largest Contentful Paint (LCP)

测量中...

加载中

衡量页面主要内容的加载速度。良好的 LCP 应该在 2.5 秒内完成。

First Input Delay (FID)

等待交互...

等待中

测量用户首次交互的响应时间。良好的 FID 应该少于 100 毫秒。

Cumulative Layout Shift (CLS)

测量中...

测量中

衡量页面布局稳定性。良好的 CLS 应该少于 0.1。

其他性能指标

-

First Contentful Paint (FCP)

首次内容绘制时间

-

Time to First Byte (TTFB)

首字节时间

-

Interaction to Next Paint (INP)

交互到下次绘制时间

Navigation Type

导航类型

性能测试工具

交互延迟测试

点击下面的按钮测试 First Input Delay (FID)

指标历史记录

暂无历史记录

性能趋势图表

性能基准对比

与行业基准对比

LCP 对比

当前站点

行业平均: 3.2s

FID 对比

当前站点

行业平均: 85ms

CLS 对比

当前站点

行业平均: 0.15

性能优化建议

提升 LCP 的方法

优化服务器响应时间
使用 CDN 加速资源加载
压缩和优化图片
预加载关键资源

改善 FID 的方法

减少 JavaScript 执行时间
使用 Web Workers 处理重型任务
拆分长任务
优化第三方脚本

降低 CLS 的方法

为图片和视频设置尺寸属性
避免在现有内容上方插入内容
为广告位预留空间
使用 transform 替代会影响布局的属性

布局偏移测试

这个内容突然出现会导致页面布局偏移，影响 CLS 指标。