16｜前端性能怎么测？关注什么指标？

开场先立分层意识：服务端 RT 只是用户体验的一部分——用户感受到的慢，大头在前端（资源加载、渲染、执行）。前端性能单独成专项。

回答思路

第一步：核心指标报 Web Vitals

指标	含义
FCP 首次内容绘制	白屏结束的信号
LCP 最大内容绘制	主内容出现——核心指标
CLS 累积布局偏移	页面跳动，体验指标
INP 交互响应延迟	交互卡顿

报得出这套词汇并各讲一句含义，专业度立住。

第二步：讲测量手段（两套互补）

• 实验室数据：Lighthouse 审计、DevTools 的 Performance 面板和 Network 瀑布图——可控可复现
• 真实用户监控 RUM：页面埋点上报真实用户的加载指标——量大看分布

实验室找问题、RUM 看真相。

第三步：讲瀑布图分析

资源加载顺序和耗时（首屏关键请求链）、阻塞渲染的 CSS 和同步 JS、图片没懒加载、接口和资源的并发情况——会读瀑布图是前端性能分析的基本功。

第四步：讲常见优化方向和验证

图片压缩和懒加载、代码分割、缓存策略、接口预取、CDN——每项优化用前后 Lighthouse 分数和 RUM 分位值验证，前端优化也要数据闭环。

收尾：给协作认知

前端性能问题一半在服务端（接口慢、资源服务慢）——分析时先分清时间花在哪段，再找对应责任方，别一锅端给前端。

考察重点

维度	说明
企业动机	端到端体验时代，服务端指标全绿用户照样觉得慢——前端性能能力在测开岗是差异化加分项
过线标准	Web Vitals 指标含义 + 实验室和 RUM 两套手段
区分度	会读瀑布图、能讲资源加载链路分析的是做过的；只会 Lighthouse 跑分的是浅尝
加分项	INP 这类新指标的认知（说明持续跟进了 Web Vitals 演进）
减分项	认为性能就是接口 RT，前端加载完全不关心，视野缺失

来源

整理自知识星球帖《面试情报 04｜性能测试 20 题》，返回题库。