Ce document décrit les bonnes pratiques à suivre pour charger la balise de script reCAPTCHA. Ces informations s'appliquent à la fois à reCAPTCHA v2 et v3.
Charger reCAPTCHA de manière asynchrone
Toutes les versions du reCAPTCHA peuvent être chargées de manière asynchrone. Chargement de reCAPTCHA... de manière asynchrone n'a aucun impact sur sa capacité à identifier le trafic suspect. Date limite aux avantages des scripts asynchrones en termes de performances, le chargement de reCAPTCHA de manière asynchrone.
<script async src="https://www.google.com/recaptcha/api.js">
Lorsque vous chargez reCAPTCHA de manière asynchrone, gardez à l'esprit que reCAPTCHA ne peut pas être utilisées jusqu'à la fin du chargement. Par exemple, le code suivant devrait probablement casser:
<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>
Dans certains cas, le fait d'ajuster l'ordre des scripts peut suffire à empêcher la concurrence
et conditions d'exploitation. Vous pouvez également empêcher les conditions de concurrence en incluant le paramètre
l'extrait de code suivant sur les pages
qui chargent le service reCAPTCHA. Si vous utilisez
grecaptcha.ready() pour encapsuler les appels d'API, ajoutez l'extrait de code suivant pour vous assurer
que reCAPTCHA peut être appelé à tout moment.
<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>
Les sites qui utilisent l'API v2 peuvent également trouver utile d'utiliser
le rappel onload ; le rappel onload est exécuté lorsque reCAPTCHA a terminé ;
chargement en cours. Vous devez définir le rappel onload avant de charger le reCAPTCHA
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>
Si vous ne pouvez pas charger reCAPTCHA de manière asynchrone, y compris preconnect
Nous vous recommandons vivement d'utiliser les indices de ressources pour reCAPTCHA. Cela réduira
et la durée de téléchargement du script bloque l'analyseur.
Utiliser les optimisations de ressources
L'inclusion des optimisations de ressource suivantes dans le champ <head> du document
réduire le temps nécessaire à la livraison des ressources utilisées par
reCAPTCHA. L'indice de ressource preconnect demande au navigateur d'établir une
une connexion précoce à une origine tierce.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Chargement différé
En règle générale, plus le reCAPTCHA dispose de contexte sur une page, mieux informée afin de déterminer si les actions de l’utilisateur sont légitimes. C'est Cela est particulièrement vrai lorsque vous utilisez des versions de reCAPTCHA qui ne reposent pas sur l'analyse les défis à relever. Attendre le chargement de reCAPTCHA jusqu'à ce qu'une action restreinte spécifique (par exemple, l'envoi d'un formulaire) n'est généralement pas recommandée.