海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

在 Google PageSpeed Insights 上运行性能审核时,您会发现 Google 几乎每次都建议您“消除阻塞渲染的资源”。 这意味着您应该始终优先加载关键的 CSS 和 JavaScript。

严重的 CSS 警告

但是如何确定哪些 CSS 是关键的,哪些不是? 您应该“延迟”网站的哪个部分以加快另一个速度? 这完全是关于优先级和找到哪些 CSS 资源是必不可少的,以及如何优化它们的交付。

让我们潜入。

什么是关键 CSS,为什么它对性能很重要?

关键 CSS 是一种提取折叠上方 CSS 以尽快显示页面的技术。 这就像使用最少的 CSS 来显示访问者正在查看的内容。

位于首屏的关键 CSS
位于首屏的关键 CSS
💡 关键 CSS 让你重新思考浏览器如何加载 CSS:你需要优先考虑首屏内容的 CSS。

换句话说,关键 CSS 是优化性能的关键。 在渲染页面之前,您的浏览器需要下载并解析 CSS 文件,使这些文件成为渲染阻止资源。 CSS 文件越大,浏览器处理它们所需的时间就越长。 所有这些由大量 CSS 文件创建的请求都会增加网页加载的时间,让访问者感到不安 和谷歌。

由于新的排名因素,包括 Core Web Vitals,页面速度也可能会影响您的 SEO 性能。 它们是 Google 实施的一组用于衡量用户体验的因素——包括页面的速度。 体验越好,您的排名就越好。

您熟悉衡量性能的六个 Lighthouse 指标吗? 其中两个——首次内容绘制 (FCP) 和首次输入延迟 (FID)——衡量您网站的感知速度。 如果这些指标处于良好状态,那么 Google 衡量的用户体验也将处于良好状态。 但是,如果两个 KPI 都为红色,则您最好优化关键 CSS。

海外社媒SNS代运营Tiktok代运营公司

用简单的英语解释关键 CSS

简单来说,关键 CSS 是一项优化任务。 这就像告诉您的浏览器只加载访问者正在查看的 CSS。 这有助于提高感知速度,即网站在访问者看来的速度。

让我们用下图做一个快速练习。 假设您是访问网站的移动用户。

场景#1 – 在顶部,有一个带有阻止渲染的 CSS 的页面。 在加载整个 CSS 文件之前,您会看到一个空白页面。

场景#2 – 在底部,首先呈现关键 CSS。 由于浏览器已经开始加载最重要的样式表,因此您可以更早地看到页面。

问题:你觉得哪个场景更快?

顶部:使用阻止渲染的 CSS 加载页面底部:内联的关键 CSS(折叠内容上方)
顶部:使用阻止渲染的 CSS 加载页面
底部:内联关键 CSS(首屏内容)

答:我们都同意底线的感知速度更好。

由于正确完成页面渲染速度更快,您的访问者会感觉到页面加载时间明显减少。

为什么关键 CSS 是必要的?

加载 CSS 样式表通常是您设置 WordPress 网站样式的方式。 CSS 是用于描述网页的语言,例如颜色、布局和字体。 如果没有 CSS,网络看起来就像我们下面的左列:

没有 CSS 的 WP Rocket 网站 带有 CSS 的 WP Rocket 网站

关键 CSS 渲染路径是什么意思?

关键渲染路径是浏览器在访问者屏幕上渲染页面所需执行的一系列任务。 例如,这些任务包括下载照片、字体和要在网页上显示的文本。

如前所述,浏览器还需要下载您的 CSS 文件以呈现页面的正确布局。 如果您的文件非常大,访问者最终会等到整个文件下载完毕。

但是如果浏览器可以在下载过程中开始呈现 CSS 呢?

想象一种减轻阻塞并尽快开始 CSS 交付的方法。 这种技术精确地称为优化 关键渲染路径。

关键渲染路径
关键渲染路径

