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

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

经过数月的努力,我们 2021 年的第一个主要版本终于发布了。 这简直是​​惊人的。

向 WP Rocket 3.9 问好!

这个新版本带来了一系列新变化,包括您的 WordPress 网站绝对喜欢的功能和增强功能:延迟 JavaScript 执行的新方法和删除未使用的 CSS(仍处于测试阶段)。

无论您已经对这些改进感到欣喜若狂,还是不确定它们将如何影响您的网站,这篇文章都适合您。

事不宜迟,让我们开始吧。

WP Rocket 3.9 有什么新功能?

在 3.9 版的开发过程中,我们的主要重点是帮助我们的用户为 Google 2021 年的重大更新准备他们的 WordPress 网站。

这就是为什么我们对插件所做的主要更改应该会导致您的 Core Web Vitals 指标和 PageSpeed Insights 分数的改进,以及更好的加载时间和网站的感知速度。

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

以下是此版本中最相关的增强功能:

  • Delaying JS execution 2.0(我们的 Delay JS 功能的新版本)
  • 删除未使用的 CSS(新的测试版功能)
  • 删除特定加载项
  • 更改 WordPress 要求

有关改进的完整列表,请查看我们的更新日志。

如果视频比文字更适合您,这里有一些主要功能的介绍:

想知道更多? 继续阅读。

延迟 JavaScript 执行

你有没有感觉 似曾相识? 你是对的。 嗯,有点。

延迟 JavaScript 执行是我们去年发布 WP Rocket 3.7 时发布的主要功能之一。

但事情是这样的:当时,延迟 JavaScript 执行是一个选择加入的功能,因此由您来告诉 WP Rocket 延迟哪些 JavaScript 文件。 使用这个 2.0 版本,您现在可以轻松延迟所有 JavaScript 文件。

不确定这对您意味着什么? 我们快到了。

此功能背后的想法是,并非所有文件都与页面的初始呈现相关,延迟它们可以改善加载时间和 PageSpeed Score。 具体来说,Delay JavaScript Execution 通过将 JavaScript 文件的加载延迟到用户交互来提高性能。

以退出意图弹出窗口为例,它仅在用户想要离开页面时才相关,因此您实际上不需要立即加载其脚本。 当您延迟这些脚本并只加载必要的脚本时,即初始页面渲染所需的脚本,加载时间将明显加快。

到目前为止,我们要求您决定延迟哪些脚本。 虽然这是最安全的选择,但由于多种原因,它不一定是最有效的选择。

首先,它需要你做很多工作。 如果编码不是您的强项,手动添加文件可能会很麻烦。 更不用说随着时间的推移必须维护脚本列表从长远来看似乎不可行。 总的来说,这对我们的用户来说并不是最好的体验。

其次,该选项在满足 Core Web Vitals 要求方面也不是最佳选择。 使用新的 Core Web Vitals 指标,目标确实是提供最佳用户体验,并为此尽快提供首屏内容。 确保延迟所有不必要的文件比以往任何时候都重要。

考虑到这一点,我们决定重新审视我们延迟 JS 文件执行的方式。 那么,现在发生了什么?

我们现在的做法是延迟所有 JavaScript 文件并仅在用户需要它们时才加载它们,即当检测到用户交互(例如,滚动、单击按钮)时。 想想图像延迟加载但应用于 JS!

让我们看一个例子来更好地理解这一点。

以我们的主页。

WP火箭主页
我们的主页

如果向下滚动,您会遇到动画块。 因为您不会在首屏看到它们,所以我们不需要立即加载这些脚本:它们可以延迟到您滚动。 同时,您真正需要的内容以超快的方式显示在首屏。

但是延迟所有 JavaScript 文件安全吗? 一般来说,是的。 事实是,JavaScript 主要用于非关键功能。 因此,可以安全地延迟这些文件以提高网站性能……但有一些例外,例如滑块! 我们的建议是避免任何故障? 简单地不要在首屏使用动画内容。 当然,滑块可能看起来很漂亮,但它们会显着压低您的页面,而不会增加太多价值。 事实上,它们会对转化率和 SEO 产生负面影响。 对于性能更好的网站,最好完全放弃此类内容。 一个快速的网站总是比带有滑块的网站更适合转换!

您可以通过此功能实现什么?

延迟 JavaScript 将提高您的 PageSpeed 分数和初始加载时间。

更具体地说,延迟 JavaScript 文件应该对两个核心 Web Vitals 指标产生直接影响:最大内容绘制(LCP – 加载性能)和首次输入延迟(FID – 交互性)。 让我们看看如何。

首先,重要的是要了解 JavaScript 文件如果没有 defer 或 async 属性,则默认情况下是阻止渲染的资源。 这意味着浏览器必须在呈现页面之前读取所有脚本。 您拥有的脚本越多,加载内容所需的时间就越多。 JavaScript 文件会影响加载时间,从而影响 LCP 性能。

为了解决糟糕的 LCP 等级,谷歌特别建议在其 PageSpeed 报告中“消除渲染阻塞资源”。 这包括未显示在首屏内容中的 JS 文件。

通过延迟这些 JavaScript 文件,直到第一次用户交互才会加载它们。 如果没有用户交互,它们根本不会被加载。 这意味着 JavaScript 文件不会被 Lighthouse 检测到,也不会列在“减少未使用的 Javascript”建议(以前称为“删除未使用的 Javascript”)中。 这是一个 PSI 建议解决了!

减少未使用的 JavaScript PageSpeed 建议
页面速度推荐

其次,值得注意的是 JavaScript 执行会影响用户交互性。 当浏览器忙于处理 JavaScript 文件时,它无法处理其他请求,页面也无法正确响应用户交互。 因此,FID 性能将受到影响。

