本文件說明載入 reCAPTCHA 指令碼標記的最佳做法。 這項資訊適用於 reCAPTCHA v2 和 v3。
以非同步方式載入 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 回呼。必須先定義 onload 回呼，再載入 reCAPTCHA
指令碼
<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 發生 (例如提交表單) 時，我們通常不建議這麼做。