如何轻松优化 WordPress CSS 文件

如何轻松优化 WordPress CSS 文件

你想优化你的 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

WP Rocket 是市场上最好的 WordPress 缓存插件。它提供了最简单的方法来优化你的 WordPress CSS 交付。事实上,这就像打勾一样简单。

WP Rocket 是一个高级插件,但最好的部分是所有功能都包含在他们的最低计划。

你需要做的第一件事是安装和激活 WP Rocket 插件。要了解更多细节,请参见我们如何安装 WordPress 插件的一步一步指南。

一旦激活,你需要导航到设置 »WP 火箭页面,并切换到 “文件优化” 选项卡。

接下来,你需要向下滚动到 CSS 文件部分。一旦到了那里,你需要勾选 “优化 CSS 交付” 选项旁边的复选框。

这一功能将智能地识别关键的 CSS 需要格式化的部分网页,你的访问者首先看到。你的页面将加载得更快,其余的 CSS 将在你的访问者可以看到它的内容之后加载。

现在你需要做的就是点击 Save Changes 按钮,等待 WP Rocket 为你所有的文章和页面生成必要的 CSS 文件。

它还会自动清除你网站的缓存,这样你的访问者将看到你的网站的新优化版本,而不是任何未优化的版本存储在缓存。

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

方法 2: 使用 Autoptimize 优化 WordPress CSS

Autoptimize 是一个免费的插件,旨在改善你的网站的 CSS 和 JS 文件的交付。

虽然 Autoptimize 是一个免费插件,但它没有像 WP Rocket 那样多的功能,而且需要更多的时间来设置。

例如,它不能像 WP Rocket 那样自动识别关键的 CSS。相反,Autoptimize 需要付费第三方服务的帮助,这是一种额外的成本,需要额外的时间来配置。

然而,如果你预算紧张,不需要 WP Rocket 的所有其他功能来加快你的网站,这可能是一个不错的选择。

你需要做的第一件事是安装并激活 Autoptimize 插件。要了解更多细节,请参见我们如何安装 WordPress 插件的一步一步指南。

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

选中优化 CSS 代码复选框

一旦你这样做了,你需要确保 “聚合 CSS 文件” 选项是未选中的,然后选择 “消除渲染阻塞 CSS”。

你现在可以点击 “保存更改和清空缓存” 按钮来存储你的设置。

但是该插件将不能正常工作,直到你注册一个关键的 CSS 帐户。这是一个付费订阅服务,将提供 Autoptimize 关键的 CSS 代码,它需要优化你的 WordPress CSS 交付。

要做到这一点,导航到 Autoptimize 的设置中的 Critical CSS 选项卡。在这里你可以找到注册 Critical CSS 所需的信息。你可以通过点击第三段的注册链接开始。

一旦你收到了关键的 CSS API 键,向下滚动到 API 键部分,这样你就可以把它粘贴到 “你的 API 键” 文本框中。在此之后,确保单击 Save Changes 按钮。

现在,Autoptimize 已经拥有了添加关键 CSS 所需的所有信息,并将加载样式表的时间推迟到页面呈现完成之后。因此,你的网站加载速度会更快。