默认 media="all"，会阻塞渲染，lighthouse 由此标记“eliminate render-blocking resources”，拉低 fcp 和 lcp 分数；应为非关键样式显式设置匹配的 media 属性（如 print 或 (prefers-color-scheme: dark)）以规避阻塞。
link标签没加media属性会拉低Lighthouse性能分
浏览器默认把 <link rel="stylesheet"> 当作 media="all" 处理，哪怕你只在打印时才需要这个 CSS。它会被强制纳入关键渲染路径，阻塞 HTML 解析和首次绘制。Lighthouse 检测到这种“非必要阻塞资源”，就会在 Performance 报告里标红 “Eliminate render-blocking resources”，直接拖低 FCP 和 LCP 分数。
实操建议：
- 对非首屏样式（如打印、暗色模式、宽屏适配）明确加
media属性：<link rel="stylesheet" href="print.css" media="print"> - 媒体查询要真实匹配设备能力，比如
media="(prefers-color-scheme: dark)"在不支持该特性的旧浏览器里会被忽略，不会加载，这是预期行为 - 避免写成
media="screen and (min-width: 768px)"却在移动端也触发——检查 Network 面板确认资源是否真没加载
preload用错位置或类型反而触发Lighthouse警告
<link rel="preload"> 本意是提前拉取关键资源，但 Lighthouse 会验证它是否被后续真正使用。如果预加载了字体却没在 CSS 中声明 @font-face，或预加载了 JS 却没在页面中执行，Lighthouse 就会报 “Preload key requests” 建议失效，同时因多发一次请求而轻微抬高 TTFB 和 SI。
常见错误现象：
- 预加载
as="font"却没设crossorigin，导致字体加载失败（控制台报 CORS），Lighthouse 认定该资源不可用，转而扣分 - 在
底部 preload 图片，但图片实际由 JS 动态插入，Lighthouse 检测不到 DOM 引用，视为冗余 - preload 了 CSS 却又同步引入同一份 CSS，造成重复下载，Network 面板能看到两个 200 请求
rel="preconnect" 和 rel="dns-prefetch" 的优先级差异影响TTFB评分
Lighthouse 的 TTFB（Time to First Byte）指标对 DNS 查询和 TLS 握手延迟敏感。preconnect 比 dns-prefetch 更激进：它不仅查 DNS，还会建立 TCP 连接甚至完成 TLS 握手；而 dns-prefetch 只做 DNS 查询。Lighthouse 更倾向看到 preconnect 用于关键第三方（如 CDN、分析服务），因为这能实实在在压缩 TTFB。
但要注意：
- 只对确实在当前页面使用的域名用
preconnect，滥用会导致空闲连接堆积，反而占用 socket 资源 -
preconnect不支持路径，写成https://cdn.example.com/fonts/会失败，必须截断为https://cdn.example.com - 若目标域名走 HTTP/2 或 HTTP/3，
preconnect收益变小，此时 Lighthouse 不会特别鼓励它
integrity + crossorigin 搭配缺失导致Lighthouse误判资源可靠性
当使用 CDN 加载外部脚本或样式时，Lighthouse 会检查资源是否具备完整性校验（integrity）和跨域声明（crossorigin）。两者必须同时存在才有意义：没有 crossorigin，浏览器直接跳过 integrity 校验；没有 integrity，Lighthouse 会标记 “Ensure proper resource integrity” 并扣分，认为资源可能被篡改或加载不稳定。
容易踩的坑：
- 只加了
integrity但漏掉crossorigin="anonymous"，控制台看不到报错，但 Lighthouse 明确标黄 - CDN 返回的响应头不含
Access-Control-Allow-Origin，即使写了crossorigin，资源仍加载失败，Lighthouse 报 “Failed to load resource” 并影响 LCP - 本地开发用
file://协议打开 HTML，所有crossorigin行为被忽略，Lighthouse 测试结果不可信，必须走本地 server
<link> 的判断完全基于运行时行为，不是看有没有写、写得漂不漂亮。一个没生效的 preload、一个没配对的 crossorigin、或者一个被浏览器静默忽略的 media 查询，都可能让分数卡在 89 分再也上不去——而问题日志里往往只有一行模糊提示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
