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テーマの変更に関するチュートリアルをご覧ください。