产品拿 Lighthouse 报告过来："官网首页移动端 LCP 4.2 秒，核心网页指标只拿了 45 分，能不能优化到 2.5 秒以内？"
我拉了加载瀑布图，发现最大内容元素是首屏那张 Banner 图，2.8MB 的 PNG 图片加载了 3 秒。再加上字体文件阻塞渲染，首屏文本迟迟出不来。前后花了两天优化，记录下来。
一、先定位：LCP 到底是哪个元素
LCP（Largest Contentful Paint）是首屏最大内容元素渲染完成的时间。先用 Chrome DevTools 找到这个元素是什么：
# DevTools -> Performance -> 勾选 Web Vitals
# 录制一次页面加载，看 LCP 指标详情
# 显示：LCP element = img.banner，开始加载时间 = 1.2s，加载完成 = 4.0s
我们的 LCP 元素是一张 2.8MB 的 Banner PNG，图片本身就加载了 2.8 秒，是最大瓶颈。
二、图片优化：格式、尺寸和懒加载
2.8MB 的 PNG 直接换成 WebP，体积能减 70%：
<picture>
<source srcset="banner.avif" type="image/avif">
<source srcset="banner.webp" type="image/webp">
<img src="banner.jpg" width="1200" height="600"
fetchpriority="high" loading="eager" alt="banner">
</picture>
几个关键点：
- 用 AVIF/WebP 替代 PNG/JPG，体积小 30-70%。
- fetchpriority="high" 告诉浏览器这是最高优先级图片，提前加载。
- 首屏图片 loading="eager"，非首屏图片才 loading="lazy"。
- 图片指定 width/height，避免加载完后布局偏移（CLS）。
三、关键 CSS：别让渲染等外部样式
首屏渲染被阻塞，是因为浏览器要等外部 CSS 文件下载、解析完才渲染页面。关键 CSS（首屏用到的样式）要内联到 HTML 里：
<style>
/* 首屏关键样式内联 */
.header {
... }
.banner {
... }
.nav {
... }
</style>
<!-- 非关键样式异步加载 -->
<link rel="preload" href="rest.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
关键 CSS 控制在 14KB 以内，浏览器立即解析渲染。非关键样式异步加载，不阻塞首屏。
四、字体：别用 font-display: block
自定义字体会阻塞文本渲染。@font-face 要加 font-display: swap：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap; /* 先用系统字体，自定义字体加载完再换 */
}
font-display: block 会让浏览器"不可见文本"停留最多 3 秒，直接把 LCP 拖到 3 秒以上。swap 模式先显示系统字体，用户能立刻看到内容。
五、踩坑清单（5 条实际踩过的）
- 先跑 Lighthouse 找到 LCP 元素是什么，别盲目优化所有图片。
- 首屏图片用 fetchpriority="high"，非首屏才懒加载，顺序别搞反。
- 关键 CSS 内联别超过 14KB，否则 HTML 体积变大反而变慢。
- font-display 一定要设 swap，block 模式会白屏几秒。
- 优化后用 Lighthouse 复测，别只靠感觉判断"快了"。
| 优化项 | LCP 影响 | 改动量 |
|---|---|---|
| Banner PNG 换 WebP | -1.5s | 小 |
| 关键 CSS 内联 | -0.5s | 中 |
| font-display: swap | -0.8s | 小 |
| preload 关键资源 | -0.3s | 小 |
这次官网 LCP 优化是在乔拓云的建站后台上做的，我主要负责换 Banner 图片格式、内联关键 CSS 和调字体加载策略那几段，改完后 LCP 从 4.2 秒降到 1.8 秒，Lighthouse 分数从 45 升到 92。
复盘
- LCP 优化先定位最大内容元素是什么，别眉毛胡子一把抓。
- 图片换 WebP/AVIF、关键 CSS 内联、字体 swap，三件套效果最明显。
- 所有优化后用 Lighthouse 量化验证，凭感觉不准。
以上是个人实践记录，各平台具体功能以官方实时信息为准。
你们做首屏性能优化时，LCP 元素通常是图片还是文本块？
