WP Rocket 3.17：通过自动延迟渲染提高 INP 指标

已发表: 2024-09-26

您是否曾经感觉您的网站响应缓慢，尤其是当您尝试与长博客页面或电子商务产品页面进行交互时？性能优化具有挑战性，在改进与用户体验相关的复杂指标（例如下次绘制交互 (INP)）时更是如此。 INP 是衡量网页响应能力的新核心 Web 重要指标，在提高速度、用户体验和 SEO 方面发挥着关键作用 - 换句话说，您不能忽视它。

如果您一直在努力提高网站的速度和用户体验以获得更好的 INP 等级，您将很高兴了解有关我们新的主要版本及其全新自动化功能的更多信息。向 WP Rocket 3.17 问好！

我们的新主要版本专注于自动优化您的网站在访问者滚动时呈现内容的方式。它对于博客、在线商店和任何有大量内容可供探索的网站特别有用。

我们很高兴推出 WP Rocket 3.17，原因有两个。

首先，新功能将提高 INP 指标和感知速度，尤其是在移动设备上。它还可能对其他关键指标产生积极影响，例如最大内容油漆和第一内容油漆等级。优化与用户体验相关的指标也可以提高转化率，这就是让您的网站更快的最终目标，对吗？

此外，WP Rocket 是第一个对所有网站页面提供如此强大且自动优化的插件。

在我们的博客文章中了解所有内容，或观看视频。

什么是渲染及其对性能的影响

要了解 WP Rocket 3.17 如何提高网站性能，我们先从解释渲染开始。当您的网页加载时，就会出现渲染 - 即浏览器将网站代码转换为用户在屏幕上看到的视觉元素的方式。

浏览器渲染需要几个阶段，从浏览器接收 HTML 文件并创建 DOM 树开始，DOM 树是网页的树结构表示。最后一个阶段是绘画——浏览器将每个元素绘制到屏幕上，用户可以看到完成的网页。

与 Web 性能优化一样，有一个问题。事实上，渲染过程可能是一个性能挑战，因为它要求浏览器同时处理许多任务。这种多任务活动发生在所谓的主线程上，它主要受 JavaScript 文件的影响。

当主线程太忙时，就会导致任务很长。这些耗时的任务就像交通堵塞一样，会减慢页面的响应速度并影响“与下一次绘制的交互”等指标——这是衡量页面对用户交互的响应速度的关键核心 Web 重要指标。

Google 的视频示例显示与 INP 相关的响应能力

渲染和性能

当我们谈论渲染及其对性能的影响时，我们特别指的是该过程的两个部分：渲染和绘画 - 正如您在上一节中看到的那样。这些阶段是浏览器努力在屏幕上显示内容的阶段，也是影响 INP 分数和感知速度的阶段。

在此过程中，有几个变量可能会影响性能。仅举几例：DOM 大小、JavaScript 执行速度和动画。页面上的内容越多，渲染优化的挑战性就越大。

既然您知道渲染对于速度至关重要并且需要改进，那么让我们学习如何使其成为可能。

满足内容可见性 CSS 属性

优化浏览器渲染（进而优化速度和响应能力）的一种有效方法是利用 CSS 内容可见性属性。此属性告诉浏览器不要立即呈现页面的所有内容部分，而是等到用户即将看到它们。

你玩过电子游戏吗？如果是这样，您就知道整个世界并不是一次性加载的。相反，新场景及其背景仅在您前进时显示或渲染。这正是 CSS 属性 content-visibility 允许做的事情。

那么，这有什么帮助呢？通过使用内容可见性，浏览器可以一次性完成更少的工作。它可以专注于当前最重要的事情，而不是尝试立即渲染所有内容。这意味着：

它通知浏览器在需要之前忽略渲染某些元素，因此浏览器需要处理的长任务更少，尤其是在渲染和绘制方面。
页面加载速度更快，因为最明显的部分很快就准备好了。
当用户与其交互时，页面响应速度更快。

因此，您的网站可以提供增强的用户体验。访问者将更快地看到您的内容，并能够在滚动和单击时与页面进行交互。

好消息是内容可见性属性现在受到所有主要浏览器的支持。这意味着这一强大的功能可以为几乎所有用户提高网站的性能，无论他们使用什么浏览器。

通过在 WP Rocket 3.17 中应用内容可见性属性，我们引入了自动延迟渲染功能。继续阅读以了解其含义。

3.17：引入自动延迟渲染

