Perfmatters – 如何在 WordPress 中延迟 JavaScript 直到用户交互

虽然延迟 JavaScript 将脚本推到页面加载的底部，但您可以根据用户交互延迟 JavaScript。

这可能是一个很好的方式，可以显著加快谷歌灯塔页面的绘制速度，而不需要立即绘制。特别重的第三方脚本，如谷歌 Adsense、谷歌分析、转换像素（FB、谷歌广告）等。

延迟 JavaScript 对最大内容绘制（LCP）有很大影响，可以帮助您修复Google PageSpeed Insights 中的“减少未使用的 JavaScript”警告。它将减少总阻塞时间（TBT），并帮助修复“减少第三方代码的影响”和“减少 JavaScript执行时间”警告。

它还适用于cart片段，这是一个常见的 WooCommerce 性能问题，因为 AJAX 请求无法缓存。

您还可以将其与我们的本地分析功能和即时页面一起使用。

延迟内联 JavaScript

要延迟内联 JavaScript，请输入<script type=”text/javascript”> </script>标记中的部分字符串。

例如，假设我们有这个内联 JavaScript。

<script type=”text/javascript”>var lazyLoadInstance=new LazyLoad({elements_selector:”[loading=lazy],.perfmatters-lazy”,thresholds:”200% 0px”});</script>

 

我们可以将 lazyLoadInstance 添加到“延迟 JavaScript”框中，它将延迟它。

您可以选择脚本标记中的任何字符串，只要确保它是唯一的即可。
对于某些 JavaScript，它们可能有一个源文件和一个内联组件。

在这种情况下，您需要延迟这两个时间，以使其正常工作。

可以延迟的脚本示例

下面是我们在 WordPress 网站上延迟使用的常见脚本的一些示例。

• Google Analytics
• Google Tag Manager
• Google AdSense
• Facebook Pixel

延迟 Google Analytics

要延迟 Google 分析，请在“延迟 JavaScript”框中添加以下内容。

ga( ‘
ga(‘
google-analytics.com/analytics.js

如果您使用我们的本地分析，您还可以延迟脚本。

本地 Perfmatters analytics.js

以延迟本地性能 analytics.js 脚本，将以下内容添加到“延迟 JavaScript”框中。

analytics.js

本地 Perfmatters gtag.js v4

以延迟gtag的本地性能 gtag.js v4 脚本，将以下内容添加到“延迟 JavaScript”框中。

gtagv4.js

本地 Perfmatters 最小化

要延迟本地 Perfmatters analytics-minimal.js 脚本，请在 “延迟 JavaScript” 框中添加以下内容。

analytics-minimal.js

延迟 Google Tag Manager

要延迟 Google 标记管理器，请在“延迟 JavaScript”框中添加以下内容。

/gtm.js
/gtag/js
gtag(
/gtm-

Google Adsense

要延迟 Google AdSense，请在“延迟 JavaScript”框中添加以下内容。

adsbygoogle.js

如果您使用的是像 Ad Inserter 这样的插件以及HTML插入块，那么您需要延迟脚本和内联部分。

adsbygoogle.js ai_insert_code

Delay Facebook Pixel 

要延迟 Facebook 像素，请在“延迟 JavaScript”框中添加以下内容。

fbevents.js fbq( /busting/facebook-tracking/

常见的 JS 延迟排除

在 Perfmatters 中使用“延迟所有脚本”选项时，可能需要添加一两个排除项。该数字通常基于站点的复杂性。例如，与使用 GeneratePress 的轻量级网站相比，使用 Elementor 等重型页面生成器的网站很可能需要更多的排除。
下面是一些常见的例外情况。随着功能的改进，我们将确保不断添加到此列表中。

Astra mobile menu

jquery.min.js
astra

Avada sticky header

avada-header.js


modernizr.js


jquery.easing.js


avadaHeaderVars

Divi mobile menu

jquery.min.js


/themes/Divi/js/scripts.min.js


et_pb_custom

Elementor mobile menu

这可能会根据您在 Elementor 中使用的元素和模板略有不同。

jquery.min.js


jquery.smartmenus.min.js


webpack.runtime.min.js


webpack-pro.runtime.min.js


elements-handlers.min.js


frontend.min.js


frontend-modules.min.js


elements-handlers.min.js


elementorFrontendConfig


ElementorProFrontendConfig


imagesloaded.min.js

Elementor search

webpack-pro.runtime.min.js


webpack.runtime.min.js


elements-handlers.min.js


jquery.smartmenus.min.js

GeneratePress mobile menu

/generatepress/assets/js/menu.min.js


generatepressMenu

GeneratePress mobile popup menu

/generatepress/assets/js/menu.min.js


generatepressMenu


offside.min.js


offSide

OceanWP mobile menu

drop-down-mobile-menu.min.js


oceanwpLocalize

WooCommerce single product gallery

jquery.min.js

flexslider


single-product.min.js


slick


functions.min.js


waypoint

如何筛选延迟脚本

您可以使用 perfmatters_delayed_scripts 过滤器来操作延迟的脚本。

例如，您可以排除桌面设备上的脚本延迟。

add_filter('perfmatters_delayed_scripts', function($scripts) {
if(($key = array_search('name_of_your_script', $scripts)) !== false) {
if(!wp_is_mobile()) {
unset($scripts[$key]);
}
}
return $scripts;
});

您可以使用 perfmatters_delay_js 过滤器完全打开或关闭延迟脚本。

例如，您可以仅在页面上关闭延迟。

add_filter('perfmatters_delay_js', function($delay) {
if(is_singular('page')) {
return false;
}
return $delay;
});

延迟与延缓

延迟将 JavaScript 推到页面加载的底部。这有助于解决渲染阻塞问题。但是，在呈现页面时仍然必须加载JavaScript。换句话说，当涉及到 JavaScript 执行时间、传输大小等时，它仍然会对您的核心Web重要分数产生影响。
延迟将 JavaScript 从瀑布/页面加载中完全移除。如果运行速度测试，这些脚本似乎不存在。确实如此，但它们不是加载页面加载，而是加载用户交互（移动鼠标、滚动、定时器等）。这有助于提高您的核心Web重要分数，并改善第一个内容绘制（FCP）。
关于兼容性，延迟是一种已经存在很长时间的做法。延迟一切通常是安全的，Perfmatters 中的延迟 JavaScript 特性就是这样做的。然后我们有一个排除框，用于由于加载顺序可能需要排除脚本的情况。
延迟有点棘手，因为您不能只是延迟每个 JavaScript 文件。由于在交互中加载，它只能在特定的脚本上工作。这可能是一个小小的尝试和错误，但延迟的好处是它非常强大！它对您使用它的每个脚本都有巨大的影响。
好消息是，您可以同时使用延迟和延迟。如果两者都应用于同一个 JavaScript 文件，则延迟将始终优先，而延迟本质上是一种回退。如果您延迟了所有 JavaScript，延迟仍然很有用，因为您可能有延迟排除，然后使用延迟。