En este documento, se analizan las prácticas recomendadas para cargar la etiqueta de la 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 el 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 utilizado hasta que haya terminado 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, puedes incluir el siguiente fragmento de código en las páginas que cargan reCAPTCHA para evitar las condiciones de carrera. Si usas
grecaptcha.ready() para unir llamadas a la API, agrega el siguiente fragmento de código para 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, 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 se debe definir 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 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 de recursos preconnect le indica al navegador que establezca una conexión temprana con un origen externo.
<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 será la información para determinar si las acciones del usuario 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.