首屏CSS内联的核心目标是让浏览器解析HTML时立即获取关键样式，避免阻塞渲染以提升首屏速度和LCP指标；关键样式仅包含影响视口内元素的最小集合，如HTML/body重置、首屏容器及子元素基础样式，需排除折叠区、模态框等非首屏规则；推荐用Puppeteer+Critical等工具自动化提取，内联至<head>中<link>前，标记data-critical便于调试，保留外链CSS并压缩内联内容，最后通过DevTools和Lighthouse验证效果。
首屏 CSS 内联，核心目标是让浏览器在解析 HTML 的第一时间就能拿到渲染首屏所需的关键样式，避免额外的 CSS 请求阻塞渲染，从而提升首屏加载速度和 LCP（最大内容绘制）指标。
哪些 CSS 算“首屏关键样式”
不是全部 CSS，而是仅影响视口内（或滚动前可见区域）元素渲染的最小样式集合。通常包括：
- HTML、body、viewport 相关重置或基础布局样式
- 首屏可见容器（如 header、hero banner、首条卡片）的尺寸、颜色、字体、display/flex/grid 布局规则
- 首屏内文字、按钮、图片占位符等直接子元素的基础样式
- 避免包含：折叠区域、底部版权栏、模态框、懒加载模块、媒体查询中非当前断点的规则（如 max-width: 767px 但当前是桌面端）
如何提取并内联首屏 CSS
手动提取容易遗漏或过度，推荐结合工具自动化：
- Puppeteer + Critical：用真实浏览器渲染页面，截图定位首屏区域，自动提取该区域内元素用到的所有 CSS 规则
-
Webpack 插件（如 critical-webpack-plugin）：构建时对每个 HTML 入口自动执行关键 CSS 提取，并注入
<style>标签 -
Next.js / Nuxt 等框架内置支持：Next.js 13+ App Router 默认对 Server Component 的样式做按需内联；Nuxt 配合
@nuxtjs/critical可一键启用 - 若纯静态站点，可用
criticalCLI 工具：运行critical index.html --base dist/ --inline --html --minify > index-critical.html
内联位置与注意事项
内联样式必须放在 <head> 中、<link rel="stylesheet"> 之前，确保优先级最高且不阻塞 HTML 解析：
立即学习“前端免费学习笔记（深入）”；
- 用
<style data-critical>标记便于后续清理或调试 - 内联后仍需保留完整外链 CSS，用于首屏后交互、滚动加载、打印等场景
- 注意避免重复：内联样式与外链 CSS 不应有冗余规则，否则增加体积且可能引发优先级冲突
- 内联内容需压缩（去除空格、注释），但无需 Base64 编码——那是针对图片资源的优化方式
验证是否生效
打开 Chrome DevTools → Network → 刷新页面，观察：
- 首屏内容是否在无外部 CSS 加载时已正确渲染（可临时禁用网络请求测试）
- Lighthouse 报告中 “Eliminate render-blocking resources” 是否不再警告 CSS
- Performance 面板查看 “Layout” 和 “Paint” 时间是否提前、更紧凑
- 检查 HTML 源码，确认
<style>标签存在且内容合理（非空、非全量 CSS）
