关键CSS资源到底该怎么预加载才有效？

小亦凡提问于 2026-03-30 17:53:15 阅读 2

优化

我最近在优化首屏加载速度，听说要把关键CSS内联，非关键的用preload加载。但我试了在HTML里加，结果浏览器还是没提前加载，F12看网络面板发现它等到HTML解析到后面才开始请求，这不就失去预加载意义了吗？

比如我这段首页用到的全局样式，不算大但也不是首屏必需的：

/* global.css */
body {
  font-family: 'Inter', sans-serif;
  background: #f8f9fa;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.header-shadow {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

我在里写了，也加了onload切换成stylesheet，但timing显示它和普通差不多时间才加载。是不是我理解错了“关键资源”的定义？还是preload对CSS根本没用？

我来解答赞 0 收藏

反馈

1 条解答

UX啸天 Lv1

直接这样：

<link rel="preload" href="/path/to/global.css" as="style">

<link rel="stylesheet" href="/path/to/global.css">

别忘了在后面紧跟正常的，preload只是提示浏览器提前下载，不改变加载顺序。记得检查HTTP头的Content-Security-Policy设置，有时它会阻止preload工作。

2026-03-30 18:01