Este documento discute as práticas recomendadas para carregar a tag de script reCAPTCHA. Estas informações são aplicáveis ao 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. Carregar o reCAPTCHA de forma assíncrona não afeta a capacidade de identificar tráfego suspeito. Devido aos benefícios de desempenho dos scripts assíncronos, o carregamento do reCAPTCHA de forma assíncrona é geralmente recomendado.
<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 usado até terminar de carregar. Por exemplo, o código a seguir provavelmente seria corrompido:
<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, o ajuste da ordem do script pode ser suficiente para evitar disputas. Como alternativa, você pode evitar disputas ao incluir o
seguinte snippet de código em páginas que carregam reCAPTCHA. Se você estiver usando
grecaptcha.ready() para encapsular chamadas de API, adicione o seguinte snippet de código para garantir
que o reCAPTCHA possa 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 termina de carregar. O callback onload precisa ser definido antes do carregamento do script 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>
Se o carregamento do reCAPTCHA de forma assíncrona não for uma opção, é recomendável incluir
dicas de recursos preconnect para o reCAPTCHA. Isso minimiza o tempo que o
script de download bloqueia o analisador.
Como usar dicas de recursos
Incluir as dicas de recurso a seguir no <head> do documento reduzirá o tempo necessário para enviar os recursos usados pelo reCAPTCHA. A dica de recurso preconnect instrui o navegador a estabelecer uma
conexão antecipada com 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, mais bem informado ele será para determinar se as ações do usuário são legítimas. Isso é especialmente verdadeiro ao usar versões do reCAPTCHA que não dependem de desafios do usuário. Portanto, não é recomendável aguardar para carregar o reCAPTCHA até que ocorra uma ação restrita específica (por exemplo, o envio do formulário).