本文件說明載入 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 = {
ready: function(cb) {
// 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);
}
};
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
或者，使用第 2 版 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，包括 preconnect
強烈建議您為 reCAPTCHA 提供資源提示。這可將
指令碼下載封鎖剖析器的時間長度。
使用資源提示
在文件的 <head> 中加入下列資源提示，將會
縮短提供所用資源所需的時間
reCAPTCHA。preconnect 資源提示會指示瀏覽器建立
及早與第三方來源產生連結
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
延遲載入
一般來說，reCAPTCHA 能針對網頁提供越多背景資訊，結果越理想。 判斷使用者行為是否合理。這是 使用不依賴使用者的 reCAPTCHA 版本時更是如此 可能會遇到難題因此，等到特定受限動作再載入 reCAPTCHA 發生 (例如提交表單) 時，我們通常不建議這麼做。