本文探讨内联关键 CSS（将 CSS 规则直接嵌入 HTML 文档）以优化网站性能的方法。通过内联关键 CSS，可以显着加快网页渲染速度，尤其能提升首屏内容的加载速度，避免因额外 HTTP 请求获取外部 CSS 文件而导致的渲染延迟。
关键要点：
互联网早期，网站主要展示文本信息。随着网速提升，用户能够快速下载高清图片和视频，网站功能也日益复杂，使用了各种 CSS 和 JavaScript 框架、插件等。加载所有必要文件需要时间，而更快的网站能带来更好的用户体验，这对于网站成功至关重要。内联关键 CSS 并异步加载非关键 CSS 是提升性能的关键策略。
什么是关键 CSS？
关键 CSS 指的是用于样式化网页首屏内容（用户首先看到的部分，包括导航和其他元素）的 CSS 代码。快速渲染首屏内容至关重要。
需要注意的是，用户使用各种设备和视窗访问网站，因此，仅考虑首屏内容不足以解决所有问题。应将与基本布局和排版相关的 CSS 也视为关键 CSS。
现代 Web 开发实践建议内联关键 CSS，例如：
<!DOCTYPE html>
<html>
<head>
<title>优化后的网页</title>
<style type="text/css">
/* 你的最小化关键 CSS 代码 */
</style>
</head>
<body>
<!-- 你的标记 -->
</body>
</html>为什么需要内联？
Google PageSpeed Insights 等工具可能会提示优化 CSS 加载，建议内联关键 CSS 并异步加载阻塞渲染的样式表。
浏览器只有加载所有 CSS 文件后才会渲染网页首屏内容。当需要加载大量文件时，这会成为一个瓶颈。并非所有用户都拥有高速网络连接，在内容加载完毕前等待库、CSS 和 JavaScript 加载会非常令人沮丧。即使是高速网络用户，也可能在某些情况下（例如穿过隧道）失去连接。如果网站内联了关键 CSS 并且在显示主要内容之前不加载其他文件，那么即使在连接中断的情况下，用户仍然能够访问主要内容。
下图展示了普通网页和优化网页的区别：优化版本可让用户提前约 0.5 秒访问内容。当需要加载大量额外库时，改进将更加明显。
是否应该内联关键 CSS？
这取决于具体情况。如果未使用任何大型框架或库，并且自己的 CSS 文件大小也较小，则可能不需要内联 CSS。
如果使用 Bootstrap 等框架，可能并未用到框架的所有功能。在这种情况下，可以仅从框架样式表中提取关键 CSS，并异步加载实际框架。这将显著提高网站速度。
内联样式表可以被缓存，而 HTML 通常不会被缓存（通常不建议这样做！）。这意味着两者之间有时会有差异。在进行更新时请记住这一点！此外，每次用户加载网站时，内联 CSS 都会导致页面大小增加。例如，如果网站每个页面都有 30kB 的内联 CSS，那么单个用户 10 次页面浏览将消耗 300kB。这听起来可能不算什么大问题，但在世界某些地区（以及某些 3G/4G 数据计划中），数据是昂贵的。确保你计划内联的 CSS 确实对你的网页至关重要，并且不要内联所有内容。
(以下内容与原文类似，为了避免重复，此处省略了关于如何查找关键CSS，使用Grunt、npm模块、Gulp以及其他工具的详细步骤，以及最后的FAQ部分。 这些内容可以通过原文找到。)
总结
是否内联关键 CSS 取决于用户的访问模式和网站结构。如果你的网站是一个单页网站，访问者不会频繁访问它，或者如果你有一个包含框架和插件的复杂网站，内联关键 CSS 可以显著提高性能。
内联 CSS 的唯一顾虑是它会增加每次访问的页面大小。这可以通过使用 Cookie 来缓解，只在第一次访问时发送关键 CSS，同时仍然异步加载完整的 CSS 文件并对其进行缓存。这有点复杂，但你可以同时获得两全其美的效果。
以上是如何以及为什么要介绍您的关键CSS的详细内容。更多信息请关注PHP中文网其他相关文章！
