Questo documento illustra le best practice per caricare il tag dello script reCAPTCHA. Queste informazioni sono applicabili sia a reCAPTCHA v2 che a v3.
Caricamento di reCAPTCHA in modo asincrono
Tutte le versioni di reCAPTCHA possono essere caricate in modo asincrono. Caricamento reCAPTCHA in modo asincrono non influisce sulla sua capacità di identificare il traffico sospetto. Scadenza vantaggi in termini di prestazioni degli script asincroni, caricando reCAPTCHA in modo asincrono è generalmente consigliato.
<script async src="https://www.google.com/recaptcha/api.js">
Quando carichi reCAPTCHA in modo asincrono, tieni presente che non è possibile utilizzata fino al termine del caricamento. Ad esempio, il seguente codice probabilmente 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>
In alcune situazioni, la modifica dell'ordine degli script può essere sufficiente per evitare
le condizioni di traffico. In alternativa, puoi impedire le gare inserendo il parametro
successivo allo snippet di codice sulle pagine che caricano reCAPTCHA. Se utilizzi
grecaptcha.ready() per aggregare le chiamate API, aggiungi il seguente snippet di codice per assicurarti
per poter chiamare reCAPTCHA in qualsiasi 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>
In alternativa, i siti che utilizzano l'API v2 possono trovare utile utilizzare
il callback onload; il callback onload viene eseguito al termine di reCAPTCHA
Caricamento in corso. Il callback onload deve essere definito prima di caricare il reCAPTCHA
lo 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 non è possibile caricare reCAPTCHA in modo asincrono, è possibile includere preconnect
sono vivamente consigliati i suggerimenti delle risorse per reCAPTCHA. Questo ridurrà al minimo
durante il quale il download dello script blocca l'analizzatore sintattico.
Utilizzo dei suggerimenti delle risorse
Se includi i seguenti suggerimenti di risorse nella sezione <head> del documento,
ridurre il tempo necessario per distribuire le risorse utilizzate
reCAPTCHA. Il hint della risorsa preconnect indica al browser di stabilire un
connessione precoce con
un'origine di terze parti.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Caricamento lento
In linea di massima, maggiore è il contesto di reCAPTCHA di una pagina, meglio è per stabilire se le azioni degli utenti sono legittime. Questo è in particolare quando si utilizzano versioni di reCAPTCHA che non si basano le sfide più difficili. Pertanto, è necessario attendere di caricare reCAPTCHA fino a quando una specifica azione limitata (ad es. l'invio di un modulo) in genere non è consigliato.