💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
Lighthouse评分52？别慌，关键优化漏了，血亏！
昨晚上线新页面，Lighthouse一跑，性能分52！我直接拍桌：这破工具又坑我。
翻报告一看，FCP 3.2s，LCP 4.5s，TBT 1200ms——全是硬伤。
核心根源：漏了三个必加优化点。图片没懒加载、JS阻塞渲染、原图没压缩。
Lighthouse就吃这套，一踩就掉分，别问为什么，问就是懒。
优化前：经典坑货代码
<!-- 1. 图片直接加载，原图1.2MB --><imgsrc="hero.jpg"alt="首页大图"><!-- 2. JS阻塞页面渲染 --><scriptsrc="main.js"></script><!-- 3. 未压缩图片，JPG占满带宽 --><imgsrc="product.jpg"width="800">优化后：补上关键点
<!-- 1. 加loading="lazy" + WebP格式 --><imgsrc="hero.webp"loading="lazy"alt="首页大图"width="1200"height="600"><!-- 注释：WebP体积比JPG小40%；lazy让图片滚动到才加载，减少首屏压力 --><!-- 2. JS加async异步加载 --><scriptsrc="main.js"asyncdefer></script><!-- 注释：async不阻塞DOM解析；defer确保JS按顺序执行，避免渲染卡顿 --><!-- 3. 图片用srcset响应式加载 --><imgsrc="product-800.jpg"srcset="product-400.jpg 400w, product-800.jpg 800w"sizes="(max-width: 600px) 400px, 800px"alt="产品图"><!-- 注释：根据设备宽度加载不同尺寸图，避免大图塞进小屏幕 -->避坑总结：漏掉就完蛋
- 图片不懒加载→ 首屏加载直接翻车。
别用<img>直接怼，必须加loading="lazy"。 - JS没async→ 用户等得想砸手机。
关键脚本丢到<body>底部，加async。 - 原图没压缩→ 带宽浪费，Lighthouse直接扣分。
用WebP（工具：Squoosh），别还在用JPG。 - 忽略srcset→ 大图塞进手机，流量爆炸。
响应式图片必须配srcset，别写死宽高。
最后唠一句：Lighthouse不是玄学，就是你漏了点。
跑分前先用Chrome DevTools Network面板看瀑布图——
没懒加载？没WebP？JS卡在最前？
补上这三行，分直接涨20+。
别等用户吐槽“加载慢”，优化前跑一遍，省得半夜改bug。
（顺便，别信“性能优化很复杂”，就是几个标签加错位置，真简单。）
