Perfmatters - 如何在 WordPress 中延迟 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，请在“延迟 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 等重型页面生成器的网站很可能需要更多的排除。
下面是一些常见的例外情况。随着功能的改进，我们将确保不断添加到此列表中。

jquery.min.js astra

avada-header.js

modernizr.js

jquery.easing.js

avadaHeaderVars

jquery.min.js

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

et_pb_custom

这可能会根据您在 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/assets/js/menu.min.js

generatepressMenu

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

generatepressMenu

offside.min.js

offSide

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，延迟仍然很有用，因为您可能有延迟排除，然后使用延迟。