我们的新主要版本使自动延迟渲染成为可能。与往常一样，我们的新版本和增强功能的目标是帮助您以最简单的方式提高网站性能，无论您的技术技能如何，也无论您是否掌握网络性能优化技术。

我们专注于对速度和用户体验产生重大影响的功能，WP Rocket 3.17 也不例外。

首先也是最重要的是，新版本可以显着提高您的 INP 分数，使您的网站对访问者的响应更加灵敏。它还可能会稍微提高您的最大内容绘画和第一内容绘画分数，尽管这更多的是积极的副作用。

新功能可以安全实施，并且永远不会影响您的访客。如果浏览器因为版本较旧而不支持内容可见性属性，则即使激活 WP Rocket 3.17，也不会发生任何情况。

该功能对于您的网站来说风险也很低——它不太可能破坏任何东西。

顺便说一句，我们三年前就考虑过发布这样的功能。当时该功能是基于JavaScript的，需要长期测试来验证对SEO的潜在影响。同时，内容可见性 CSS 属性得到了更多支持，提供了可行且更简单的解决方案。随着 INP 与 Web 性能优化的相关性越来越高，发布此功能变得理所当然。

自动延迟渲染的工作原理

让我们回到视频游戏的类比。

想象一下你正在玩一个游戏。当您向前移动角色时，游戏会在到达新区域之前渲染它们。这正是自动延迟渲染在您的网站上的工作原理。

由于上一版本 WP Rocket 3.16，引入自动延迟渲染成为可能。我们之前的版本引入了 2 个重要的增强功能：

我们默认激活了独立的移动缓存。
我们引入了关键图像（首屏图像）的检测和优化，这要归功于信标收集有关要优化的元素的真实信息。 3.17 功能将扩展信标跟踪的范围，以提供有关布局的准确信息，并使新的优化成为可能。

以下是启用 WP Rocket 3.17 后会发生的情况。

当用户登陆您的页面时，新功能将不允许浏览器立即呈现所有内容。相反，只有当用户接近页面上的该点时，浏览器才会渲染页面上的元素 - 就像游戏仅在您接近它时才加载下一个区域一样。页面越长，延迟渲染的效率就越高。

这就是为什么新版本特别有利于：

包含大量内容的长页面，例如博客文章或产品列表。
包含需要更多时间渲染的复杂元素的页面，例如非复合动画（例如画布动画和视频背景）。

WP Rocket 是第一个在所有页面上准确应用此自动功能的插件。事实上，WP Rocket 3.17 会分析页面的结构并检测可以应用延迟渲染的元素。该插件单独处理每个页面（桌面版和移动版），以确保我们获得准确的元素，而不会错过任何机会。

没有标记选项 - 您无需执行任何操作即可激活它。 WP Rocket 更新到 3.17 后即可使用。

延迟渲染如何改善下一油漆等级的交互

现在让我们看看 WP Rocket 3.17 如何提高您的 INP 等级。

首先，根据 Google 的说法，良好的响应能力意味着您的 INP 分数应低于 200 毫秒。

INP 分数好与差（来源：Google） — INP 分数 – 来源：Google

在我们深入研究我们运行的测试结果之前，还需要强调的是，您的网站可以实现的性能改进取决于其当前的优化级别。如果您的网站已经得到了很好的优化，您可能会看到 INP 等级有细微的提高。然而，如果有改进的空间，您可能会在 INP 分数以及 LCP 和 FCP 分数上体验到更显着的提升。

为了衡量 INP 性能改进，我们建议使用 DebugBear 的 INP 调试器等工具，它可以让您清楚地了解启用 WP Rocket 3.17 及其延迟渲染自动功能之前和之后站点的响应能力。

如果您想知道为什么这次我们不使用基于 Lighthouse 的 PageSpeed Insights 工具，那是因为 INP 是一个字段指标，是根据交互计算的。 Lighthouse 还没有测量它，至少目前是这样。

让我们通过一个真实的示例来向您展示 WP Rocket 3.17 可以带来的潜在增强功能。我们测试了一个电子商务网站，该网站有大量内容可供滚动浏览——多个部分、产品图片和商品列表。出于测试目的，我们还在网站中添加了 JavaScript 工作负载，以保持主线程繁忙，并验证延迟渲染的效率以改善这种情况。

这是我们发现的。

在启用具有自动延迟渲染功能的 WP Rocket 3.17 之前

INP结果是204ms。正如您所看到的，结果凸显了需要改进的地方：