Lighthouse评分低，关键优化漏了！

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