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. Das asynchrone Laden von reCAPTCHA wirkt sich nicht auf die Fähigkeit aus, verdächtigen Traffic zu identifizieren. Aufgrund der Leistungsvorteile von asynchronen Skripts wird empfohlen, reCAPTCHA asynchron zu laden.
<script async src="https://www.google.com/recaptcha/api.js">
Beachten Sie beim asynchronen Laden von reCAPTCHA, dass reCAPTCHA erst nach Abschluss des Ladevorgangs verwendet werden kann. Der folgende Code funktioniert wahrscheinlich so:
<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 kann es notwendig sein, 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, die reCAPTCHA laden. Wenn Sie grecaptcha.ready() zum Wrapping von API-Aufrufen verwenden, 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 kann es nützlich sein, für Websites, die Version 2 der API verwenden, den Callback onload zu nutzen. Der Callback onload wird ausgeführt, wenn reCAPTCHA geladen ist. Der onload-Callback sollte vor dem Laden des reCAPTCHA-Skripts definiert werden.
<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 Laden von reCAPTCHA nicht möglich ist, wird dringend empfohlen, preconnect-Ressourcenhinweise für reCAPTCHA anzugeben. Dadurch wird der Zeitraum minimiert, in dem der Skriptdownload den Parser blockiert.
Ressourcenhinweise verwenden
Wenn Sie die folgenden Ressourcenhinweise in den <head> des Dokuments einfügen, reduziert sich der Zeitaufwand für die Bereitstellung der von reCAPTCHA verwendeten Ressourcen. Der Ressourcenhinweis preconnect weist den Browser an, eine frühe Verbindung mit einer Drittanbieterquelle herzustellen.
<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 über eine Seite hat, desto besser können wir feststellen, ob die Nutzeraktionen legitim sind. Dies gilt insbesondere, wenn Versionen von reCAPTCHA verwendet werden, die nicht auf Nutzerherausforderungen angewiesen sind. Daher ist es im Allgemeinen nicht empfehlenswert, reCAPTCHA zu warten, bis eine bestimmte eingeschränkte Aktion (z. B. das Senden von Formularen) erfolgt.