标准答案
- LCP 图片应该直接出现在 HTML 或服务端首屏输出中，避免等客户端脚本执行后才插入。
- 首屏关键图不要使用 loading="lazy"，否则浏览器可能延后请求。
- 为关键图片设置 width 和 height 或 aspect-ratio，避免加载后造成布局偏移。
- 可以用 rel="preload" 或 fetchpriority="high" 提示浏览器优先加载关键图。
- 同时要配合合适尺寸、现代格式、压缩和 CDN 缓存，避免传输体积过大。
题目解析
这题强调 HTML 结构对资源发现时机的影响。浏览器越早看到关键图片，越可能提前请求。
优化 LCP 不是只压缩图片，还包括发现时机、请求优先级、尺寸稳定和渲染路径。
代码示例
首屏主图可以配合 preload、fetchpriority 和固定尺寸。
HTML
<link rel="preload" as="image" href="/hero.webp">
<img
src="/hero.webp"
alt="产品首屏截图"
width="1200"
height="640"
fetchpriority="high"
>常见误区
- 首屏 LCP 图片也使用懒加载，导致关键请求被延后。
- 图片由客户端 JS 很晚才插入，浏览器无法提前发现资源。
- 没有设置尺寸，图片加载后撑开页面造成 CLS。