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.
Cómo cargar reCAPTCHA de forma asíncrona
Todas las versiones de reCAPTCHA se pueden cargar de forma asíncrona. Cargando reCAPTCHA de forma asíncrona, no afecta su capacidad para identificar tráfico sospechoso. Venc. los beneficios de rendimiento de las secuencias de comandos asíncronas, cargar reCAPTCHA de forma asíncrona.
<script async src="https://www.google.com/recaptcha/api.js">
Cuando cargues reCAPTCHA de forma asíncrona, ten en cuenta que reCAPTCHA no puede hasta que termine de cargarse. Por ejemplo, es probable que el siguiente código pausa:
<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 la carrera.
condiciones. Como alternativa, puede evitar las condiciones de carrera si incluye el
siguiente fragmento de código en las páginas que cargan reCAPTCHA. Si utilizas
grecaptcha.ready() para unir las llamadas a la API, agrega el siguiente fragmento de código para asegurarte de que
se puede 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 = {
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>
Como alternativa, a los sitios que utilizan la API v2 podría resultarles útil usar
la devolución de llamada onload Se ejecuta la devolución de llamada onload cuando finaliza reCAPTCHA.
cargando. La devolución de llamada onload debe definirse antes de cargar el reCAPTCHA.
secuencia de comandos.
<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 cargar reCAPTCHA de forma asíncrona no es una opción, se incluye preconnect.
se recomienda enfáticamente
las sugerencias de recursos para reCAPTCHA. Esto minimizará el
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 el <head> del documento
el tiempo que lleva entregar los recursos que usan
con reCAPTCHA. La sugerencia del recurso preconnect le indica al navegador que establezca un
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 informada es para determinar si las acciones de los usuarios son legítimas. Este es sobre todo cuando se usan versiones de reCAPTCHA que no dependen del desafíos de aprendizaje automático. Por lo tanto, esperar a que se cargue reCAPTCHA hasta que se produzca una acción restringida específica (por ejemplo, el envío de un formulario), por lo general, no se recomienda.