In diesem Dokument werden Best Practices zum Laden des reCAPTCHA-Skript-Tags erläutert. Diese Informationen gelten sowohl für reCAPTCHA v2 als auch für v3.
reCAPTCHA asynchron laden
Alle Versionen von reCAPTCHA können asynchron geladen werden. reCAPTCHA wird geladen asynchron keine Auswirkungen auf ihre Fähigkeit, verdächtigen Traffic zu identifizieren. Fällig die Leistungsvorteile asynchroner Scripts durch das Laden von reCAPTCHA, wird generell empfohlen.
<script async src="https://www.google.com/recaptcha/api.js">
Beachten Sie beim asynchronen Laden von reCAPTCHA, dass reCAPTCHA nicht mit verwendet werden, bis der Ladevorgang abgeschlossen ist. Der folgende Code würde zum Beispiel 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 Situationen kann die Anpassung der Skriptreihenfolge ausreichen, um
. Alternativ können Sie Race-Bedingungen verhindern, indem Sie die
auf Seiten, 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 = {
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>
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 muss definiert werden, bevor das reCAPTCHA 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, einschließlich preconnect
Ressourcenhinweise für reCAPTCHA werden dringend empfohlen. Dadurch wird die Zahl der
Zeitraum, über den der Skript-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
Generell gilt: Je mehr Kontext reCAPTCHA zu einer Seite hat, desto besser um festzustellen, ob Nutzeraktionen legitim sind. Dies ist Dies gilt insbesondere für reCAPTCHA-Versionen, die nicht auf Herausforderungen zu stellen. Daher wird gewartet, bis reCAPTCHA bis zu einer bestimmten eingeschränkten Aktion geladen wird. (z. B. Formulareinreichung) wird generell nicht empfohlen.