引言在现代 Web 开发中页面性能直接影响用户体验、转化率与搜索引擎排名。Google 推出的Core Web Vitals已经成为 SEO 的重要排名因素也为我们提供了可量化的性能衡量标准。本文将从核心指标出发结合实际可运行的代码讲述如何系统地优化前端性能。核心概念三大指标解读LCPLargest Contentful Paint最大内容绘制LCP 测量页面主要内容加载完成的时间点通常指视口内最大的可见元素图片、视频、背景图或文本块渲染完成的时间。理想的 LCP 应在2.5 秒以内。FIDFirst Input Delay首次输入延迟FID 衡量用户首次与页面交互点击链接、按钮等到浏览器实际响应事件之间的延迟。它反映了主线程的繁忙程度。理想值应小于100 毫秒。注意FID 需要真实用户数据实验室工具中可使用TBTTotal Blocking Time代理衡量。CLSCumulative Layout Shift累积布局偏移CLS 衡量页面生命周期内发生的意外布局偏移的累积分数。偏移通常由无尺寸的图片、动态插入的广告或 Web 字体加载引起。理想 CLS 应低于0.1。其他辅助指标如FCP首次内容绘制和TTI可交互时间也值得关注但 Core Web Vitals 是优化重心。实战示例完整的可运行代码以下示例展示了一个典型的页面其中包含了针对 LCP、CLS 和 FID 的优化手段图片懒加载、预加载关键资源、避免布局偏移、代码按需加载。html性能优化实战示例加载更多内容动态导入