如何在 WordPress 网站中生成关键 CSS？

由心敲暮色的鼓

互联网上有许多拖放式网站建设者可以在没有技术技能的情况下创建网站。 但是，您必须学习 SEO 的一些技术方面，才能使您的网站保持在搜索引擎结果页面的顶部。 关键 CSS 是这样的技术主题之一，用于优化您的内容交付，进而直接影响速度。 对于在其网站上使用多个插件的普通用户来说，WordPress 生态系统使这变得更加复杂。 在本文中，让我们探讨如何为 WordPress 网站创建关键 CSS 以提高 Google PageSpeed 分数。

了解基础知识

在讨论关键 CSS 之前，有必要了解一些术语，例如首屏和内容交付优化。 此外，您还需要了解在 WordPress 上使用外部样式表的基本方法。

首屏内容

当您在桌面或移动设备上打开网站时，您在屏幕上看到的可见部分是首屏内容区域。 这是一个传统的报纸术语，您可以在其中看到首页顶部的首屏内容。 一般来说，人们习惯于折叠报纸，折叠区域上方提供重要内容。 同样，首先加载的网页顶部可见部分应该为用户提供最有价值的内容。 因此，您应该专注于优化可见顶部以快速加载。

内容交付优化

许多速度工具（如 Google PageSpeed Insights）衡量网站如何提供首屏内容。 您可以将其视为对首次内容绘制 (FCP) 的测量。 如果他们检测到阻塞，您将看到删除阻塞元素的警告。 您将在 Google PageSpeed Insights 工具中看到的流行建议之一是消除渲染阻塞资源。 如果您点击该建议，Google 将向您展示优化关键 CSS/JS 的交付并推迟所有非关键 CSS/JS。

关键的 CSS 和 JS 建议
关键的 CSS 和 JS 建议

修复阻止渲染的 JavaScript (jQuery) 非常容易，因为主题/插件默认在页脚部分加载脚本。 jQuery 是唯一的问题，许多网站可能需要它来加载首屏内容。 因为，WordPress 也使用 jQuery，如果它只是由于 jQuery，你可以忽略这个错误。 否则，如果不会破坏您网站的布局，请使用 WP Rocket 之类的插件来组合和交付所有脚本。

然而，问题在于生成关键的 CSS 并首先加载它。 在本文中，我们将解释如何处理 CSS 优化以提高页面速度得分。

在网站中加载 CSS

有多种方法可以在您的网页中插入 CSS。 您可以通过内联、内部或外部方式执行此操作。 最流行和推荐的方法是在网页的标题部分链接外部样式表。 由于页眉部分中的内容首先与网页一起加载，因此会极大地影响首屏内容的加载，从而影响页面速度。

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.webnots.com/how-to-create-critical-css-for-wordpress-site/Link Your Stylesheet URL Here">
</head>
<body>
Add Your Content Here
<script src="Add Your Script URL Here"></script>
</body>
</html>

在 WordPress 中加载 CSS

WordPress 使用 style.css 作为提供主题样式的外部文件。 这是运行 WordPress 网站的必需文件（除了 functions.php 之外）。 此外，您网站上的每个插件都可能添加额外的 CSS 文件。 在 Chrome 浏览器中打开您的网站并查看源代码（确保您没有安装缓存插件或禁用页面缓存）。

页眉中的样式表
页眉中的样式表

您可以在页面的标题部分看到 WordPress 链接所有外部样式表。 从优化的角度来看，这可能会导致多个问题：

  • 一些主题使用几 MB 大小的重 CSS 样式。 当用户在桌面或移动设备上打开网页时，您不需要加载所有这些样式。
  • 有不同的帖子类型，例如可能使用完全不同样式的产品。 在这种情况下，您不需要其他 CSS 来进行初始（首屏）加载。

您网站上的每个页面都需要最低限度的 CSS 才能加载首屏内容。 页面加载所需的最小 CSS 在技术上称为关键 CSS。 在上述所有情况下，Google PageSpeed Insights 和其他工具都会向您显示优化 CSS 交付的警告。

请记住，删除未使用的 CSS 和脚本也与在页面上使用过多的 CSS / 脚本有关。 然而，这与关键的 CSS 优化完全不同。 您甚至可能不会在特定页面上使用某些插件。 例如，您不需要网站所有页面上的联系表单插件的 CSS。 在这种情况下，联系表单文件中的 CSS/JS 文件在常规博客文章中是不必要的，您将看到删除未使用的 CSS/JS 警告。 查看我们关于如何在 WordPress 中禁用未使用的 CSS/JS 并优化 WooCommerce 页面以进行管理员 AJAX 调用的文章。

如何在 WordPress 中生成关键 CSS？

现在您知道了关键 CSS 对提高页面加载速度的重要性。 有两种方法可以为您的网站生成关键 CSS。

  • 手动生成关键 CSS 并插入您的网站
  • 使用 WP Rocket 插件优化内容交付

我们将详细解释这两个过程，您可以选择最适合您网站的过程。

手动关键 CSS 生成

互联网上有许多第三方工具可用于手动生成关键 CSS。 但是，当您网站上的所有页面都相似并且首屏区域没有自定义内容时，这是有意义的。 您可以尝试其他免费的关键 CSS 生成服务，例如 Sitelocity。

  • 去 Sitelocity 网站 并输入您网页的网址。
  • 单击“生成关键路径 CSS”按钮。
  • 您可以为您的页面获取缩小的关键 CSS。
生成关键 CSS
生成关键 CSS

