一、分数不是用户体验本身前端性能在国内团队里一直是高频话题但很多优化停留在 Lighthouse 分数。分数有参考价值却不能替代真实用户体验。用户关心的是多久能看到主要内容、多久能点、点击后是否卡顿。工程上要拆开看加载、渲染、交互和稳定性。核心指标里LCP 关注最大内容绘制INP 关注交互响应CLS 关注布局偏移。后台系统更看重 INP 和长任务内容站和营销页更看重 LCP 和图片加载。不要用同一套方案套所有页面。指标关注点常见优化LCP首屏主体内容图片压缩、预加载INP交互响应减少长任务CLS布局稳定固定尺寸、避免插入抖动TTFB服务端响应缓存、接口优化二、先建立真实用户监控实验室工具只能模拟一部分环境真实用户监控能看到不同设备、网络和地区的实际表现。可以先用 Performance API 上报关键指标。下面示例只展示思路生产环境要做采样和异常保护。functionreportMetric(name:string,value:number){navigator.sendBeacon(/api/perf,JSON.stringify({name,value,path:location.pathname,ts:Date.now(),}))}newPerformanceObserver((list){for(constentryoflist.getEntries()){if(entry.entryTypelargest-contentful-paint){reportMetric(LCP,entry.startTime)}}}).observe({type:largest-contentful-paint,buffered:true})newPerformanceObserver((list){for(constentryoflist.getEntries()){reportMetric(longtask,entry.duration)}}).observe({type:longtask,buffered:true})有了数据后要按页面、设备、网络、版本分组。平均值会掩盖问题P75 或 P95 更有意义。发布后某个页面长任务上升通常比整体分数下降更值得处理。三、包体积优化要从依赖开始前端包体积大常见原因是 UI 库全量引入、图表库过重、日期库重复、工具函数没有 tree shaking、路由没有懒加载。先用构建分析工具看清楚再改。npmrun build npx vite-bundle-visualizer# 或使用 rollup 插件生成分析文件npminstall-Drollup-plugin-visualizerVite 项目里可以按路由拆分把低频页面延后加载。不要为了拆包而拆包过度拆分会增加请求数量和缓存复杂度。import{createRouter,createWebHistory}fromvue-routerexportconstroutercreateRouter({history:createWebHistory(),routes:[{path:/,component:()import(/pages/HomePage.vue)},{path:/orders,component:()import(/pages/OrderPage.vue)},{path:/reports,component:()import(/pages/ReportPage.vue)},],})图片优化也很实际。给图片固定宽高使用 WebP/AVIF首屏关键图预加载非首屏懒加载。很多 CLS 问题来自图片没有尺寸。四、长任务要拆到用户感知不到INP 差经常来自主线程长任务。表格一次渲染几千行、复杂 JSON 同步解析、大量 DOM 操作、输入框触发昂贵计算都会让点击和输入延迟。优化方向包括虚拟列表、Web Worker、分片执行和缓存计算结果。functionchunkT(items:T[],size:number,handle:(part:T[])void){letindex0functionnext(){constpartitems.slice(index,indexsize)indexsizehandle(part)if(indexitems.length){requestIdleCallback(next)}}requestIdleCallback(next)}实践建议先补真实用户性能上报再按页面建立性能预算例如首屏 JS gzip 后不超过 200KB、LCP P75 小于 2.5 秒、长任务数量可告警。优化顺序应从数据出发先处理影响用户最多、退化最明显的页面。 本文是《前端工程实战》系列持续更新关注不迷路。 下一篇《前端性能优化之首屏加载提速实战》讲如何把性能指标落到资源、渲染与构建配置上。 你在实际项目里遇到过 Lighthouse 分数不低但用户仍觉得页面卡顿的问题吗评论区聊聊。觉得有用点个赞收藏方便回头查阅 相关可运行源码/资料已整理成资源包可在我主页的资源里自取。