Shopify 首屏关键 CSS 要不要内联

现象#

Lighthouse 提示「消除阻塞渲染的资源」，style.css 有 200KB，首屏白屏时间偏长。

原因#

• 全站引一份大 CSS，包含大量非首屏组件样式
• CSS 在 <head> 同步加载，阻塞首次渲染
• 没有拆分基础样式与组件样式

处理步骤#

1. 把 reset、变量、导航、首屏区块样式抽成 critical.css 内联进 <head>
2. 其余样式用 <link rel="stylesheet" media="print" onload="this.media='all'"> 异步加载
3. 清理未使用的组件样式，按模板拆分 CSS 文件
4. 改动后用 Lighthouse 对比 FCP，确认没有样式闪烁

验收标准#

FCP 提前 300ms 以上，首屏无样式错乱（FOUC），Lighthouse 阻塞资源告警消失。