网页图片卡顿？三招自己盯紧加载速度

刷朋友圈时图片半天出不来，逛电商网站商品图转圈圈，打开个人博客首页像在等胶片显影——这些不是网速背锅，很可能是图片加载性能出了问题。

不用装工具，浏览器就能查

打开网页后按 F12，点「Network」（网络）标签页，刷新页面，然后在筛选栏输入 img。所有图片请求立刻列出来：看「Size」列是不是动不动就几MB，再盯住「Waterfall」（瀑布流）那一栏——条越长，说明这张图拖慢整页越狠。特别留意标红的 404 或 500 请求，那张图根本没传上来，白等。

懒加载别乱开，小心埋雷

很多网站加了「图片懒加载」（loading="lazy"），本意是滑到哪再载哪，结果反而让首屏关键图被压后加载。比如你博客封面图加了 lazy，用户一打开先看见空白区，体验直接打折。检查方法很简单：

<img src="banner.jpg" loading="lazy" alt="首页横幅">

如果是首屏必须立刻出现的图，把 loading="lazy" 删掉，换成 loading="eager"，或者干脆不写——默认就是马上加载。

手机拍完直传？先压再发

微信里随手拍的九宫格、相机直出的 4000×3000 原图，往网站后台一扔就完事？服务器扛得住，但你家宽带和访客的4G信号可不一定。实测：一张 5MB 的 JPG 压到 300KB（用「稿定设计」「TinyPNG」或系统自带「预览」App 的「导出」调品质到 70%），加载时间能从 3.2 秒缩到 0.6 秒。顺手给文件名也改得利索点，比如 product-red-shoes-2024.jpg，比 IMG_83745621.jpeg 更容易被浏览器缓存识别。

监控不是程序员专利。每天花两分钟翻翻 Network 面板，就像给电脑清清灰、给手机删删后台——小动作，真管用。