为什么关键CSS加载优先级不够高？

技术杏花提问于 2026-03-08 00:37:17 阅读 10

优化

我在做首页性能优化时发现，虽然我把首屏样式内联了，但Lighthouse还是提示“移除阻塞渲染的资源”。我试过用 preload 加载关键 CSS 文件，但好像浏览器还是没把它当高优先级处理，这是为啥？

我的写法是这样的：

<head>
  <link rel="preload" href="/critical.css" rel="external nofollow"  rel="external nofollow"  as="style">
  <link rel="stylesheet" href="/critical.css" rel="external nofollow"  rel="external nofollow" >
</head>

是不是 preload 和 stylesheet 这样一起用反而有问题？或者我漏了什么属性？

我来解答赞 13 收藏

反馈

1 条解答

Mr.雨橙 Lv1

这个问题其实挺常见的，很多人在用preload优化CSS时都会踩这个坑。你的写法其实有个关键问题：preload和stylesheet同时加载同一个资源，浏览器可能会重复请求。

更靠谱的做法是直接用preload加载，然后在onload事件里改成stylesheet。我给你个优化后的代码：

<head>

  <link rel="preload" href="/critical.css" as="style" onload="this.rel='stylesheet'">

  <noscript><link rel="stylesheet" href="/critical.css"></noscript>

</head>

另外检查下服务端是否正确设置了响应头的content-type为text/css，不然preload可能不会按预期工作。

还有个细节要注意，preload的as属性必须写对，你这里写的是style没问题，但很多人会漏掉这个。

如果还不行的话，可以试试把preload放在更靠前的位置，有时候浏览器对head里的资源加载顺序挺迷的。

2026-03-08 01:03