In diesem Dokument werden Best Practices für das Laden des reCAPTCHA-Script-Tags beschrieben. Diese Informationen gelten sowohl für reCAPTCHA v2 als auch für reCAPTCHA v3.
reCAPTCHA asynchron laden
Alle reCAPTCHA-Versionen können asynchron geladen werden. reCAPTCHA wird geladen asynchron keine Auswirkungen auf ihre Fähigkeit, verdächtigen Traffic zu identifizieren. Aufgrund der Leistungsvorteile von asynchronen Scripts wird das asynchrone Laden von reCAPTCHA im Allgemeinen empfohlen.
<script async src="https://www.google.com/recaptcha/api.js">
Beachten Sie beim asynchronen Laden von reCAPTCHA, dass reCAPTCHA nicht mit bis der Ladevorgang abgeschlossen ist. Der folgende Code würde beispielsweise Pause:
<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 einigen Fällen reicht es aus, die Skriptreihenfolge anzupassen, um Race-Bedingungen zu vermeiden. Alternativ können Sie Race-Bedingungen verhindern, indem Sie das folgende Code-Snippet auf Seiten einfügen, auf denen reCAPTCHA geladen wird. Wenn Sie
grecaptcha.ready() zum Umschließen von API-Aufrufen. Fügen Sie das folgende Code-Snippet hinzu,
damit reCAPTCHA jederzeit aufgerufen werden kann.
<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>
Alternativ können Websites, die Version 2 des APIs nutzen, auch die Verwendung der
den onload-Callback Der onload-Callback wird ausgeführt, wenn reCAPTCHA abgeschlossen ist
wird geladen. Der onload-Callback sollte definiert werden, bevor das reCAPTCHA-Script geladen wird.
<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>
Wenn das asynchrone Laden von reCAPTCHA nicht möglich ist, wird dringend empfohlen, preconnect-Ressourcenhinweise für reCAPTCHA einzubinden. Dadurch wird die Zeit minimiert, in der der Script-Download den Parser blockiert.
Ressourcenhinweise verwenden
Wenn Sie die folgenden Ressourcenhinweise in die <head> des Dokuments einfügen,
den Zeitaufwand für die Bereitstellung der Ressourcen zu reduzieren,
reCAPTCHA aus. Mit dem Ressourcenhinweis preconnect wird der Browser angewiesen, einen
frühzeitig mit Drittanbietern zusammenarbeiten.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Lazy Loading
Je mehr Kontext reCAPTCHA über eine Seite hat, desto besser kann es feststellen, ob Nutzeraktionen legitim sind. Das gilt insbesondere für Versionen von reCAPTCHA, die nicht auf Nutzerherausforderungen basieren. Daher wird gewartet, bis reCAPTCHA bis zu einer bestimmten eingeschränkten Aktion geladen wird. (z. B. Formulareinreichung) wird generell nicht empfohlen.