本文說明載入 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。