Recaptcha v3页面加载速度问题：如何延迟加载recaptcha__en.js？

问题分析 #

recaptcha__en.js是Google Recaptcha主脚本api.js自动加载的本地化子脚本，重复加载且未使用的核心原因是WP-Forms默认在所有页面加载Recaptcha资源，但多数页面并没有表单，或是多个表单实例触发了多次加载逻辑。

解决方法 #

1. 仅在有表单的页面加载Recaptcha #

最彻底的方式是限制Recaptcha脚本仅在包含WP-Forms表单的页面加载，直接消除无关页面的无效加载。将以下代码添加到主题的functions.php文件：

add_action( 'wp_enqueue_scripts', 'disable_recaptcha_unneeded_pages', 99 );
function disable_recaptcha_unneeded_pages() {
    // 替换为你的表单页面slug/ID数组，比如示例中的"microphones-studio"
    $form_pages = array( 'microphones-studio', 'contact' );
    // 若表单在文章中，可添加is_singular('post')判断
    if ( ! is_page( $form_pages ) ) {
        wp_dequeue_script( 'wpforms-recaptcha-js' );
        wp_deregister_script( 'wpforms-recaptcha-js' );
    }
}

主脚本api.js只会在指定页面加载，子脚本recaptcha__en.js自然不会在无关页面出现，同时解决重复加载和未使用问题。

2. 强制给所有Recaptcha脚本加延迟属性 #

如果必须全站点加载Recaptcha，可通过脚本标签过滤器给所有Recaptcha相关脚本（包括自动加载的recaptcha__en.js）添加defer和async属性：

add_filter( 'script_loader_tag', 'add_defer_to_recaptcha_scripts', 10, 3 );
function add_defer_to_recaptcha_scripts( $tag, $handle, $src ) {
    // 匹配所有Recaptcha相关脚本URL
    if ( str_contains( $src, 'recaptcha' ) ) {
        return str_replace( 'type=\'text/javascript\'', 'type=\'text/javascript\' defer async', $tag );
    }
    return $tag;
}

该代码会自动识别所有包含recaptcha的脚本，给对应的标签添加延迟加载属性，优化页面加载速度。

3. 利用WP-Forms内置优化设置 #

打开WP-Forms的验证码设置页面（WP-Forms > 设置 > 验证码），部分版本的插件提供了仅在包含表单的页面加载Recaptcha的开关选项，开启后无需额外代码即可解决问题。

额外排查：消除多插件冲突 #

若以上方法无效，安装Query Monitor插件查看脚本加载的钩子来源，确认是否有其他主题或插件也在调用Recaptcha资源，找到后禁用该插件的Recaptcha功能即可。

内容的提问来源于stack exchange，提问作者Valenten