浏览器如下 五步 直到将页面呈现给访问者。 在这个过程中可能会发生很多事情。 这就是为什么我们应该确保每个步骤都尽快完成。

现在出现两个问题:如何优化每一步? 如何确保我们拥有最高效的 CSS 交付?

这些问题将我们带到下一部分。 您将学习如何使用关键 CSS 技术(优化 CSS 交付)改进渲染时间并消除阻塞渲染的 CSS 错误。

优化 CSS 交付的 3 个步骤

CSS 控制着您的 WordPress 网站的视觉格式和样式,但如果 CSS 文件没有以最佳方式交付,您最终可能会看到一个缓慢的网页。

因此,提高 WordPress 网站性能的最佳方法之一是优化 如何 什么时候 CSS 代码已交付。 为您的 WordPress 网站优化 CSS 交付有三个主要步骤,即:

第1步: 查找并生成关键 CSS — 确定显示首屏内容所需的最少 CSS 代码。 您需要找出用户第一次加载页面时可以在视口中看到的内容。 为页面确定正确的关键 CSS 可能很复杂,因为访问者使用许多不同的屏幕尺寸,例如桌面、平板电脑和移动设备。

桌面、平板电脑和智能手机的不同首屏内容 –
资料来源:金斯塔

如何找到关键的 CSS

WebDev 为您提供了三个可用于识别关键 CSS 的工具:

  • 关键 – 提取首屏 CSS(以及内联和缩小它)
  • CriticalCSS – 另一个提取关键 CSS 的模块
  • Penthouse – 如果您的网站有很多 CSS 是一个不错的选择

第2步: 内联这个关键的 CSS — 即在 HTML 文档的 中添加关键 CSS 以消除获取这些样式的所有额外请求。

在下面的 WebDev 示例中,他们在 文件中内联了关键 CSS,以便浏览器可以更快地交付它并尽快向用户呈现一些内容。

在我的 HTML 中内联关键 CSS – 来源:WebDev

第 3 步: 异步加载其余的 CSS — 这会延迟非关键 CSS 以便加载 您的访问者可以看到您的网页内容。 这种技术也称为“延迟加载”。 WebDev 很好地解释了整个手动过程。

通过遵循这三个手动步骤,您将优化 CSS 交付和关键渲染路径。 但是,有更直接的方法可以优化 WordPress CSS 交付:使用 WordPress 插件!

如何使用插件生成关键 CSS 并优化关键渲染路径

幸运的是,您可以使用 WordPress 插件优化关键 CSS 的交付并推迟不太重要的资源。 这将为您节省一些时间并避免手动修改您的代码文件。 我们整理了一个列表,以便您可以测试哪种工具最适合您。

WordPress花园建议你也读一下这篇文章  WordPress网站加速教程:购物者放弃购物车的 13 个原因以及如何解决它
使用 WP Rocket 两次点击优化 CSS
使用 WP Rocket 两次点击优化 CSS
  • 自动优化 – 默认情况下在页面头部注入 CSS,也可以内联和延迟关键 CSS。
使用 Autooptimize 插件优化 CSS
使用 Autooptimize 插件优化 CSS
  • 资产清理 – 内联 CSS 文件(自动和通过指定样式表的路径)。
使用资产清理内联 CSS 文件
使用资产清理内联 CSS 文件

如何使用 WP Rocket 优化 CSS 交付

在 WP Rocket 3.10 中,Load CSS Asynchronously 选项解决了我们之前看到的页面速度建议:“消除渲染阻塞资源”。 WP Rocket 涵盖了两个主要的 CSS 优化:

  1. 它生成呈现网站可见部分(首屏内容)所需的关键 CSS。
  2. 它异步加载所有其他 CSS 文件(优先加载哪个文件)。

要优化 CSS 交付,只需按照 WP Rocket 仪表板中的这些步骤操作即可:

  • 设置 > WP火箭
  • 点击 文件优化 标签。
  • 向下滚动到 CSS Files 部分,然后单击标记为 优化 CSS 交付.
  • 选择 删除未使用的 CSS 选项 (推荐选项)。 这将仅提取页面上所需的 CSS,并且还将内联它。
