首屏大图应改用<img>+object-fit替代background-image，并配合<link rel="preload" as="image">、fetchpriority="high"及loading="eager"确保优先加载与渲染；href须与src严格一致，且preload必须置于HTML最前。
大图背景本身不拖慢首屏，拖慢的是你没管好它的加载时机和渲染依赖关系——关键不是“要不要用”，而是“怎么让它不抢在文字前又不卡住文字”。
preload 必须配 fetchpriority="high"，且 href 和实际 src 严格一致
只写 <link rel="preload" as="image" href="bg.jpg"> 不够。浏览器可能把这张图当普通资源调度，尤其在带宽紧张时延后下载。
-
fetchpriority="high"是显式告诉浏览器：“这张图参与 LCP，现在就要” -
href值必须和后续<img>或 CSSbackground-image中使用的 URL 完全相同（包括查询参数，比如?v=2）——否则会触发两次请求 - 若用 CSS
background-image，<link preload>仍有效，但需确保 CSS 解析时该图已进入缓存或正在下载中；否则仍会 FOUC
别用 background-image 加载首屏大图，改用 <img> + object-fit
CSS background-image 无法被 preload 精确控制优先级，也不支持 loading="eager"，更难监听加载完成事件。
- 用
<img>标签承载首屏大图，设置width、height和loading="eager" - CSS 中用
object-fit: cover+position: absolute模拟全屏背景效果，保留语义与可访问性 - 这样既能绑定
onload事件控制内容显隐，也能被 Chrome 正确计入 LCP 计算
内容显隐必须靠 class 切换，禁用 display: none
直接写 style="display: none" 会让元素脱离渲染树，影响布局测量、可访问性（screen reader 可能跳过），且重绘开销更大。
立即学习“前端免费学习笔记（深入）”；
- 初始给
body加class="loading"，CSS 中写body.loading .hero-content { visibility: hidden; opacity: 0; } - 监听
<img>的onload事件，移除loading类，触发动画过渡（而非硬切） - 避免用
visibility: hidden配合height: 0——这会破坏流式布局，导致滚动条跳变
验证是否真生效：Network 面板里只看 initial load
写了 preload 和 loading="eager" 不代表它就跑在最前面。必须实测。
- Chrome DevTools → Network → 勾选 “Disable cache” → 刷新页面
- 筛选
Img类型，确认首屏大图出现在请求列表最顶部，且状态为from memory cache或from disk cache（说明 preload 生效） - 如果它排在 HTML 后面、甚至晚于某个 JS 文件，说明
fetchpriority没起作用，或服务器返回了低优先级响应头（如Priority: u=0）
最容易被忽略的点是：preload 的资源必须在 HTML 解析早期就出现——放在 </head> 之前，而不是塞进某个组件模板末尾。位置错了，再对的属性也白搭。
