HTML <head> 中标签顺序错误会导致LCP延迟300–600ms；<link rel="preload"> 必须在 <link rel="stylesheet"> 之前，且必须带 as 属性、URL完全匹配，内联样式需置于所有外部CSS之前。
HTML <head> 里标签顺序错一两行，LCP 就可能多出 300–600ms——这不是理论值，是真实可测的渲染延迟。
为什么 <link rel="stylesheet"> 必须排在 <link rel="preload"> 后面
浏览器线性解析 <head>，遇到 <link rel="stylesheet"> 会立刻阻塞 HTML 解析，直到 CSSOM 构建完成。如果它写在预加载语句前面，哪怕 <link rel="preload" as="image"> 已存在，浏览器也得先等 CSS 下载、解析完才继续往下扫——LCP 图片请求直接被卡住。
- 正确顺序：
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">→ 再<link rel="stylesheet" href="main.css"> - 错误写法：把所有
<link>按“类型分组”，结果关键预加载被埋在一堆字体、图标之后 - 后果：预加载发起晚 400ms+，LCP 元素（比如
<img src="hero.webp">）的下载起点被整体后移
<link rel="preload"> 缺 as 属性等于没写
Chrome 101+ 会忽略没有 as 的 <link rel="preload"> 的 fetchpriority="high"，Safari 和 Firefox 则根本不会按 high 优先级调度。更严重的是，as 决定请求头、CORS 行为和缓存分区——漏掉它，字体加载会失败，图片可能被降级为低优先级。
-
as="font"必须配crossorigin，否则即使同源也会被丢弃 -
as="image"不支持srcset或sizes，只适用于确定格式/尺寸的单图（如首屏 WebP） -
as="style"只下载不生效，必须加onload="this.rel='stylesheet'"才能启用
内联 <style> 必须放在所有外部 CSS 之前
内联样式本意是绕过 CSS 加载阻塞，但如果它写在 <link rel="stylesheet"> 后面，浏览器仍会等前面的 CSS 文件下载并解析完，才开始解析后面的 <style>。这意味着你写的首屏 .hero 样式，实际生效时间比预期晚几百毫秒。
立即学习“前端免费学习笔记（深入）”；
- 正确位置：紧跟在
<meta charset>、<title>、<link rel="preconnect">之后，所有<link rel="stylesheet">之前 - 内联内容应严格限定为影响 LCP 元素的最小样式集（如 .hero、.lcp-text、背景色、字体大小），避免混入非首屏规则
- 别用
@import引入字体或样式——它强制串行加载，会把整个关键路径拉长
预加载资源 URL 必须和最终 DOM 中完全一致
<link rel="preload"> 是靠 URL 字符串匹配来复用已下载资源的。如果预加载的是 /img/hero.webp?ts=123，而 <img src="/img/hero.webp"> 没带参数，浏览器会当作两个资源重新请求；CDN 域名不一致（如预加载用 https://cdn.example.com，img 用 https://static.example.com）也会导致重复下载。
- 检查点：DevTools Network 面板里看
Priority是否为Highest或High；如果是Low，基本就是as缺失或 URL 不匹配 - 对 CSS 背景图类 LCP 元素，无法直接改
<img>，唯一可靠手段是<link rel="preload">+ 确保 CSS 中background-image: url(...)的路径与 preload 的href完全一致 - 不要为同一张图既 preload 又在
<picture>里 fallback 到不同格式（如 preload WebP，img src 是 JPG），容易触发双倍请求
真正卡住 LCP 的往往不是“有没有做”，而是“顺序对不对”“属性全不全”“路径一不一样”——这些细节在 HTML 文本里只占几行，但影响的是浏览器预扫描器能否在首毫秒发现资源、能否在 CSSOM 构建前就发起请求、能否在绘制前就准备好字体和样式。测一次 Performance 面板，盯住那个 LCP 标记点，再回来看 <head> 里的每一行，比通读所有优化指南都管用。
