目录
在 Google PageSpeed Insights 上运行性能审核时，您会发现 Google几乎每次都会建议您“消除渲染阻塞资源”。这意味着您应该始终优先加载关键的 CSS 和 JavaScript。
但如何决定哪个 CSS 是关键的，哪个不是呢？您应该“延迟”网站的哪一部分以加快另一部分的速度？这一切都与优先级、确定哪些 CSS 资源是必不可少的以及如何优化其交付有关。
什么是关键 CSS 以及为什么它对性能很重要？
关键CSS是一种提取首屏CSS以尽快显示页面的技术。这就像使用最少的 CSS 来显示访问者正在查看的内容。
| 💡 关键 CSS 让你重新思考浏览器如何加载 CSS：你需要优先考虑首屏内容的 CSS。 |
换句话说，关键 CSS 是优化性能的关键。在渲染页面之前，浏览器需要下载并解析 CSS 文件，使这些文件成为渲染阻塞资源。CSS 文件越大，浏览器处理它们所需的时间就越长。所有这些由繁重的 CSS 文件创建的请求都会增加网页的加载时间，从而让访问者 和 Google 感到不安。
由于新的排名因素（包括 Core Web Vitals），页面速度也可能会影响您的 SEO 性能。它们是 Google 用来衡量用户体验的一组因素——包括页面的速度。体验越好，您的排名就越好。
您熟悉衡量绩效的六个 Lighthouse 指标吗？其中两个 –首次内容绘制 (FCP)和首次输入延迟 (FID) – 衡量网站的感知速度。如果这些指标表现良好，那么Google 衡量的用户体验也会表现良好。但是，如果两个 KPI 均出现亏损，则最好优化关键 CSS。
简单解释关键 CSS
简单来说，关键 CSS 是一项优化任务。这就像告诉您的浏览器仅加载访问者正在查看的 CSS。这有助于提高感知速度，即网站对访问者来说的速度。
让我们用下图做一个快速练习。想象一下您是访问网站的移动用户。
场景 #1 – 在顶部，有一个带有渲染阻塞 CSS 的页面。在加载整个 CSS 文件之前，您会看到一个空白页面。
场景 #2 – 在底部，首先渲染关键的 CSS。由于浏览器已经开始加载最重要的样式表，因此您会更早地开始看到页面。
问题：您“感觉”哪种情况更快？
下面：内联关键 CSS（首屏内容）
答：我们都同意下面的感知速度更好。
如果做得正确，您的访问者会感觉到页面加载时间明显减少，因为页面渲染速度更快。
为什么需要关键 CSS？
加载 CSS 样式表通常是您设计 WordPress 网站的方式。CSS 是用于描述网页的语言，例如颜色、布局和字体。如果没有 CSS，页面将如下所示：
如果有CSS， 页面将如下所示
关键 CSS 渲染路径是什么意思？
关键渲染路径是浏览器在访问者屏幕上渲染页面所需执行的一系列任务。例如，这些任务包括下载要在网页上显示的照片、字体和文本。
如前所述，浏览器还需要下载 CSS 文件才能呈现正确的页面布局。如果您的文件非常大，访问者最终将等待整个文件下载完毕。
但是，如果浏览器可以在下载过程中开始渲染 CSS 呢？
想象一种方法来减轻阻塞并尽快开始 CSS 交付。这种技术准确地称为关键渲染路径的优化。
浏览器遵循五个步骤，直到将页面呈现给访问者。在此过程中可能会发生很多事情。这就是为什么我们应该确保每个步骤尽快完成。
现在有两个问题：如何优化每一步？如何确保我们拥有最高效的 CSS 交付？
这些问题将我们带入下一节。您将了解如何使用关键的 CSS 技术（优化 CSS 交付）来缩短渲染时间并消除阻塞渲染的 CSS 错误。
优化 WordPress 上 CSS 交付的 3 个步骤
CSS 控制 WordPress 网站的视觉格式和样式，但如果 CSS 文件未以最佳方式交付，您最终可能会得到一个缓慢的网页。
因此，提高 WordPress 网站性能的最佳方法之一是优化CSS 代码的交付方式和时间。优化 WordPress 网站的 CSS 交付分为三个主要步骤，即：
第 1 步：查找并生成关键 CSS — 即确定显示首屏内容所需的最少 CSS 代码。您需要找出用户首次加载页面时可以在视口中看到的内容。为页面确定正确的关键 CSS 可能很复杂，因为访问者使用许多不同的屏幕尺寸，例如台式机、平板电脑和移动设备。
如何找到关键CSS
WebDev为您提供了三种可用于识别关键 CSS 的工具：
- Critical– 提取首屏 CSS（并内联和缩小它）
- CriticalCSS – 另一个提取关键 CSS 的工具
- Penthouse – 如果您的网站有大量 CSS，这是一个不错的选择
第 2 步：内联此关键 CSS — 即在 HTML 文档的 <head> 中添加关键 CSS，以消除获取这些样式的所有额外请求。
在下面的WebDev示例中，他们将关键 CSS 内联到 <head> 文件中，以便浏览器可以更快地交付它并尽快向用户呈现某些内容。
第 3 步：异步加载 CSS 的其余部分– 这会延迟非关键 CSS，以便在访问者可以看到您的网页内容后加载它。该技术也称为“延迟加载”。WebDev很好地解释了整个手动过程。
通过执行这三个手动步骤，您将优化 CSS 交付和关键渲染路径。然而，还有更直接的方法来优化 WordPress CSS 交付：使用 WordPress 插件！
如何使用插件生成关键 CSS 并优化关键渲染路径
幸运的是，您可以使用 WordPress 插件优化关键 CSS 的交付并推迟不太重要的资源。这将为您节省一些时间并避免手动修改代码文件。我们整理了一个列表，以便您可以测试哪种工具最适合您。
- Asset Cleanup – 内联 CSS 文件（自动并通过指定样式表的路径）。
- Autoptimize – 默认情况下在页面头部注入 CSS，还可以内联和延迟关键 CSS。
发表回复