为什么内联关键CSS后首屏渲染反而更慢了？

UX-玉淇提问于 2026-02-05 17:38:55 阅读 24

优化

我按照教程把关键CSS内联到HTML里了，但首屏渲染时间反而比之前多了500ms，这是为什么？

之前用Webpack的ExtractTextPlugin把CSS抽离成单独文件，加载时间约1.2秒。按首屏优化指南，我把前3KB的关键CSS直接写到HTML的标签里，但Lighthouse测试显示首屏渲染时间变成1.7秒了。

检查代码发现内联样式确实生效了，但控制台显示有2个第三方JS（统计代码）还在首屏阻塞渲染。尝试给它们加了async属性后还是没改善，这是不是主要原因？


<style>
  /* 内联的关键CSS */
  body { font-family: Arial; }
  .header { background: #333; padding: 20px; }
</style>

<script src="analytics.js"></script>
<script src="tracking.js"></script>

用Chrome DevTools的网络面板看到内联样式确实优先加载，但为什么渲染时间反而变长？是不是内联CSS反而增加了HTML解析时间？

首屏优化

我来解答赞 4 收藏

反馈

2 条解答

西门伟伟 Lv1

你这个情况我遇到过好几次，根本问题不在CSS内联，而是那两个JS文件还在阻塞解析。虽然你加了async，但得看这两个脚本的加载时机和执行时间。

首先明确一点：内联关键CSS本身不会让首屏变慢，反而应该更快。你现在多了500ms，大概率是JS执行拖累了页面渲染。

你在HTML里直接写了