诶哎一下

标签： 渲染阻塞

  • 如何优化WordPress网站的关键渲染路径

    如何优化WordPress网站的关键渲染路径

    关键渲染路径是浏览器首先在屏幕上渲染页面所执行的一系列任务，即下载、处理并将HTML、CSS和JavaScript代码转换为实际像素并将它们绘制在屏幕上。

    关键渲染路径优化是最小化浏览器执行序列的每个步骤所花费的时间的过程，优先显示与当前用户操作相关的内容。

    此过程的大部分与无需向下滚动浏览器窗口即可看到的页面部分有关。该部分也称为“折叠上方（Above the Fold）”。为了更好的可用性，应该尽快渲染ATF，这可以通过至少减少网络往返次数来实现。渲染ATF所需的资源被认为是关键的，优化Above the Fold意味着将关键资源对首页渲染时间的影响降至最低。

    在这篇文章中，我们将介绍关键渲染路径优化序列。

    • 首先，我将概述浏览器呈现页面内容的任务。
    • 接下来，我将剖析我们可以执行的最相关的操作来优化关键渲染路径。
    • 最后，我将列出一些有用（且流行）的WordPress优化插件。

    关键渲染路径序列

    以下是浏览器为呈现页面而执行的一系列步骤：

    • 首先，浏览器下载并解析HTML标记并构建DOM
    • 然后它下载并处理CSS标记并构建CSS对象模型
    • 它在渲染树中结合了渲染页面所需的DOM和CSSOM节点，渲染树是所有可见节点的树形结构
    • 它计算页面上每个对象的尺寸和位置
    • 最后，它在屏幕上绘制像素

    DOM

    正如Google的关键渲染路径优化指南中所解释的那样，浏览器按四步顺序构建文档对象模型：

    • 首先，浏览器读取行字节并将它们转换为单个字符。
    • 然后它将尖括号内的字符串转换为标记。
    • 这些标记被转换为节点对象。
    • 节点对象以树状数据结构链接，其中包含HTML内容、属性和节点之间的关系。这个结构就是文档对象模型。

    这里需要注意的重要一点是浏览器是逐步构建DOM的。这允许我们通过创建高效的DOM结构来加速页面的渲染。

    DOM结构

    DOM结构

    CSSOM

    当解析器遇到一个引用外部CSS样式表的标签link时，它会阻止解析并发出对该资源的请求。收到CSS文件后，浏览器开始构建CSS节点的树形数据结构。

    • 浏览器读取 .css 文件的行字节并将它们转换为单个字符
    • 它将大括号内的字符串转换为标记
    • 这些标记被转换为节点对象
    • 节点对象以树状数据结构链接，其中包含每个节点的CSS属性以及节点之间的关系。这种结构就是CSS对象模型( CSSOM )。

    与DOM构建不同，CSSOM构建不是增量的。浏览器不能使用样式表的一部分，因为样式可以在同一个样式表中进行细化和重新声明。出于这个原因，浏览器会阻塞渲染过程，直到它接收并解析所有CSS。这意味着CSS是渲染阻塞的。

    CSSOM结构

    CSSOM结构

    渲染树

    浏览器将DOM和CSSOM组合到渲染树中，最终的树结构包含用于将页面渲染到屏幕的所有节点和属性。

    渲染树仅包含渲染页面所需的节点。结果，忽略了不可见的节点。

    浏览器使用渲染树计算节点尺寸和位置作为绘画过程的输入。

    渲染树结构

    渲染树结构

    布局和绘制

    在布局阶段，浏览器计算渲染树每个节点的尺寸和位置。浏览器从根开始遍历渲染树，并在此阶段生成一个盒子模型。该信息最终用于将渲染树的每个节点转换为屏幕上的实际像素。

    关键渲染路径优化

    运行整个过程所需的时间是可变的。这取决于文档大小、请求数量、应用的样式、用户设备等。最相关的Google建议之一是优先考虑可见内容以尽可能快地呈现“首屏”，并提供两个主要规则跟随：

    • 构建HTML以首先加载关键的首屏内容
    • 减少HTML、CSS和JS资源使用的数据量

    正如Google的PageSpeed指南中所解释的那样，如果渲染ATF所需的数据量超过了初始拥塞窗口 (14.6kb)，则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读有关延迟的更多信息）。浏览器以增量方式构建DOM，允许我们通过构建HTML以首先加载首屏并延迟页面的其余部分来减少渲染ATF所需的时间。

    折叠上方的内容因用户设备而异

    折叠上方的内容因用户设备而异

    但是优化并不会随着构建有效的DOM结构而结束。相反，它是一个涉及整个关键渲染路径序列的改进和测量过程。

    让我们深入研究。

    最小化资源维度

    我们可以通过压缩、压缩和缓存HTML、CSS和JavaScript资源来减少浏览器要下载的数据量：

    • 最小化是从源代码中删除不必要的字符（如注释和空格）的过程。这些字符在开发中很有帮助，但它们对于渲染页面没有用。
    • 压缩是Web服务器和客户端减小传输文件大小以提高速度和带宽利用率的能力
    • 缓存：每个浏览器都带有一个HTTP缓存的实现。我们需要做的是确保每个服务器响应都提供正确的HTTP标头，以指示浏览器何时以及应缓存请求的资源多长时间

    优化CSS

    现在我们知道浏览器必须等到它获取并处理CSS代码才能呈现页面（CSS是render-blocking）。但并不是所有的CSS资源都是渲染阻塞的。

    CSS可以限定在特定条件下，我们可以使用媒体类型和媒体查询对其进行优化。如果您在屏幕上查看网页，浏览器将发送打印媒体类型请求，但不会阻止此资源的页面呈现。获取以下link标签：

    <link href=“style.css” />
    <link href=”style.css” />
    <link href="style.css" />

    此标记的引用样式表适用于任何条件，独立于当前媒体类型、屏幕分辨率、设备方向等。这意味着CSS资源始终是渲染阻塞的。

    幸运的是，我们可以在特定条件下发送对CSS资源的请求。我们可以将打印样式移动到一个单独的文件中，并使用media属性告诉浏览器指定的样式表只应在打印页面时加载，并且不需要阻塞屏幕上的呈现：

    <link href=“print.css” media=“print” />
    <link href=”print.css” media=”print” />
    <link href="print.css" media="print" />

    浏览器仍会下载print.css样式表，但不会阻止呈现。此外，浏览器必须为主要的CSS文件下载更少的数据，这将有助于我们加快下载速度。我们可以在link属性上指定任何媒体查询，因此我们可以将CSS拆分为多个文件并有条件地加载它们：

    <link href=“style.css” media=“screen” />
    <link href=“portrait.css” media=“orientation:portrait” />
    <link href=“widescreen.css” media=“(min-width: 42rem)” />
    <link href=”style.css” media=”screen” />
    <link href=”portrait.css” media=”orientation:portrait” />
    <link href=”widescreen.css” media=”(min-width: 42rem)” />
    <link href="style.css" media="screen" />
