P
性能指标实时监控面板
Performance Monitor Dashboard · Core Web Vitals 实时追踪
监控运行中
↻ 重置模拟
⏱
LCP
良好
1.8
s
Largest Contentful Paint
▲ 0.2s
⚡
INP
待改进
280
ms
Interaction to Next Paint
▼ 45ms
▦
CLS
良好
0.05
Cumulative Layout Shift
▲ 0.02
📈 页面加载阶段
实时
0ms
TTFB
Time to First Byte ·
320ms
FCP
First Contentful Paint ·
1.1s
LCP
Largest Contentful Paint ·
1.8s
DOM Interactive
DOMContentLoaded ·
2.1s
Fully Loaded
Window Load Event ·
--
📈 资源加载瀑布图
模拟
总数:
6
当前 LCP
1.8s
目标阈值
≤ 2.5s
LCP（Largest Contentful Paint）
衡量视口中最大可见内容元素的渲染时间。优化建议：确保服务器响应迅速（TTFB < 800ms），使用 CDN 加速，优先加载首屏关键资源，对 LCP 元素使用
fetchpriority="high"
。
当前 INP
280ms
目标阈值
≤ 200ms
INP（Interaction to Next Paint）
衡量页面所有交互的最大延迟。优化建议：拆分长任务（Long Tasks），使用 Web Workers 处理计算，延迟非关键脚本加载，避免频繁的 DOM 操作。
当前 CLS
0.05
目标阈值
≤ 0.1
CLS（Cumulative Layout Shift）
衡量页面内容的视觉稳定性。优化建议：为图片和嵌入元素显式设置宽高，使用
aspect-ratio
，避免在现有内容上方插入动态元素，使用
font-display: optional
减少字体引发的布局偏移。
✅ 性能优化检查清单
0 / 8 已完成
✓
启用代码分割与动态导入
✓
图片懒加载 + 现代格式 (WebP/AVIF)
✓
启用 Brotli / Gzip 压缩
✓
配置 HTTP 缓存策略 (Cache-Control)
✓
使用 Bundle Analyzer 审查打包
✓
设置 Performance Budget
✓
字体预加载 + font-display 优化
✓
Core Web Vitals 实时监控接入
数据为模拟演示 · 实际操作请使用真实 RUM 数据