如何轻松优化 WordPress CSS 交付(2 种方法)

您想优化您的 WordPress CSS 交付吗?

CSS 文件控制 WordPress 网站的视觉格式和样式.但如果您的 CSS 代码未以最佳方式交付，则可能会降低您的网站速度.

在本文中，我们将向您展示两种优化 WordPress CSS 交付的简单方法.

WordPress CSS 交付如何影响 WordPress 性能

CSS 文件用于定义 WordPress 网站的视觉外观.您的 WordPress 主题包含一个 CSS 样式表文件，您的一些插件也可能使用 CSS 样式表.

CSS 是现代网站所必需的，但 CSS 文件可能会降低您网站的速度和性能，具体取决于它们的设置方式.

即使网站速度稍有延迟，也会造成糟糕的用户体验，并可能影响您的搜索排名和转化，从而导致流量和销售额减少.

CSS 文件会减慢网站速度的一种方式是，如果需要在页面显示之前加载它们.这意味着您的访问者将看到一个空白页面，直到 CSS 文件加载完毕.这称为阻塞渲染的 CSS.

CSS 文件可能会降低网站速度的另一个常见原因是，它们包含的代码多于显示当前页面可见部分所需的代码.额外的代码意味着它们需要更长的时间来加载.

好消息是，您可以通过优化 CSS 代码的交付方式来提高 WordPress 网站的性能.

这是通过确定显示当前网页第一部分所需的最少 CSS 代码来完成的.这称为关键 CSS.

然后将此关键代码内联添加到页面的 HTML 中，而不是添加到单独的样式表中，以便无需先加载 CSS 文件即可呈现代码.

在您的访问者可以看到页面内容后，可以加载其余的 CSS.这称为"延迟加载".

在本教程中，我们将向您展示两种优化 WordPress CSS 交付的方法，您可以选择最适合您的一种.

• 方法 1:使用 WP Rocket 优化 WordPress CSS 交付
• 方法 2:使用 Autooptimize 优化 WordPress CSS 交付

方法 1:使用 WP Rocket 优化 WordPress CSS 交付

WP Rocket 是市场上最好的 WordPress 缓存插件.它提供了优化 WordPress CSS 交付的最简单方法.事实上，就像勾选一个框一样简单.

WP Rocket 是一个高级插件，但最好的部分是所有功能都包含在最低计划中.

您需要做的第一件事是安装并激活 WP Rocket 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，您需要导航到设置 » WP Rocket 页面并切换到"文件优化"选项卡.

接下来，您需要向下滚动到 CSS 文件部分.在那里，您需要选中"优化 CSS 交付"选项旁边的框.

此功能将智能地识别对访问者首先看到的网页部分进行格式化所需的关键 CSS.您的页面加载速度会更快，其余 CSS 将在访问者看到其内容后加载.

您现在需要做的就是单击"保存更改"按钮并等待 WP Rocket 为您的所有帖子和页面生成必要的 CSS 文件.

它还会自动清除您网站的缓存，以便您的访问者看到您网站的新优化版本，而不是缓存中存储的任何未优化版本.

WP Rocket 还有很多其他方法可以帮助您提高网站的性能.要了解更多信息，请参阅我们关于如何在 WordPress 中正确安装和设置 WP Rocket 的指南.

方法 2:使用 Autooptimize 优化 WordPress CSS 交付

Autoptimize 是一个免费插件，旨在改进您网站的 CSS 和 JS 文件的交付.

虽然 Autoptimize 是一个免费插件，但它没有 WP Rocket 那么多的功能，并且需要更多的时间来设置.

例如，它无法像 WP Rocket 那样自动识别关键 CSS.相反，Autoptimize 需要高级第三方服务的帮助，这需要额外的费用并需要额外的时间进行配置.

但是，如果您预算紧张并且不需要 WP Rocket 的所有其他功能来加速您的网站，那么它可能是一个不错的选择.

您需要做的第一件事是安装并激活自动优化插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，您需要访问设置»自动优化页面来配置插件设置.在那里，您需要向下滚动到 CSS 选项部分并选中顶部的优化 CSS 代码框.

执行此操作后，您需要确保取消选中"聚合 CSS 文件"选项，然后选中"消除阻止渲染的 CSS".

您现在可以点击"保存更改并清空缓存"按钮来存储您的设置.

但是在您注册一个关键 CSS 帐户之前，该插件将无法正常工作.这是一项高级订阅服务，可提供 Autooptimize 优化 WordPress CSS 交付所需的关键 CSS 代码.

为此，请导航到自动优化设置中的关键 CSS 选项卡.在这里，您将找到注册 Critical CSS 所需的信息.您可以点击第三段中的注册链接开始.

收到关键 CSS API 密钥后，向下滚动到 API 密钥部分，以便将其粘贴到"您的 API 密钥"文本框中.之后，请确保单击"保存更改"按钮.

Autoptimize 现在拥有添加关键 CSS 内联和延迟加载样式表所需的所有信息，直到页面呈现后.因此，您的网站加载速度会更快.

我们希望本教程能帮助您了解如何优化 WordPress CSS 交付.

您可能还想查看我们的终极指南，了解构建 WordPress 网站的实际成本，以及我们对最佳管理 WordPress 托管公司的比较.