通过延迟 JavaScript 执行,您可以优化 JavaScript 资源并延迟这些文件,以便在用户交互之前不会加载它们。 这样做,您将解决“减少 JavaScript 执行时间”的建议并提高您的 FID 等级。

JavaScript 执行时间 Page Speed 推荐
页面速度推荐

你想要更多的数字吗? 让我们看看新版本的 Delay JavaScript 功能在实践中意味着什么。

在启用延迟 JavaScript 执行选项之前,我们在此网站上运行了一些 PageSpeed 测试。

没有缓存的 PageSpeed 结果

一旦 WP Rocket 开始延迟 JavaScript 执行,这些就是我们的结果:

带缓存的 PageSpeed 结果

相当令人印象深刻,对吧? 让我们看看如何获​​得类似的结果!

它是如何工作的?

您将在文件优化选项卡中找到此功能。 当您启用此选项时,它将默认应用于所有 JavaScript 文件。 文本区域将允许您添加不想延迟的 JavaScript 文件。

延迟 JavaScript 执行功能

如果您已经是 WP Rocket 用户并开启了延迟 JavaScript 选项的第一个版本,默认情况下将启用此功能。 对于没有第一版延迟 JavaScript 选项的新用户和现有用户,此功能需要手动选择。
在所有情况下,排除列表都将留空。 这意味着默认情况下所有 JavaScript 文件都将被延迟,由您决定是否需要排除任何文件。

WordPress花园建议你也读一下这篇文章  WordPress网站加速教程:为什么不应该在 WordPress 上使用滑块(以及其他性能不佳的做法)

例如,您可能会注意到,在使用此功能时,某些元素需要一些时间或用户交互才能出现。 您可以通过将这些特定元素添加到排除的 JavaScript 文件文本区域来防止这种情况发生(在我们的文档中有关要排除哪些文件的更多信息)。 因此,您可以完全控制要延迟的文件和您的网络性能。

现在,在您在您的网站上尝试该功能之前(并对其令人难以置信的结果感到惊讶),我们只想解决房间里的大象问题。

有些人认为这种延迟 JS“黑帽 SEO”的方式的唯一目的是人为地提高 PageSpeed Insights 分数。 虽然这项新功能在处理 PageSpeed 建议和改进指标方面效果很好,但它的作用远不止于此。

首先,延迟加载不重要或不重要的第三方资源已经是谷歌推荐的。 当我们延迟 JavaScript 文件时,我们本质上是 优先考虑对用户有用的关键内容 (HTML 和 CSS)。 许多 JavaScript 资源确实不是渲染页面所必需的,但是因为它们在代码中,它们会无缘无故地影响加载时间和交互。 延迟它们的执行只是管理这些不必要的脚本以缩短加载时间并创造更好的用户体验的一种方式。

回到 PageSpeed Insights 分数。 因为这些 JavaScript 文件会延迟到用户交互之前,所以我们之前说过它们不会被 Lighthouse 检测到,也不会列在“删除未使用的 JavaScript 文件”建议中。 这是作弊吗? 如果您考虑以下几点,则并非如此:

  • PageSpeed Insights 依靠 Lighthouse 指标来评估性能得分。 它不关心 JavaScript 文件的数量,只要它们在页面初始呈现后加载即可。 换句话说,对 PageSpeed Insights 分数的影响在于脚本完全延迟的事实 – 因为非必要 -。 如果在页面加载时有任何用户交互,JavaScript 执行延迟的影响将降低,因为脚本将加载和执行。
  • 启用此选项将使资源在脚本执行时在一定程度上非渲染阻塞和控制。 因此,它将有助于隐藏“减少未使用的 JavaScript”建议(以前称为“删除未使用的 JavaScript”)并减少交互时间。
  • SEO 不会考虑此 PageSpeed Insights 分数。 Google 将依赖由 CrUX 衡量的 Core Web Vitals。 这些指标是通过 Real User Monitoring 衡量的,不会受到任何欺骗 PageSpeed Insights 分数的解决方法的影响。 另一方面,Google 推荐的延迟 JS 文件将对用户数据产生积极影响,从而对 Core Web Vitals 产生积极影响。

通过我们的文档了解有关此增强功能的更多信息。

删除(或减少)未使用的 CSS(测试版)

上次您优化网站以加快加载速度时,您很有可能在 Google PageSpeed Insights 报告的“机会”部分遇到了这个特殊的红色警告。

页面速度推荐
页面速度推荐

Google 所做的是扫描您网站的所有样式表,如果发现任何 CSS 文件的未使用代码超过 2kb,它将显示此建议。 如果您是这种情况,无需惊慌,我们已为您提供此 Beta 版功能。

那么,我们如何让 Google 满意并遵守该建议?

要回答这个问题,让我们先退一步了解什么是未使用的 CSS。

未使用的 CSS 只是未在您的网页上使用的代码。 换句话说,它只会给您的网站增加无谓的负担,增加页面的大小并导致网站变慢。 现在,你不会想要那样的,是吗?

让我们举个例子。

当您在 WordPress 网站上安装预先构建的主题时,代码包含您的主题可能需要的所有内容,从小部件到字体和背景颜色以及介于两者之间的所有内容。 CSS 是用于设置 Web 内容样式的代码。

但是,您实际上并未在网站上使用所有这些元素。 您可能决定根本不需要网站上的“最新帖子”小部件,或者您可能只希望它仅显示在主页上而不显示在任何其他页面上。

尽管如此,包含此块代码的样式表仍会从每个页面调用并加载到整个网站,即使它没有被使用。 有点浪费,…

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

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