このドキュメントでは、reCAPTCHA スクリプトタグを読み込むためのベスト プラクティスについて説明します。この情報は、reCAPTCHA v2 と v3 の両方に適用されます。
reCAPTCHA の非同期読み込み
reCAPTCHA の全バージョンは非同期で読み込むことができます。reCAPTCHA を非同期で読み込んでも、不審なトラフィックを識別する機能には影響しません。非同期スクリプトのパフォーマンス上のメリットから、reCAPTCHA を非同期で読み込むことをおすすめします。
<script async src="https://www.google.com/recaptcha/api.js">
reCAPTCHA を非同期で読み込む場合は、読み込みが完了するまで reCAPTCHA を使用できないことに注意してください。たとえば、次のコードは破損する可能性があります。
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// If reCAPTCHA is still loading, grecaptcha will be undefined.
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
場合によっては、競合状態を防ぐためにスクリプトの順序を調整するだけで十分です。または、reCAPTCHA を読み込むページに次のコード スニペットを含めることで、競合状態を防ぐことができます。grecaptcha.ready() を使用して API 呼び出しをラップする場合は、次のコード スニペットを追加して、reCAPTCHA はいつでも呼び出せるようにします。
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// How this code snippet works:
// This logic overwrites the default behavior of `grecaptcha.ready()` to
// ensure that it can be safely called at any time. When `grecaptcha.ready()`
// is called before reCAPTCHA is loaded, the callback function that is passed
// by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
// loaded.
if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
v2 API を使用するサイトでは、onload コールバックを使用すると便利です。reCAPTCHA の読み込みが完了すると onload コールバックが実行されます。reCAPTCHA スクリプトを読み込む前に、onload コールバックを定義する必要があります。
<script>
const onloadCallback = function() {
console.log("reCAPTCHA has loaded!");
grecaptcha.reset();
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>
reCAPTCHA を非同期で読み込むことができない場合は、reCAPTCHA に preconnect リソースヒントを含めることを強くおすすめします。これにより、スクリプトのダウンロードによってパーサーがブロックされる時間が最小限に抑えられます。
リソースヒントの使用
ドキュメントの <head> に次のリソースヒントを含めると、reCAPTCHA で使用されるリソースの配信にかかる時間が短縮されます。preconnect リソースヒントは、サードパーティのオリジンとの早期接続を確立するようにブラウザに指示します。
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
遅延読み込み
一般的に、reCAPTCHA に関するページのコンテキストが多ければ多いほど、ユーザー アクションが正規のものであるかどうかを判断する材料となります。これは、ユーザーチャレンジに依存しないバージョンの reCAPTCHA を使用する場合に特に当てはまります。したがって、特定の制限されたアクション（フォームの送信など）が発生するまで reCAPTCHA の読み込みを待つことは、通常は推奨されません。