前端性能指标（FCPLCPCLSTTITBT），如何

[问答题]

前端性能指标（FCP/LCP/CLS/TTI/TBT），如何采集、解读与优化？

查看答案及解析

秋水夏树

FCP：首个元素出现在屏幕。减少服务器响应时间，减少 JS / CSS 阻塞 LCP：最大元素出现在屏幕。预加载，SSR。 TTI：从加载到可交互。代码拆分，懒加载。如何获取：PerformanceObserverAPI、Lighthouse

发表于 2025-09-15 20:27:14 回复(0)

牛客979991220号

FCP首个内容绘制时间减少TTFB（服务器响应时间） LCP最大内容绘制时间预加载、SSR CLS 累计布局偏移为视频和图片设置固定宽高 TTI 可交互时间代码拆分、懒加载 TBT总阻塞时间减少主线程任务

发表于 2025-11-04 08:50:15 回复(0)

DRZv

1. 指标定义 - FCP：首次出现文本/图片的时间 - LCP：视口最大内容加载完成时间（≤2.5s） - CLS：元素意外偏移总和（≤0.1） - TTI：页面稳定响应用户操作的时间 - TBT：FCP-TTI间主线程阻塞总时长 2. 采集 - 原生：PerformanceObserver 监听对应事件 - 工具：Lighthouse、Chrome DevTools 性能面板 - 监控：Sentry、阿里云前端监控（RUM） 3. 解读与优化 - FCP：内联核心CSS、压缩首屏资源 - LCP：图片优化（压缩/懒加载/WebP）、优先加载首屏内容 - CLS：预设媒体宽高、动态内容预留空间 - TTI/TBT：拆分长任务、懒加载非首屏JS、Web Worker处理复杂计算

发表于 2025-11-03 06:49:00 回复(0)