En este documento, se analizan las prácticas recomendadas para cargar la etiqueta de secuencia de comandos de reCAPTCHA. Esta información se aplica a reCAPTCHA v2 y v3.
Carga reCAPTCHA de forma asíncrona
Todas las versiones de reCAPTCHA se pueden cargar de manera asíncrona. La carga de reCAPTCHA de forma asíncrona no afecta su capacidad para identificar el tráfico sospechoso. Debido a los beneficios de rendimiento de las secuencias de comandos asíncronas, por lo general, se recomienda cargar reCAPTCHA de forma asíncrona.
<script async src="https://www.google.com/recaptcha/api.js">
Cuando cargues reCAPTCHA de manera asíncrona, ten en cuenta que este servicio no se puede usar hasta que termine de cargarse. Por ejemplo, el siguiente código podría fallar:
<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>
En algunas situaciones, ajustar el orden de las secuencias de comandos puede ser suficiente para evitar las condiciones de carrera. Como alternativa, puedes evitar las condiciones de carrera si incluyes el siguiente fragmento de código en las páginas que cargan reCAPTCHA. Si usas grecaptcha.ready() para unir las llamadas a la API, agrega el siguiente fragmento de código a fin de asegurarte de que se pueda llamar a reCAPTCHA en cualquier 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, los sitios que usan la API v2 pueden resultarte útiles usar la devolución de llamada onload; la devolución de llamada onload se ejecuta cuando reCAPTCHA termina de cargarse. Se debe definir la devolución de llamada onload antes de cargar la secuencia de comandos de 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>
Si no es posible cargar reCAPTCHA de forma asíncrona, se recomienda incluir sugerencias de recursos
preconnect para reCAPTCHA. Esto minimizará la cantidad de tiempo que la descarga de la secuencia de comandos bloquea el analizador.
Uso de sugerencias de recursos
Incluir las siguientes sugerencias de recursos en <head> del documento reducirá la cantidad de tiempo que lleva entregar los recursos que utiliza reCAPTCHA. La sugerencia de recursos preconnect le indica al navegador que establezca una conexión temprana con un origen de terceros.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Carga diferida
En términos generales, cuanto más contexto tenga reCAPTCHA sobre una página, mejor informado estará el usuario para determinar si las acciones del usuario son legítimas. Esto se aplica en particular cuando se usan versiones de reCAPTCHA que no dependen de los desafíos del usuario. Por lo tanto, no se recomienda esperar hasta que se realice una acción restringida específica (por ejemplo, el envío de un formulario) para cargar reCAPTCHA.