优化CSS加载以加快页面渲染速度

当CSS加载缓慢时，浏览器必须等待下载和处理样式数据，然后才能完全完成渲染您的网页。以下5个步骤可以更快显示您的网页。

合并您的CSS脚本

首先，将所有可以合并的CSS脚本合并为一个更大的CSS脚本。

这样做的原因是，您的网页加载的外部CSS文件数量越多，您的网页速度就越慢。

部分原因是加载多个CSS文件会为浏览器创建不必要的额外请求，但即使使用一个外部CSS文件，在页面速度方面也可能被视为不良实践。

当外部文件包含用于页面折叠上方内容的CSS规则时，它会阻塞网页的渲染。

内联这些CSS规则将解决此问题。因此，您应该始终内联CSS脚本，除非它们尺寸较大。

压缩您的新CSS脚本

将所有CSS脚本合并为一个更大的脚本后，您应该压缩此脚本，以减少访问者加载网页时必须下载的数据量。

每增加一KB，您的网页加载速度就会稍微变慢。使用CSS压缩工具压缩您的CSS。

优先处理折叠上方内容的CSS规则

这是优化CSS加载时最重要的因素。请按照以下步骤操作：

首先确定您的新合并CSS脚本是大还是小。

如果脚本较小，您应该将其内联到HTML head标签中。延迟加载较小的CSS脚本通常是不必要的，因为这样做（从页面速度角度）不会带来任何好处。

如果脚本较大，请继续下一步。

从较大的CSS脚本中提取关键的折叠上方CSS，即严格必要的CSS规则，用于显示网页的折叠上方内容。

一个好方法是使用Addy Osmani的Node.js包，它可以自动执行此任务。此方法需要SSH访问权限，因此可能不适合所有人。其他选择是使用在线关键CSS生成器或手动执行。

现在您已经拥有了关键渲染路径CSS脚本，您应该将此脚本内联到网页的HTML head标签中，并在页面底部延迟加载新的大型CSS脚本的其余部分。

避免使用CSS @import

使用CSS @import规则可以在CSS脚本中导入外部CSS文件。

这对网页速度不利，因为@import函数会单独加载每个导入的外部文件，而不是与渲染特定页面所需的所有其他文件并行加载。

它还会创建不必要的HTTP请求。

您可以使用CSS加载工具检查您的网页是否使用CSS @import，或阅读更多关于为什么以及如何避免CSS @import的信息。

避免在HTML body中使用STYLE标签

您应该删除HTML body中使用的所有CSS（例如：<p style="margin-left:10px;"></p>），并将这些CSS代码放在HTML head标签内。

不这样做对页面速度不利，因为放在HTML body中的style标签会阻塞渲染，并且总体上是不良的编码习惯。您可以使用此工具检查您的网页是否使用了它们。

为WordPress优化CSS加载

为WordPress（或Drupal和Joomla）网站优化CSS加载的方法与非WordPress网站相同。