Ce document traite des bonnes pratiques de chargement du tag de script reCAPTCHA. Ces informations s'appliquent à reCAPTCHA v2 et v3.
Charger reCAPTCHA de manière asynchrone
Toutes les versions du reCAPTCHA peuvent être chargées de manière asynchrone. Le chargement asynchrone de reCAPTCHA n'a aucune incidence sur sa capacité à identifier le trafic suspect. En raison des avantages offerts par les scripts asynchrones pour les performances, il est généralement recommandé de charger 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é tant que le chargement n'est pas terminé. Par exemple, le code suivant risque de ne pas fonctionner:
<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, l'ajustement de l'ordre des scripts peut suffire pour éviter les conditions de concurrence. Vous pouvez également empêcher les conditions de concurrence en incluant l'extrait de code suivant sur les pages qui chargent reCAPTCHA. Si vous utilisez grecaptcha.ready() pour encapsuler les appels d'API, ajoutez l'extrait de code suivant pour garantir 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 = {};
}
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>
Les sites utilisant la version 2 de l'API peuvent également trouver utile d'utiliser le rappel onload. Le rappel onload est exécuté lorsque le chargement de reCAPTCHA est terminé. Le rappel onload doit être défini avant le chargement du script 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 le chargement reCAPTCHA n'est pas une option possible, nous vous recommandons vivement d'inclure des indices de ressources preconnect pour reCAPTCHA. Cela permettra de réduire la durée pendant laquelle le téléchargement du script bloque l'analyseur.
Utiliser les optimisations de ressources
Si vous incluez les conseils suivants au sujet des ressources dans la section <head> du document, vous réduirez le temps nécessaire à la livraison des ressources utilisées par reCAPTCHA. L'indicateur de ressource preconnect indique au navigateur d'établir une connexion anticipée avec une origine tierce.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Chargement différé
De manière générale, plus le reCAPTCHA contient de données contextuelles sur une page, plus il est pertinent de déterminer si les actions de l'utilisateur sont légitimes. Cela est particulièrement vrai lorsque vous utilisez des versions de reCAPTCHA qui ne reposent pas sur les questions d'authentification des utilisateurs. Ainsi, il n'est généralement pas recommandé d'attendre de charger reCAPTCHA tant qu'une action spécifique spécifique n'a pas été effectuée (l'envoi d'un formulaire, par exemple).