LCP 优化实操清单：图片、字体与服务器响应三管齐下

引言：首屏图迟迟不显

用户说”你们站打开好慢”，你查 PSI 发现 LCP 3 秒多，瓶颈就是首屏那张英雄图或文章头图。LCP 元素通常是图片或大字标题块，优化它等于优化”用户第一眼看到内容的速度”。

原理分析：LCP 由四段耗时组成

LCP ≈ TTFB（服务器响应）+ 资源加载（图片/CSS）+ 渲染。任何一段过长都会拖累。所以优化要三管齐下：让服务器更快吐首字节、让关键图片更早开始加载、让渲染不被阻塞。

保姆级实操

1. 压缩并正确格式化首屏图：用 WebP/AVIF，宽度按设备，别丢 2000px 原图。

<!-- 预加载 LCP 图片，让它优先于其他资源 -->
<link rel="preload" as="image" href="/wp-content/uploads/hero.avif" fetchpriority="high">

2. 图片加尺寸防跳动：<img width="1200" height="630" loading="eager">，LCP 图不要用 loading="lazy"。
3. 字体内联关键字形或 swap：

@font-face { font-family: "Main"; src: url(/fonts/main.woff2) format("woff2"); font-display: swap; }

4. 预连接第三方域名：

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

5. 降 TTFB：开页面缓存（WP Rocket / Swift Performance）、用对象缓存 Redis、升级 PHP 到 8.2+。
6. 移除渲染阻塞 CSS/JS：把首屏关键 CSS 内联，其余异步。

常见踩坑

1. LCP 图误加 lazy，浏览器推迟加载，LCP 反而更慢。
2. fetchpriority 用错对象，给非首屏图设 high 抢了带宽。
3. 案例：某站 LCP 4.1s，查瀑布图发现 fonts.gstatic.com 没预连接，光等 DNS+TLS 就 600ms，且首屏图 1.8MB。加 preconnect + 转 AVIF（180KB）+ 预加载后，LCP 降到 1.7s。
4. 只压缩不删渲染阻塞 JS，CLS 和 TBT 仍高。
5. 缓存插件没开移动端缓存，手机 LCP 翻倍。

总结

判断标准：LCP≤2.5s 且全站 ≥75% URL 达标。行动清单：定位 LCP 元素（PSI 瀑布图）→ 压缩转 AVIF + 预加载 + 不 lazy → 字体 swap + 预连接 → 降 TTFB（缓存/Redis/PHP8）→ 内联关键 CSS。详见Core Web Vitals 三指标详解。