<link href="portrait.css" media="orientation:portrait" />
<link href="widescreen.css" media="(min-width: 42rem)" />

    确保您的样式实际上是呈现页面所必需的。您可以将适当的值添加到媒体标签属性并取消阻止呈现（如果不是）。

    媒体类型和查询可以帮助我们加快页面渲染，但我们可以做的更多。

    • 最小化CSS：空白和注释只能帮助我们阅读CSS声明。通过从样式表中删除注释和空格，我们可以显着减少CSS文件的字节数。
    • 合并多个CSS文件：这将减少HTTP请求的数量。此操作在移动连接中非常重要，其中性能受到高延迟的影响（阅读更多关于延迟的内容）。
    • 内联关键CSS：某些样式很关键，因为它们需要呈现页面的首屏。最好始终将内联关键样式直接考虑到HTML标记中，以避免额外的HTTP请求。但是避免内联大型CSS文件，因为这可能需要额外的往返来呈现首屏，从而导致PageSpeed警告。

    加快布局和渲染过程

    浏览器布局文档所花费的时间取决于要布局的DOM元素的数量以及这些布局的复杂性。

    • 如果你有很多DOM元素，浏览器可能需要很长时间来计算它们的位置和尺寸：尽可能避免布局。
    • 更喜欢新的Flexbox模型，因为它比旧的Flexbox和浮动布局更快。
    • 避免使用JavaScript强制同步布局。

    计算元素大小和位置需要时间并降低性能。使DOM尽可能简单并避免使用JavaScript来预测布局过程将有助于浏览器加速页面呈现（阅读更多关于布局优化的内容）。

    与Layout紧密相连的是Paint过程，这可能是关键渲染路径序列中最耗时的阶段。每当您更改元素或任何非几何属性的布局时，浏览器都会触发绘制事件。在这个阶段使事情尽可能简单可以帮助浏览器加快绘画过程。例如，需要计算的box-shadow属性比纯边框颜色需要更长的时间来绘制。

    Chrome DevTools允许识别正在绘制的页面部分

    Chrome DevTools允许识别正在绘制的页面部分

    优化页面绘制过程可能并不容易，您应该使用浏览器的开发工具来测量浏览器触发每个绘制事件所需的时间。您可以在Google的渲染性能指南中阅读有关此主题的更多信息。

    使JavaScript解除阻塞

    当浏览器遇到脚本标签时，它必须停止解析HTML代码。内联脚本在文档中的确切位置执行并阻止DOM构建，直到JS引擎完成运行。换句话说，内联JavaScript会显着延迟页面的初始呈现。但是JavaScript也允许操作CSS属性，因此浏览器必须暂停脚本执行，直到它完成下载和构建CSSOM。这意味着JavaScript是解析器阻塞的。

    在外部JS文件的情况下，解析器还必须等到从缓存或远程服务器获取资源，这可能会大大减慢第一页渲染的时间。话虽如此，我们可以做些什么来最小化浏览器加载和执行JavaScript所花费的时间呢？

    • 异步加载JavaScript：script标签的布尔async属性指示浏览器异步执行脚本，如果可能，不阻塞DOM构造。浏览器发送脚本的HTTP请求并继续解析DOM。此外，该脚本不会阻塞CSSOM构建，这意味着它不会阻止关键渲染路径（有关脚本标签属性的更多信息，请参阅MDN 文档）
    • Defer JavaScript：script标签的布尔defer属性告诉浏览器在解析文档之后、触发事件DOMContentLoaded之前执行脚本。如果src属性不存在，则不得使用此属性，即内联脚本（在Mozilla Hacks上阅读更多信息）
    • 推迟内联 JavaScript：许多脚本不操作DOM或CSSOM，因此没有充分的理由阻塞解析。不幸的是，我们不能为内联脚本使用async和defer属性，所以在文档加载后加载它们的唯一方法是将它们移动到底部。优点是内联脚本不需要额外的HTTP请求。但是，在多个页面中使用内联脚本会导致代码冗余。

    总结优化规则

    这是很多东西，不是吗？让我们喘口气，写下到目前为止描述的优化操作列表。

    • 最小化、压缩和缓存HTML、CSS和JavaScript资源。
    • 尽量减少使用渲染阻塞资源（特别是CSS）
      • 在link标签上使用媒体查询
      • 拆分样式表和内联关键CSS
      • 合并多个CSS 文件
    • 尽量减少使用解析器阻塞资源 (JavaScript)
      • 在脚本标签上使用defer属性
      • 在脚本标签上使用async属性
      • 内联JavaScript并将script标签移动到文档底部

    现在我们知道了关键渲染路径优化的基本概念，我们可以看看一些WordPress流行的优化插件。

    优化WordPress中的关键渲染路径

    WordPress用户可以利用几个插件，这些插件几乎涵盖了优化过程的各个方面。您可以安装一个功能齐全的插件或一次安装多个插件，每个插件都提供特定的优化功能。

    W3 Total Cache

    这个插件几乎涵盖了关键渲染路径优化过程的每个阶段。乍一看，插件配置可能会让人不知所措。不过，一旦您更加熟悉关键渲染路径序列，您将能够利用强大的性能工具集。

    WordPress插件W3 Total Cache

    WordPress插件W3 Total Cache

    以下是一些插件功能的列表：

    • HTML（文章和页面）、CSS和JavaScript缓存在内存、磁盘或CDN中
    • 缓存提要、搜索结果、数据库对象、WordPress对象和片段
    • HTML（文章和页面）缩小
    • JavaScript和CSS缩小
    • 使用async和defer进行JavaScript优化
    • 使用缓存控制、未来过期标头和实体标签的浏览器缓存
    • HTTP (gzip)压缩
    • WordPress仪表板上的Google PageSpeed结果

    这些只是W3TC众多功能中的一小部分。在本详细指南中，您可以阅读有关插件的所有功能、设置和选项的更多信息。

    W3 Total Cache-JavaScript最小化设置

    W3 Total Cache-JavaScript最小化设置

    WP Super Cache

    WP Super Cache是另一个流行的网站性能插件。

    WordPress插件-WP Super Cache

    WordPress插件-WP Super Cache

    它具有许多优化功能，但不如以前的W3 Total Cache全面，并且对于新手和中级用户来说可能看起来更实惠。

    WordPress Super Cache测试器

    WordPress Super Cache测试器

    基本上，它提供缓存功能和HTTP压缩，但缺乏资源压缩和JavaScript优化async以及defer属性。然而，超过一百万的活跃安装证明该插件值得一试。

    WP Super Cache中的GZIP选项

    WP Super Cache中的GZIP选项

    Autoptimize

    拥有超过1,000,000次活动安装，Autooptimize是最受欢迎的免费缩小插件之一。

    WordPress插件Autoptimize

    WordPress插件Autoptimize

    它带有一个选项页面，分为几个部分，站点管理员可以在其中分别配置HTML、CSS和JavaScript缩小。

    Autoptimize-HTML优化选项

    Autoptimize-HTML优化选项

    您还可以聚合独立的脚本或样式表并为特定资源设置例外。此外，Autooptimize允许在磁盘或CDN上缓存缩小的资源，并将优化的资产保存为静态文件。要为您的WordPress网站找到最佳设置，您可以在此处遵循我们详细的Autoptimize指南。

    Above the Fold Optimization

    这个插件为Above the Fold优化提供了一个全面的工具集。它是专业人士和高级用户在Google PageSpeed测试中获得满分的工具。

    WordPress插件Above the Fold Optimization

    WordPress插件Above the Fold Optimization

    以下是一些最有趣的功能：

    关键的CSS工具：

    • 条件CSS加载
    • 通过文本编辑器进行关键CSS管理
    • Gulp.js关键CSS创建者
    • 关键CSS质量测试

    CSS负载优化：

    • 异步加载CSS
    • 从HTML中提取CSS
    • 外部样式表缓存

    JS加载优化：

    • 异步JS加载
    • localStorage缓存
    • 延迟加载JavaScript
    • 外部脚本缓存

    此外，该插件还支持Google的Progressive Web App和Google Web Font优化。下面几个优化插件，您也可以尝试一下：

    Swift Performance

    Swift Performance是您可能想要查看的另一个插件。这个高级插件可以帮助提高您的性能分数，并且专门开发用于帮助您尝试并实现Google PageSpeed Insights满分。

    WordPress插件Swift Performance

    WordPress插件Swift Performance

    它的一些主要功能包括：

    • 您不仅可以缩小和合并CSS和javascript文件，还可以为您的页面动态创建关键的CSS。
    • 智能缓存，以及AJAX和动态请求。
    • 内置无损图像压缩。
    • CDN支持。

    您将在如何移除阻塞渲染的JavaScript和CSS中更深入地了解WordPress优化插件。

    小结

    关键渲染路径优化是一个改进和衡量的过程，需要清楚地了解浏览器执行的每项任务，以将代码转换为像素并在屏幕上渲染页面。您可以在Google的优化指南中了解有关关键渲染路径的更多信息。

    下面文章清单涵盖性能优化的多个方面，对WordPress性能优化有需求的站长可以进一步阅读：

  • 如何为WordPress网站生成关键CSS？

    如何为WordPress网站生成关键CSS？

    互联网上有许多拖放式网站建设者可以在没有技术技能的情况下创建网站。但是，您必须学习SEO的一些技术方面，才能使您的网站保持在搜索引擎结果页面的顶部。

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

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

    基础知识

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

    首屏内容

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

    内容交付优化

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

    Critical-CSS-and-JS-Suggestion

    关键的CSS和JS建议

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

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

    相关阅读： 正确地配置WP Rocket插件以提升网站加载速度。

    在网站中加载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=“Link Your Stylesheet URL Here”>
    </head>
    <body>
    Add Your Content Here
    <script src=“Add Your Script URL Here”></script>
    </body>
    </html>
    <!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=”Link Your Stylesheet URL Here”>
    </head>
    <body>
    Add Your Content Here
    <script src=”Add Your Script URL Here”></script>
    </body>
    </html>
    <!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="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浏览器中打开您的网站并查看源代码（确保您没有安装缓存插件或禁用页面缓存）。

    Stylesheets-in-Header

    页眉中的样式表

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

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

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

    请记住，删除未使用的CSS和脚本也与在页面上使用过多的CSS/脚本有关。然而，这与关键的CSS优化完全不同。您甚至可能不会在特定页面上使用某些插件。例如，您不需要网站所有页面上的联系表单插件的CSS。

    在这种情况下，联系表单文件中的CSS/JS文件在常规博客文章中是不必要的，您将看到删除未使用的CSS/JS警告。

    查看我们关于如何在WordPress中禁用未使用的CSS/JS并优化WooCommerce页面加载的文章。

    如何在WordPress中生成关键CSS？

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

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

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

    手动生成关键CSS

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

    • 转到Sitelocity网站并输入页面的URL。
    • 单击“生成关键路径CSS”按钮。
    • 您可以为您的页面获取最小化的关键CSS。

    Generate-Critical-CSS

    生成关键CSS

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

    Autoptimize是我们可以为此目的推荐的插件之一。如果您已经在使用Autoptimize进行缓存，您还可以使用相同的插件来插入关键CSS。

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

    CSS-Options

    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”并导航到“File Optimization”部分。
    • 向下滚动并启用“Optimize CSS Delivery”复选框并选择“Load CSS Asynchronously”按钮。
    • 保存您的更改以开始关键的CSS生成过程。

    Generate-Critical-CSS-in-WP-Rocket

    在WP Rocket中生成关键CSS

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

    请注意，WP Rocket是一个具有单站点许可证的高级插件，售价49美元。我们认为，值得购买此插件，因为它提供了端到端的缓存解决方案以优化速度。该插件提供一年的支持和更新。之后，它将继续工作，您无需更新即可使用关键的CSS和其他功能。您可以以30%的折扣续订以获得支持并获得任何附加功能。与Autoptimize一起使用的criticalcss API每月10美元相比，这是一个更好的选择。

    重新生成关键CSS

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

    • 单击顶部栏上的“WP Rocket”菜单，然后选择“Regenerate Critical CSS”选项。
    • 或者，您可以转到插件的仪表盘并单击“Regenerate Critical CSS”按钮。

    Regenerate-Critical-CSS

    重新生成关键CSS

    特定页面的自定义关键 CSS

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

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

    Generate-Critical-CSS-for-Specific-Page

    为特定页面生成关键CSS

    测试关键CSS

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

    WP-Rocket-Critical-CSS

    WP Rocket关键CSS

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

    小结

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