LCP指首屏最大内容块渲染完成时间，CSS内联能直接起效是因为将首屏必需样式嵌入HTML的style标签中，绕过外部CSS请求阻塞，使浏览器可立即渲染。
什么是LCP，为什么CSS内联能直接起效
LCP（Largest Contentful Paint）测的是首屏最大内容块渲染完成的时间。浏览器遇到阻塞渲染的CSS（比如外部link加载未完成），就会推迟整个页面绘制——哪怕只差10KB的style.css没回来，LCP也可能卡住几百毫秒。
内联关键CSS，本质是把首屏必需的样式直接塞进<head>的style标签里，绕过网络请求，让浏览器拿到HTML就能立刻开始渲染。
怎么判断哪些CSS算“关键”，别乱内联
关键CSS不是“所有用到的样式”，而是首屏视口内元素实际用到的那部分规则。盲目内联整个main.css反而会增大HTML体积、拖慢HTML下载和解析。
- 用Chrome DevTools的Coverage面板（
Ctrl+Shift+P→ 输入Coverage）打开，刷新页面，看.css文件中哪些行被真正执行了 - 对SPA项目，要模拟首屏路由（比如
/或/home），不能只看首页HTML静态结构 - 注意伪类（如
:hover）、媒体查询（如@media (min-width: 768px)）是否在首屏触发；未触发的不计入关键CSS - 第三方组件（如
react-datepicker）的样式，除非它在首屏立即挂载并可见，否则不算
如何安全地内联 + 异步加载非关键CSS
手动提取太容易出错，推荐用构建时工具自动化处理，避免漏规则或误删。
- Webpack用户：用
critters-webpack-plugin，它会自动分析HTML和CSS，生成内联style并把剩余CSS转为rel="preload"+onload插入link - Vite用户：开
build.rollupOptions.output.manualChunks配合vite-plugin-critical，注意配置include路径别漏掉动态导入的CSS chunk - 纯静态站点：可用
criticalCLI（npx critical https://yoursite.com --inline），但必须加--dimensions 375x667等参数模拟移动端视口，否则提取结果偏差大 - 千万别用
@import写在内联style里——它仍会阻塞渲染，等同于没内联
常见翻车点：内联后LCP反而更差了
不是所有内联都有效，这几个细节一错就白忙：
立即学习“前端免费学习笔记（深入）”；
- 内联CSS体积超过14KB（HTTP/2帧限制），可能触发TCP慢启动重传，比发一个
link还慢 - 服务端启用了Brotli压缩，但内联CSS没被压缩（比如从构建产物直接拼接进HTML），导致HTML体积极速膨胀
- CDN缓存了旧HTML，新版本已内联但缓存没更新，导致关键CSS缺失、首屏闪白
- JavaScript动态改样式（如
el.classList.add('loaded')）依赖的类名，没包含在内联CSS里，造成首屏样式错乱，LCP计算对象变更
真正难的不是“怎么内联”，而是确认内联的内容刚好覆盖首屏渲染链路中的每一个样式依赖——少一点，闪；多一点，重；错一点，偏。每次发版前最好用WebPageTest跑三次LCP，对比“内联前后”的分布曲线，而不是只看平均值。