现在您已经生成了关键的 CSS，下一个任务是将它插入到您网站的标题部分。 理论上，您可以在 和 标记之间插入 header.php 文件中的样式。 有一些插件可以帮助在标题部分插入样式而无需修改模板文件。 自动优化是我们可以为此目的推荐的插件之一。 如果您已经在使用 Autoptimize 进行缓存，您还可以使用相同的插件来插入关键 CSS。

您可以在 Autooptimize 插件的“CSS 选项”下插入关键 CSS。 首先启用“Inline and Defer CSS”复选框并将关键的 CSS 粘贴到出现的文本框中。

CSS 选项
CSS 选项

如您所见，Autooptimize 插件还可以在延迟其他样式的同时自动内联首屏 CSS。 但是，这会迅速将缓存大小增加到 100%，并且您无法在插件中选择自动清除缓存。 此外，在大多数情况下，它会破坏网站。 您可以使用 Autooptimize CriticalCSS Power-Up 插件，它会以更好的方式帮助您。 为了使用这个附加组件，您必须以每月 10 美元的价格从 Criticalcss.com 获取 API。

为什么手动关键 CSS 生成不起作用？

虽然上述手动插入过程看起来很容易，但它并不是一件容易的事。 以下是您的关键 CSS 不起作用的一些原因。

  • 您可能有不同的内容，例如页面、博客文章、产品等。您网站上的每种内容类型都需要不同的关键 CSS 来加载首屏内容。 使用插件或手动插入会在所有页面上加载关键的 CSS 并破坏一些内容。
  • 每次更新主题、插件和 WordPress 核心时，都必须生成关键的 CSS。 否则使用旧的关键 CSS 会破坏您网站的布局。 对于普通用户来说，为网站上的每一次更新持续更新关键 CSS 是一项不可能完成的任务。 使用可用的自动更新选项，在更新安装的插件/主题/核心之前必须非常小心。
  • 对于移动设备和桌面设备，您可能需要单独的关键 CSS。
查看  为什么博主应该使用付费托管？

对于所有这些问题，剩下的唯一选择是使用一些插件来处理这些问题并动态自动生成关键 CSS。

使用 WP Rocket 为 WordPress 创建关键 CSS

幸运的是，您有一个缓存插件，可以在 WordPress 中完成这一关键的 CSS 生成。 由于其简化的设置，WP Rocket 是 WordPress 最受欢迎的缓存插件之一。 同样，关键的 CSS 生成是插件的优点之一，任何普通用户都可以在不破坏网站的情况下获得好处。

  • 首先，您必须购买 WP Rocket 高级插件。
  • 安装并激活 WP Rocket 后，转到“设置 > WP Rocket”并导航到“文件优化”部分。
  • 向下滚动并启用“优化 CSS 交付”复选框并选择“异步加载 CSS”按钮。
  • 保存您的更改以开始关键的 CSS 生成过程。
在 WP Rocket 中生成关键 CSS
在 WP Rocket 中生成关键 CSS

这将允许插件为您的 WordPress 网站上的每种帖子类型自动生成关键 CSS。 它包括首页。 主页、页面、帖子和您在网站上使用的任何其他自定义帖子类型。 如果需要，您可以添加使用第三方工具手动生成的备用关键 CSS。 通常，您可以将此备用关键 CSS 框留空。 您还可以在“缓存”部分启用单独的移动缓存。

重新生成关键 CSS

当您更新主题/插件/WordPress 核心或在您的站点上添加自定义帖子类型时，有必要重新生成关键 CSS。 否则，WP Rocket 将使用旧的关键 CSS 并破坏您网站的布局。 因此，请确保不要忘记重新生成关键 CSS。

  • 单击顶部栏上的“WP Rocket”菜单，然后选择“重新生成关键 CSS”选项。
  • 或者，您可以转到插件的仪表板并单击“重新生成关键 CSS”按钮。
重新生成关键 CSS
重新生成关键 CSS

特定页面的自定义关键 CSS

如前所述，您可能有一个主页或另一个使用页面构建器插件创建的页面。 与您网站上的所有其他博客文章相比，此页面将具有完全不同的关键 CSS。 在这种情况下，您必须创建单独的关键 CSS 并仅在该页面上有条件地加载。 WP Rocket 只需点击几下即可帮助您实现这一目标。

  • 转到要生成单独的关键 CSS 的页面的页面/帖子编辑器。
  • 在侧边栏文档面板上，找到“WP Rocket Options”面板。 如果没有找到，请单击右上角的三个点按钮，然后选择“首选项”。 在弹出窗口中，您可以启用站点上可用的所需文档面板。
  • 选择“Optimize CSS Delivery”复选框并点击“Generate Specific CPCSS”按钮。
  • 这将为该页面生成特定的关键 CSS，并且插件将在用户访问该页面时加载此关键 CSS。
为特定页面生成关键 CSS
为特定页面生成关键 CSS

测试关键 CSS

实现手动方法或者使用WP Rocket插件后，可以通过查看页面源码来测试页面。 确保注销您的管理面板或为插件中的登录用户启用缓存。 正如您在下面的屏幕截图中看到的，WP Rocket 在标题中添加了关键的 CSS。

WP火箭关键CSS
WP火箭关键CSS

您还可以在 Google PageSpeed Insights 工具中查看页面。 如果一切顺利，您将看到在传递的结果下消除了渲染阻塞资源和其他 CSS 错误。 这表明您已在网站上正确实施关键 CSS。

最后的话

我们希望这篇文章能够强调关键 CSS 在 WordPress 网站中的重要性。 当您的站点较小且页面较少时，您可以使用手动选项。 但是，对于一个有大量帖子和不同帖子类型的正在运行的博客，您可以尝试 WP Rocket 插件。 尽管它花费了您一些钱，但您可以为您的站点获得完整的缓存解决方案。

类似文章