CSS首屏优化需内联关键样式至HTML的<head>中，仅提取导航栏、主标题等首屏可见区域样式，推荐critical、penthouse、critters工具自动提取，内联体积≤14KB，禁用@import和URL声明，非关键CSS通过preload异步加载并用media属性按需加载。
核心业务 CSS 样式内联首屏优化，本质是把用户打开页面时“立刻需要”的那部分样式，直接塞进 HTML 的 <head> 里，让浏览器一拿到 HTML 就能开始渲染，不等网络请求。
只内联真正首屏用到的样式
不是整个业务 CSS 文件，而是仅提取导航栏、主标题、首屏按钮、关键表单控件等「不滚动就能看到」区域所依赖的规则。例如一个电商首页，只需内联 header、hero banner、搜索框、轮播图指示器的样式，而非商品列表或底部版权栏的样式。推荐用工具自动提取：
- critical（Node.js 工具）：支持命令行扫描 HTML，输出精准的关键 CSS
- penthouse：可集成到构建流程，适配不同视口尺寸
- critters（Webpack 插件）：适合 Vue/React 项目，在打包时自动生成并注入
内联体积要克制，控制在合理范围
内联不是越多越好。体积过大反而拖慢 HTML 传输和解析：
- 建议内联内容 ≤ 14 KB（HTTP/2 下仍需压缩，避免影响 TTFB）
- 禁用
@import、@font-face和含 URL 的声明（如background-image: url(...)），它们会触发额外请求，破坏内联效果 - 避免使用
!important或高权重选择器，保持样式简洁可维护
非关键样式必须异步加载，且不干扰主流程
剩余 CSS 不能放 <link rel="stylesheet"> 直接引入，否则仍会阻塞渲染。正确做法是：
立即学习“Java免费学习笔记（深入）”；
- 用
<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">预加载并手动激活 - 搭配
<noscript>降级：JS 被禁用时回退为普通 link - 对明确非首屏的样式（如打印、深色模式、移动端折叠菜单），可用
media属性标记，例如media="(prefers-color-scheme: dark)"或media="print"
服务端场景下动态注入更稳妥
如果是 SSR/SSG 架构（如 Next.js、Nuxt、Vite SSG），可在服务端根据当前路由预生成对应的关键 CSS，并注入模板中：
- Next.js 中配合
getServerSideProps或getStaticProps+critical提前提取 - Nuxt 使用
@nuxtjs/critical模块自动处理 - 静态站点生成时，将 critical CSS 写入 HTML 模板，确保每次部署都带真实首屏样式
