前端首屏优化：LCP 从 4.2s 到 1.1s 做了什么

接手一个营销落地页，Lighthouse 移动端 LCP 4.2s，及格线 2.5s 都够不着。LCP 元素是首屏一张大 banner 图。优化后 1.1s，复盘一下动作清单。

先定位：LCP 元素是什么、卡在哪

用 Lighthouse / PageSpeed Insights 跑一遍，Performance 面板里看 LCP 的分解：TTFB 正常，卡在资源加载与渲染。四类原因按命中率排查：资源发现晚、加载优先级低、图片体积大、渲染被阻塞。

动作一：给 LCP 图片最高的优先级

banner 图最初是用 CSS background 引的——浏览器根本没法预加载它。改成 <img> 并声明优先：

<link rel="preload" as="image" href="/hero.avif"
      fetchpriority="high">

<img src="/hero.avif" width="1200" height="630"
     fetchpriority="high" alt="首屏 banner">

同时给出 width/height，杜绝布局偏移（CLS 顺便也救了）。

动作二：换格式与尺寸

原 PNG 1.8MB，转 AVIF 后 96KB；再按断点出 480/768/1200 三档，srcset 让手机不必下载桌面图。CDN 开 HTTP/2 与 Brotli。这一步 LCP 直接砍半。

动作三：字体的渲染策略

标题字体 300KB，加载期间文字隐形（FOIT）。改用 font-display: swap + 预加载字体文件，先让系统字体顶上，字体到位再换装，不再白屏等待。

动作四：砍掉阻塞渲染的资源

• 首屏关键 CSS 内联进 HTML（约 14KB），其余 CSS 异步加载；
• 统计脚本全改为 defer，第三方 SDK 延迟到 load 之后；
• 给第三方域加 preconnect，握手成本提前付掉。

结果与回归

最后一步是防回退：把 LCP 预算写进 CI（Lighthouse CI，低于 2.5s 直接红灯）。性能这东西，不看着，它一定会慢慢胖回去。