使用新的 Hummingbird Critical CSS 让 WordPress 网站加载速度比以...

fabiha01

使用 Hummingbird 的关键 CSS 功能轻松优化 WordPress 网站的关键渲染路径。
蜂鸟关键 CSS
借助 Hummingbird 备受期待的 Critical CSS 功能，您可以期待更快的页面加载速度和更佳的 WordPress 网站性能。以下是阻止渲染的资源已成为过去的原因……

蜂鸟优化 - 前后结果
利用 Hummingbird 的关键 CSS 功能获得 Google 的 PageSpeed 性能分数。
如果您关心页面加载速度（如果您希望访问者在您的网站上停留超过两秒，您就应该关心），那么了解CSS 如何影响网站性能以及如何使用称为关键 CSS 的优化任务来加快页面加载时间至关重要。

在本文中，我们将讨论以下主题：

什么是关键 CSS 以及它如何提高性能？
如何使用 Hummingbird 的关键 CSS 功能优化 WordPress
Hummingbird 的关键 CSS 与 WordPress 的所有内容兼容
让我们深入了解一下……

什么是关键 CSS 以及它如何提高性能？
当用户访问网站时，他们最初能看到的只是滚动之前屏幕上显示的内容。

该区域被称为“首屏”。

解释折叠上方和下方的图像。
网站访问者首先看到的是首屏上方的内容。
积极的用户体验可以通过用户感知网页内容加载的速度来衡量。页面加载速度越快（或用户感知加载速度越快），用户体验就越好。相反，页面加载速度越慢（或用户感知加载速度越慢），体验就越差。

由于访问者进入页面时看到的只是在开始向下滚动之前折叠上方的内容，意大利商业传真列表 因此在加载页面其余部分之前尽快加载折叠上方的内容是有意义的。

关键 CSS（也称为关键路径 CSS或关键 CSS 渲染路径）是一种提取所需的最少 CSS 的技术，以便尽快向用户呈现首屏内容。

当查看首屏内容的用户感觉页面加载很快时，其余 CSS 也可以加载，并且用户体验不会受到影响。

图像延迟加载、延迟 JavaScript 执行和关键 CSS等技术都是优化浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素的步骤顺序的方法。

该序列称为关键渲染路径 (CRP)，包括文档对象模型 (DOM)、CSS 对象模型 (CSSOM)、渲染树和布局。

优化关键渲染路径可提高渲染性能。

关键 CSS 的优势
关键 CSS 可以通过以下方式提高网站性能：

更快的初始渲染
改善用户体验
更好的 SEO 性能
减少页面重量
简化维护
渐进增强
对核心网络指标（尤其是首次内容绘制和速度指数）产生积极影响
更高的 PageSpeed Insights 分数
注意：页面加载后滚动前显示的首屏内容会因浏览网页的设备和屏幕尺寸而异。因此，对于首屏内容的像素高度，并没有统一的定义。

实施关键 CSS
因此，您已经通过 PageSpeed Insights 工具运行了您的网站，并且报告建议消除阻止渲染的资源。

现在怎么办？你们如何真正落实这些建议？

好吧，您可以尝试手动修复问题（繁琐、耗时且不推荐），使用Web 开发工具（如果您具备技术技能），或使用像Hummingbird这样的 WordPress 插件来自动识别、处理和解决任何问题。

我们推荐使用插件方法。这是完成工作最快捷、最智能的选择。

虽然关键 CSS 主要指的是首屏 CSS，但 Hummingbird 可以提取和内联页面上使用的所有 CSS，同时延迟/删除其余 CSS。

Hummingbird 不仅可以解决渲染阻塞和未使用的 CSS 问题以进行全页面优化，还可以通过使用内置功能（如关键 CSS（见下文）、延迟 JavaScript 资产的 JavaScript 执行以及影响 WordPress 网站上的核心 Web Vitals 结果的其他区域）消除渲染阻塞资源来处理首屏优化。