控制 CLS：保证页面视觉稳定

核心指标 衡量内容 建议阈值（良好） LCP 页面主要内容（如文字、图片）的加载时间 ≤ 2

分解长任务： 将耗时的 JavaScript 逻辑拆分为多个小任务，比如使用 setTimeout() 或 requestAnimationFrame() 将优先级较低的工作推到空闲时段执行

低 CLS 意🎆味着用户不会因阅读位置跳动而丢失进度

针对 LCP 的优化：让主要内容更快呈现

它并非单一的指标，而是一组⭐聚焦于加载速度、交互响应与⚡视觉稳定性的量化标准

1 针对 LCP 的优化：让主要内容更快呈现 LCP 指标关注的是用户能看到页面👍主体内容的速度

使用 font-display 优化字体加载： ✅对于自托管的字体或第三方字体库，设置 fo👍nt-display: swap 或 optional ，避免因字体切换导致文本区域尺寸变化

理解核心网页指标：衡量用户体验的关键维度

预加载关键资源： 对于首屏所需的主要图片或字体，可以使用 rel="preload" 进行预加载，确保浏览器尽早开始下载

采用现代图片格式： 将大幅图片转换为 WebP 格式，并配合 <picture> 标签或 srcset 属性，根据设备分辨率提供最合适的尺寸

工具与持续监测

长任务（通常指耗时超过 50 ✨毫秒的 JavaScript 任务）会阻塞主线⚡程，导致用户点击后延迟响应