必须让浏览器预扫描器在解析html首行就发现lcp图片的真实src，因此需将带src、width/height属性及fetchpriority="high"的img标签置于html靠前位置，避免js动态插入、template包裹或data-src替代。
怎么让浏览器在解析HTML第一行就看到LCP图片
关键不是“写得漂亮”，而是“让预扫描器（preload scanner）一眼扫到真实资源URL”。浏览器在构建DOM前，会用轻量级预扫描器快速遍历HTML，提前发起、<script>、<link>等资源请求。如果LCP图片被JS动态插入、包裹在<template>里，或用data-src代替src，它根本不会被发现。</script>
- 必须用原生
src属性，不能靠data-src或data-lazy-src——预扫描器只认src - 避免把LCP图片放在
<template></template>、<slot></slot>或SSR后由JS挂载的区域里；纯静态HTML块最稳妥 - 如果用
<picture></picture>，确保<source></source>中匹配当前视口的srcset或src值存在且路径正确，否则预扫描器可能跳过整个结构
为什么fetchpriority="high"比loading="eager"更关键
loading="eager"只是取消懒加载，但默认仍被浏览器标记为low优先级；fetchpriority="high"才是真正告诉调度器：“这个请求现在就要排前面”。Chrome 109+支持，Safari/Firefox忽略它也不报错，属于安全增强项。
- 必须和
src同时存在，单独加fetchpriority无效 - 不能和
loading="lazy"共存——Chrome会直接忽略fetchpriority并抛warning - 如果页面有多个
fetchpriority="high"，浏览器仍会按实际解析顺序排队，所以LCP图片要尽可能写在HTML靠前位置
<link rel="preload">和fetchpriority="high"能一起用吗
能，而且推荐组合使用：<link rel="preload">确保HTML解析早期就发请求，fetchpriority="high"则在资源队列中争取更高权重。两者作用阶段不同，不冲突。
-
<link rel="preload" as="image" href="hero.jpg">必须写在里，且href要和对应<img src>完全一致（含大小写、斜杠） - 如果用了
<picture></picture>，<link rel="preload">只能预加载一个确定URL，不如直接在<img>上设fetchpriority="high"灵活 - 不要为同一张图既
preload又设fetchpriority="high"还配decoding="async"——解码异步和预加载不冲突，但三者叠加对LCP提升边际收益递减，优先保证src可见+fetchpriority到位
width/height属性为什么必须写在HTML里而不是CSS中
这不是为了样式，而是为了防止布局偏移（CLS）。浏览器需要在解析HTML时就拿到尺寸，才能预留空间、避免重绘重排。CSS里的width/height来得太晚，无法阻止LCP判定被延迟。
- 必须是HTML属性，如
<img style="max-width:90%" style="max-width:90%">，不是style="width:800px;height:450px" - 响应式场景下，可用
aspect-ratio替代，但需确认目标浏览器支持（Chrome 88+/Firefox 89+） - 如果图片尺寸不确定，宁可估算一个合理比例（如
width="16" height="9"），也别留空——空值会导致CLS，间接拖慢LCP
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
