如何以及为什么要介绍您的关键CSS-css教程-PHP中文网

提升网页性能：内联关键 CSS 的策略与技巧

首页

web前端

css教程

如何以及为什么要介绍您的关键CSS

尊渡假赌尊渡假赌尊渡假赌

Feb 20, 2025 am 11:52 AM

提升网页性能：内联关键 CSS 的策略与技巧

本文探讨内联关键 CSS（将 CSS 规则直接嵌入 HTML 文档）以优化网站性能的方法。通过内联关键 CSS，可以显着加快网页渲染速度，尤其能提升首屏内容的加载速度，避免因额外 HTTP 请求获取外部 CSS 文件而导致的渲染延迟。

How and Why You Should Inline Your Critical CSS

关键要点：

精准识别关键 CSS： 关键 CSS 指的是渲染首屏内容所需的最小 CSS 代码。这因页面而异，需要借助工具（如 Google PageSpeed Insights、Critical Path CSS Generator 和 Penthouse.js）进行识别和提取。
权衡利弊： 内联关键 CSS 可提升加载速度，但也会增加 HTML 文档大小，并可能导致代码冗余（尤其当相同 CSS 规则在多个页面重复使用时）。因此，务必确保内联的 CSS 确实对网页至关重要。
自动化工具： Grunt、npm 模块（如Critical）、Gulp，以及WordPress 插件（如Autoptimize、Above The Fold Optimization 和W3 Total Cache）等工具能自动化识别、提取和内联关键CSS，简化操作流程。

How and Why You Should Inline Your Critical 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 秒访问内容。当需要加载大量额外库时，改进将更加明显。

How and Why You Should Inline Your Critical CSS

是否应该内联关键 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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn