步骤二：LCP（最大内容绘制）优化实战

Lighthouse 或 PageSpeed Insig📚hts ，提供详细的优化建议和得分

步骤三：FID（首次输入延迟）优化实战

图片与视频的懒加载 ：使用 loading="lazy" 属性📚，但首屏大图或视频应预先加载

使用 Web Workers ：将数据计算、日志处理等繁重操作🚀放到后台线程，避免阻塞 UI

步骤四：CLS（累计布局偏移）优化实战 CLS 衡量页面的视觉稳定性，理想值应小于 0

步骤一：精准测量当前页面的Web Vitals数据

优化要点如下： 拆分长任务 ：将超过 50ms 的 JS 任务拆分成小段，使用 requestA🍀nimationFrame 或 setTim🎆eout 分步执行

注意：FID 无法完全消除，但通过减少主线程空闲时🎵间，可以显著提升用户点击后获得反馈的速度

理解 Web Vitals：百度搜索优化的新基石

减少主线程阻塞 ：🌈把大型 JavaScript 文件拆分为多🔥个小模块，利用按需加载

理解 Web Vitals：百度搜索优化的新基石

移除或延迟非关🔍键第三方脚本 ：比如广告、分析工具代码，可放在页面加载完成后再执行

步骤三：FID（首次输入延迟）优化实战

步骤一：精准测量当前页面的Web Vitals数据 📚在动手优化之前，你需要先知道🎆自己的网页处于什么水平

常见优化方🌅法包括： 优化首屏资源加载顺序 ：将 CSS 内联到 <head> 中，避免渲染阻塞；对关键 JS 使用 async 或 defer

以下是降低 CLS 最有效的几种做法： 为图片和视频设置明确的宽高 ：即使资源加载较慢，浏览器也能提前预留出空间

步骤一：精准测量当前页面的Web Vitals数据

常用的测量工具包括： 百度站长平台 的“体验指标”报告，可直接查看站点的 LCP、FID、CLS 评分

建议重点记录首屏内容加载时间、用户首次点击🌈响应延迟以及页面元素是否发生明显位移这三项数据

步骤三：FID（首次输入延迟）优化实战 🚀FID 关注的是🌟用户首次与页面交互的体验，理想值应小于 100 毫秒

步骤四：CLS（累计布局偏移）优化实战

步骤二：LCP（最大内容绘制）优化实战 LCP 衡量的是页面主要内🌈容的🌺加载速度，理想值应小于 2

优化事件监听 ：避🚀免在滚动、鼠标移动等高频率事件中执行复杂逻辑，必要时使用节流或防抖

避免在现有内容上方插入广告或弹窗 ：如果必须使用，可以提前在文档流中预留位置

步骤五：持续监控与迭代

服务器响应提速 ：启用 CDN、优化后端查询、使用更快的 DNS 解析服务

使用 transform 动画替代改变宽高或边距的动画 ：前者不会触发布局变动