创网站长资源 WordPress优化 2025-04-13

如何为WordPress网站生成key CSS？

温馨提示：注册会员付费购买资源可永久免费下载更新版本

网上有很多拖拽式的建站者，没有技术功底也能创建网站。然而，你必须学习SEO的一些技术方面，以保持你的网站在搜索引擎结果页的顶部。

关键是CSS，这种技术主题之一，用来优化你内容的投放，从而直接影响速度。对于在网站上使用多个插件的普通用户来说，WordPress生态系统让这变得更加复杂。

在本文中，我们来探讨如何为WordPress网站创建关键CSS，以提高Google PageSpeed评分。

基础知识

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

首屏内容

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

内容交付优化

许多速度工具(如Google PageSpeed Insights)衡量网站如何提供首屏内容。你可以把它看作是对第一个内容渲染(FCP)的度量。如果它们检测到阻塞，您将会看到一个警告，要求您删除阻塞元素。你将在Google PageSpeed Insights工具中看到的一个流行建议是消除渲染阻塞资源。如果你点击这个建议，Google会向你展示优化关键CSS/JS的交付，延迟所有非关键CSS/JS。

关键的CSS和JS建议

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

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

相关:适当配置WP火箭插件，加快网站加载速度。

在网站中加载CSS

有很多方法可以将CSS插入到你的网页中。您可以在内部或外部内联完成这项工作。最流行和推荐的方法是在网页的标题部分链接一个外部样式表。因为页眉中的内容是和网页一起先加载的，所以会很大程度上影响首屏内容的加载，从而影响页面速度。

Add Your Content Here

在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页面加载的文章。

如何在WordPress中生成key CSS？

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

手动生成关键的CSS，并将其插入到您的网站。

使用WP Rocket插件优化内容交付

我们会详细讲解这两个流程，你可以选择最适合你网站的流程。

手动生成密钥CSS

网上有很多第三方工具可以用来手动生成关键CSS。然而，当你的网站上所有的页面都是相似的，并且在第一个屏幕区域没有自定义内容时，这是有意义的。可以尝试其他免费的key CSS生成服务，比如Sitelocity。

转到Sitelocity网站并输入页面的URL。

单击生成关键路径CSS按钮。

您可以为您的页面获取最小化的键CSS。

生成密钥CSS

现在你已经生成了关键的CSS，下一个任务是把它插入到你的网站的标题部分。理论上，您可以在和标签之间插入header.php文件中的样式。有一些插件可以帮助在header部分插入样式，而无需修改模板文件。

自动优化是我们为此推荐的插件之一。如果你已经在使用自动优化进行缓存，你也可以使用相同的插件来插入关键的CSS。

你可以在自动优化插件的“CSS选项”下插入关键CSS。首先启用“内嵌和延迟CSS”复选框，并将关键CSS粘贴到出现的文本框中。

CSS选项

如你所见，Autooptimize插件还可以自动内联第一个屏幕CSS，同时延迟其他样式。但是，这将很快使缓存大小增加到100%，并且您不能选择在插件中自动清除缓存。而且，大多数情况下，会破坏网站。你可以使用自动优化关键CSS上电插件，这将有助于你在一个更好的方式。为了使用这个插件，你必须从Criticalcss.com获得API，每月10美元。

为什么手动键CSS生成不行？

虽然上面的手动插入过程看似容易，但却不是一件容易的事情。这里有一些你的关键CSS不工作的原因。

你可能有不同的内容，比如页面、博客帖子、产品等。网站上的每种内容类型都需要不同的键CSS来加载第一个屏幕内容。使用插件或手动插入会在所有页面上加载关键的CSS，破坏一些内容。

每次主题、插件、WordPress核心更新，都要生成关键的CSS。否则，使用旧密钥CSS会破坏您网站的布局。对于普通用户来说，网站每次更新都要持续更新关键CSS，这是不可能完成的任务。使用可用的自动更新选项，在更新已安装的插件/主题/核心之前，您必须非常小心。

对于移动设备和桌面设备，您可能需要单独的键CSS。

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

使用WP Rocket为WordPress创建关键CSS

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

首先，你必须购买WP火箭高级插件。

安装并激活WP Rocket后，进入“设置> WP Rocket”并导航到“文件优化”部分。

向下滚动并启用“优化CSS交付”复选框，选择“同步加载CSS”按钮。

保存您的更改，开始关键的CSS生成过程。

在WP Rocket中生成关键CSS

这将允许插件自动为你的WordPress网站上的每种文章类型生成关键CSS。它包括头版。主页、页面、文章和您在网站上使用的任何其他自定义文章类型。如果需要，您可以添加使用第三方工具手动生成的替换键CSS。一般可以留下这个备用钥匙CSS盒空。您也可以在缓存部分启用单独的移动缓存。

请注意，WP Rocket是一个高级插件，拥有单站点许可证，售价49美元。我们认为值得购买这个插件，因为它提供了端到端的缓存解决方案来优化速度。这个插件提供一年的支持和更新。之后还会继续工作，不需要更新就可以使用关键CSS等功能。您可以以30%的折扣续订支持和任何附加功能。与每月10美元用于自动优化的关键API相比，这是一个更好的选择。

重新生成关键CSS

当你更新主题/插件/WordPress核心或者添加自定义文章类型到你的站点时，有必要重新生成关键CSS。否则WP Rocket会使用旧密钥CSS，破坏你网站的布局。因此，请确保不要忘记重新生成键CSS。

单击顶栏上的WP Rocket菜单，然后选择重新生成关键CSS选项。

或者，你可以进入插件的仪表板，点击“重新生成关键CSS”按钮。