如何以及为什么应该内联关键 CSS

在互联网的早期，网站主要用于显示基于文本的信息。慢慢地，我们的连接速度得到了提高，用户已经能够相当快地下载高分辨率图像和视频。现在，网站的作用不仅仅是以文本形式提供必要的信息。网站变得越来越复杂，有 CSS 和 JavaScript 框架、大量插件等等。当所有这些都在进行时，加载所有必需的文件可能需要一些时间。 更快的网站可以带来更好的用户体验，这可以对网站的成功产生巨大的影响。开发人员可以做什么来开始提高性能？开发人员可以做的一件非常有帮助的事情是内联关键 CSS 并异步加载非关键 CSS。在本文中，我们将一一介绍这些要点，并帮助您提高网站的性能。 什么是关键CSS？ 项目中最关键的 CSS 是用于设置网站首屏内容样式的 CSS。首屏内容是用户首先在您的网站上看到的内容，其中可以包括导航和其他元素。

因此，尽快正确地设计和渲染网站的这一部分非常重要。 我想在这里提到的一件事是，您的访问者可能使用多种具有不同视口的设备来访问您的网站。因此，首屏内容本身不会有太大帮助。为了解决这个问题，您还应该考虑与基本布局和排版相关的任何 CSS 也很重要。 Learn to Code with JavaScript 现代 Web 开发 富人人数数据 实践通常建议您内联关键 CSS。它将被放置到您的网页中，如下所示需要内联？ 如果您前往Google PageSpeed Insights并分析您的网页之一，您可能会看到有关通过内联关键 CSS 和异步加载渲染阻止样式表来优化 CSS 交付的警告。 浏览器不会渲染网页的首屏内容，除非它们已加载所有 CSS 文件。当需要加载大量文件时，这可能是一个大问题。 并非所有用户都拥有快速的互联网连接，等待库、CSS 和 JavaScript 加载才能真正访问他们想要的内容可能会非常令人沮丧。



即使具有快速互联网的用户在某些情况下也可能会失去连接，例如当他们穿过隧道时。此时，如果您的网站内嵌了关键 CSS 并且在显示主要内容之前不加载其他文件，他们仍然能够访问主要内容。 下图说明了常规网页和优化网页之间的区别。可以看到，优化后的版本将允许用户提前大约0.5秒访问内容。当需要加载大量额外库时，改进会更加明显。 内联 CSS 加载阶段 你应该内联关键 CSS 吗？ 这取决于实际情况。如果您没有使用任何重型框架或库，并且您自己的 CSS 文件也很小，那么您可能不需要内联 CSS。 Learn to Code with JavaScript 如果您使用像 Bootstrap 这样的框架，您可能没有使用该框架提供的所有功能。在这种情况下，您只需从框架的样式表中提取关键 CSS 并异步加载实际框架即可。这应该会显着提高您网站的速度。