reCAPTCHAスクリプトを遅延させる方法

reCAPTCHAの読み込みを遅延させることで、ページの読み込み速度を向上させますか？ reCAPTCHAスクリプトをページのコンテンツ読み込み後に遅延させることで、初期ページの速度とユーザーエクスペリエンスを向上させることができます。このアプローチにより、重要なコンテンツがすぐに表示され、セキュリティ機能がバックグラウンドでシームレスに読み込まれます。

このガイドでは、パフォーマンス向上のためにreCAPTCHAの読み込みを遅延させる方法を説明します。

スクリプト遅延の理解

reCAPTCHAが通常どおり読み込まれると、他のリソースの読み込みが一時的に停止する可能性があります。スクリプトを遅延させることで、テキストや画像などのページの重要なコンテンツを最初に読み込むことができます。これにより、reCAPTCHAのセキュリティ上のメリットを維持しながら、ユーザーにとってよりスムーズなエクスペリエンスが生まれます。

遅延コードの追加

reCAPTCHAの読み込みを遅延させるには、このコードスニペットをサイトに追加してください。カスタムコードの追加にヘルプが必要な場合は、コードスニペットの追加に関するチュートリアルを確認してください。

このコードは、reCAPTCHAスクリプトを識別し、defer属性とasync属性の両方を追加することで機能します。これらの属性はブラウザに次のように指示します。

• スクリプトを非同期で読み込み、他のリソースをブロックしない
• ページが読み込みを完了した後にのみスクリプトを実行する

hCAPTCHAでの使用

reCAPTCHAの代わりにhCAPTCHAを使用している場合は、この代替バージョンを使用してください。

function wpf_hcaptcha_add_async_defer( $tag, $handle ) {
    if ( strpos( $tag, 'hcaptcha.com/1/api.js?onload=wpformsRecaptchaLoad' ) !== false ) {
        $tag = str_replace( ' src', ' defer async="async" src', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'wpf_hcaptcha_add_async_defer', 99, 2 );

これで、reCAPTCHA JavaScriptを遅延させるために必要なすべてが揃いました。次に、reCAPTCHAのテーマも変更しますか？ 詳細については、CAPTCHAテーマの変更に関するチュートリアルを確認してください。

参照フィルター

script_loader_tag