删除未使用的 CSS 或异步加载 CSS - 来源:WP Rocket
删除未使用的 CSS 或异步加载 CSS – 来源:WP Rocket

或者,WP Rocket 还允许您异步加载 CSS,并为关键 CSS 提供后备选项。 如果插件无法生成正确的关键 CSS,请使用此回退字段。

回退关键 CSS - WP Rocket
回退关键 CSS – WP Rocket
💡 移除未使用的 CSS 是消除渲染阻塞 CSS 的推荐方法。 请注意,不可能同时激活两者。

最后但同样重要的是,WP Rocket 还解决了 PageSpeed Insights 的“减少未使用的 CSS”建议。

减少未使用的 CSS - PageSpeed Inisghts 审核
减少未使用的 CSS – PageSpeed Inisghts 审核

未使用的 CSS 会影响页面的加载时间,因为浏览器仍然需要加载它们。 Google 性能指标,例如 最大的内容绘制 (LCP)总阻塞时间 (TBT) 也会受到影响。 LCP 和 TBT 在 Google PageSpeed 和 Core Web Vitals 等级上总共占 55% 的权重,因此保持这些指标的健康至关重要。

Lighthouse 评分计算器 - 来源:Lighthouse
灯塔评分计算器 – 来源:灯塔

让我们在 WordPress 网站上测试那些在 PSI(移动)上的评分很差的 WP Rocket 选项。 您将看到 WP Rocket 如何在我们的页面速度优化过程中帮助我们。

在优化我的关键 CSS 之前,我的性能等级仅为 43/100,这让我的移动网站处于红色状态:

我的 WordPress 网站在移动设备上的得分(无 WP Rocket)-来源:PSI
我的 WordPress 网站在移动设备上的得分(无 WP Rocket)– 来源:PSI

我还收到两个警告:“减少未使用的 CSS”和“消除阻塞渲染的资源”。

现在,让我们安装 WP Rocket 并激活“删除未使用的 CSS” 选项。

删除未使用的 CSS 选项 - 来源:WP Rocket
删除未使用的 CSS 选项 – 来源:WP Rocket

现在在移动设备上的性能结果很棒. 只需点击几下,我们就达到了 94/100。 WP Rocket 优化了我的渲染路径并照顾了我的关键 CSS。

WP Rocket 的性能结果
WP Rocket 的性能结果

“消除渲染阻塞资源”和“减少未使用的 CSS”警告现在位于“通过审核”部分。

通过 WP Rocket 的审核 - 来源:PSI
通过 WP Rocket 的审核 – 来源:PSI

就像我一样,您可以使用 WP Rocket 来优化我们关键 CSS 的交付。 这是一个可靠且高效的插件,只需单击几下即可帮助我实现惊人的性能目标。

PSI 的 KPI 和审计部分
(移动的)
没有 WP 火箭 🚀 使用 WP Rocket
总成绩 43/100 94/100
最大的内容绘制 10.2 秒 0.7 秒
总阻塞时间 540 毫秒 0 毫秒
“减少未使用的 CSS” 🔺问题 ✅ 通过审核
“删除渲染阻塞资源” 🔺问题 ✅ 通过审核

包起来

优化您的关键 CSS 似乎令人生畏,但由于 WP Rocket 之类的插件,它不需要以这种方式进行。 我们看到 WP Rocket 帮助消除了与 Google PageSpeed Insights 上的渲染阻止资源相关的红色警告。

你会节省一些宝贵的时间 因为 WP Rocket 会自动应用 80% 的 Web 性能最佳实践——并且 激活后你会看到即时速度提升.

更重要的是,您始终可以信赖我们的 100% 退款保证。 尽管我们认为您永远不会想要一个,但如果您在购买后 14 天内提出要求,我们将很乐意提供退款。


营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts