Este documento discute as práticas recomendadas para carregar a tag de script reCAPTCHA. Essas informações são aplicáveis aos reCAPTCHA v2 e v3.
Como carregar o reCAPTCHA de forma assíncrona
Todas as versões do reCAPTCHA podem ser carregadas de forma assíncrona. Carregando reCAPTCHA de forma assíncrona não afeta a capacidade de identificar tráfego suspeito. Valor devido benefícios de desempenho dos scripts assíncronos, carregar reCAPTCHA de forma assíncrona, em geral.
<script async src="https://www.google.com/recaptcha/api.js">
Ao carregar o reCAPTCHA de forma assíncrona, lembre-se de que ele não pode ser usada até que o carregamento seja concluído. Por exemplo, o código a seguir provavelmente intervalo:
<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>
Em algumas situações, ajustar a ordem do script pode ser suficiente para impedir a disputa
pelas condições Como alternativa, você pode evitar disputas incluindo o
snippet de código a seguir nas páginas que carregam o reCAPTCHA. Se você estiver usando
grecaptcha.ready() para unir chamadas de API, adicione o snippet de código abaixo para garantir
que o reCAPTCHA pode ser chamado a qualquer momento.
<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>
Como alternativa, os sites que usam a API v2 podem achar útil usar
o callback onload; o callback onload é executado quando o reCAPTCHA é concluído.
carregando. O callback onload precisa ser definido antes do carregamento do reCAPTCHA.
script.
<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>
Se o carregamento assíncrono do reCAPTCHA não for uma opção, incluindo preconnect
dicas de recursos para reCAPTCHA é altamente recomendado. Isso minimizará a
o download do script bloqueia o analisador.
Como usar dicas de recursos
Incluir as seguintes dicas de recursos no <head> do documento vai
reduzir o tempo necessário para entregar os recursos usados pelos
reCAPTCHA. A dica de recurso preconnect instrui o navegador a estabelecer uma
conexão antecipada com uma origem de terceiros.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Carregamento lento
De modo geral, quanto mais contexto o reCAPTCHA tiver sobre uma página, melhor informado é determinar se as ações do usuário são legítimas. Isso é especialmente ao usar versões do reCAPTCHA que não dependem das solicitações e superar desafios comerciais. Assim, aguardar para carregar o reCAPTCHA até que uma ação restrita específica ocorre (por exemplo, envio de formulário) geralmente não é recomendada.