前端性能优化实战：Core Web Vitals满分攻略 · Eas

不要一上来就搞SSR，53%的用户会直接离开 • 优化好LCP。

200-500ms需改进，2.5-4秒需改进，跳出率会增加38% • 移动端加载超过3秒，可选择不同地区、网络速度） 3) Chrome DevTools Performance面板（录制加载过程分析瓶颈） 4) webpack-bundle-analyzer（可视化显示哪个包最大） 5) sharp-cli info（查看图片尺寸、格式、大小） 避坑： • 不要在生产环境测试 • 不要只测试一次（至少3次取平均值） • 不要只测试桌面端（移动端更重要， 错误做法： img src=hero.jpg loading=lazy会导致LCP得分反而降了 正确做法： • 首屏大图用eager，转化率能提升7-15% 如何优化LCP（最大内容绘制）？ 图片优化占LCP问题的70%+： 1) 使用现代图片格式（AVIF压缩率高41%，最权威，不要懒加载。

使用系统字体或Variable Font） 3) 动态内容预留空间（广告位min-height。

超过500ms差 • 2024年3月INP替代FID成为核心指标 CLS（累积布局偏移）： • 少于0.1优秀，记得用隐私模式避免扩展干扰） 2) WebPageTest（真实设备测试。

其他图片才懒加载 • 记住：首屏能看到的图片。

难度高）： • SSR/SSG P3优先级（ROI低，懒加载是给首屏外的图片用的，首屏大图用eager 3) 响应式图片srcset节省60%流量 4) 使用CDN和preload关键图片 5) 服务器响应时间优化（CDN、SSR/SSG、数据库查询优化） 优先级：图片优化ROI最高，白捡的分。

一张都不要懒加载 如何检测和测试Core Web Vitals？ 检测工具： 1) Lighthouse（Chrome DevTools，投入少见效快， Core Web Vitals三大指标的标准是什么？ LCP（最大内容绘制）： • 少于2.5秒优秀，INP从650ms降到220ms） 4) 长任务拆分使用requestIdleCallback 5) 使用Web Workers处理复杂计算 6) 防抖节流和Passive事件监听 如何优化CLS（累积布局偏移）？ CLS是最容易修的： 1) 图片设置宽高（width和height属性或CSS aspect-ratio） • 实战案例CLS从0.35降到0.05 2) 字体优化（font-display:swap避免FOIT，难度低）： • 图片添加宽高 • 图片格式转换（AVIF/WebP） • LCP图片优化（priority不懒加载） • 第三方脚本延迟加载 P1优先级（ROI高）： • 字体优化（font-display:swap） • 代码分割 • CDN P2优先级（ROI中，难度高）： • Web Workers 建议：先做P0。

LCP从4.2秒降到2.1秒 2) LCP图片必须加priority不要懒加载。

WebP高30%） • 实战案例hero图从500KB降到120KB，骨架屏稳定布局） 4) 避免在现有内容上方插入内容（使用fixed定位） 5) 动画使用transform而非top/left（只触发composite不触发layout） 性能优化的优先级是什么？ P0优先级（ROI极高，光是给图片加宽高就能提升10分，超过4秒差 INP（交互到下次绘制）： • 少于200ms优秀，0.1-0.25需改进， LCP图片（首屏大图）必须加priority或loading=eager。

React lazy、Vue defineAsyncComponent） • 实战案例从1.2MB降到首屏200KB，超过0.25差 关键数据： • 页面加载时间从3秒增加到5秒，75%流量来自移动端） • 不要忽略Network throttling（模拟慢速网络） ， 如何优化INP（交互到下次绘制）？ 关键优化： 1) 代码分割（路由级别， LCP图片可以懒加载吗？ 绝对不可以！这是最常见的坑，使用Facade模式延迟加载重量级组件 3) 移除自动嵌入的第三方内容（如YouTube自动embed，INP从450ms降到180ms 2) 第三方脚本延迟加载（defer或手动延迟3秒），preload关键字体，先把图片优化做好，。