必须将<link rel="preload" as="image">置于<head>最前部关键位置，确保浏览器预扫描器在HTML解析首毫秒即发起LCP图片请求；若其被CSS等阻塞资源错位延后，将导致请求延迟300–600ms，显著拖慢LCP。
为什么里几行顺序错位会让LCP多出500ms
浏览器解析 <head> 是严格线性的，不是并行扫描。它从上到下逐行读取，遇到阻塞型资源就停住，直到该资源的依赖完成。LCP 元素（比如首屏大图或主标题）的渲染起点，被卡在第一个未就绪的关键资源之后——哪怕只是 <link rel="stylesheet"> 比 <link rel="preload" as="image"> 多写一行，图片请求就晚发 300–600ms。
常见错误现象：
-
<link rel="stylesheet" href="main.css">写在<link rel="preload" as="image">前 → CSS 下载完成前，预加载根本不会触发 -
<link rel="preload" href="font.woff2">缺as="font"和crossorigin→ 字体加载失败，文本类 LCP 等到超时 fallback 后才渲染 - 把所有
<link>按“语义分组”堆在一起，关键预加载被埋在中间 → 预扫描器（preload scanner）根本来不及扫到它
正确的资源排列顺序（只保留真正影响LCP的）
目标不是“填满 <head>”，而是让浏览器在解析 HTML 第一毫秒就发起 LCP 资源请求，并准备好最小绘制所需样式。顺序必须是：
- 第一行：
<meta charset="utf-8">和<title>（不可省略，影响早期渲染判断） - 紧接着：
<link rel="preconnect">和<link rel="dns-prefetch">（针对 CDN 或 API 域名，减少 DNS 查找延迟） - 然后是 1–2 个真正影响 LCP 的
<link rel="preload">，每个都带as属性（如as="image"、as="font"）和fetchpriority="high" - 再之后是内联
<style>，只含.hero、.lcp-text等首屏必需样式 - 最后才是非关键 CSS 的异步加载方案，例如：
<link rel="stylesheet" media="print" onload="this.media='all'">
注意：<script> 不应出现在 <head> 中（除非 type="module" 且 defer），否则会中断解析；也不要用 @import 引入任何样式——它串行加载，实测拖慢 FCP 300ms+。
立即学习“前端免费学习笔记（深入）”；
preload 为什么必须带 as 属性，且 href 要和 img src 完全一致
<link rel="preload"> 不是“提前下载”，而是告诉浏览器：“这个 URL 我马上要渲染用”。但浏览器需要知道它是啥类型，才能分配正确资源优先级和解码逻辑。缺 as，Chrome 101+ 会忽略 fetchpriority="high"，Safari/Firefox 则直接不识别该标签。
-
as="image"→ 触发图片解码流水线，匹配<img src="hero.webp">的 MIME 类型和尺寸计算 -
as="font"+crossorigin→ 避免 CORS 阻止字体加载，否则文本类 LCP 会卡在 FOIT（Flash of Invisible Text） -
href必须和最终<img>的src完全一致：大小写、斜杠、查询参数都不能差，否则预加载失效，甚至触发重复请求（比如 preload WebP，img fallback 用 JPG）
LCP 图片在 HTML 中怎么写才不被预扫描器错过
浏览器有个预扫描器（preload scanner），它在主线程解析 HTML 的同时，快速遍历原始字节流，提前发现 <img src="..."> 并发起请求。但它不执行 JS、不展开 <template>、不处理 data-src，所以任何动态插入、条件渲染、懒加载都会让它“看不见”LCP 图片。
- 确保
<img>标签有真实、可访问的src（不能是空字符串、about:blank或占位符） - 避免包裹在
<template>、<slot>、自定义元素或 Vue/React 条件指令（如v-if）中 - 如果用
<picture>，至少保证一个<source>没有media属性，或<img>自身有src作为兜底 - 显式设置
width和height属性（HTML 属性，不是 CSS），否则布局引擎无法预留空间，后续加载会触发布局偏移（CLS），间接延迟 LCP 判定
SSR/SSG 输出的 HTML 必须包含完整 <img> 标签——CSR 渲染再快，也晚于预扫描器那几十毫秒的窗口。
