KI-Zusammenfassung
Möchten Sie die Ladezeiten Ihrer Seite beschleunigen, indem Sie optimieren, wann reCAPTCHA geladen wird? Indem Sie das reCAPTCHA-Skript verzögern, bis Ihre Seiteninhalte geladen sind, können Sie die anfängliche Seitengeschwindigkeit und das Benutzererlebnis verbessern. Dieser Ansatz stellt sicher, dass Ihre wichtigen Inhalte schnell angezeigt werden, während Sicherheitsfunktionen nahtlos im Hintergrund geladen werden.
Diese Anleitung zeigt Ihnen, wie Sie das Laden von reCAPTCHA für eine bessere Leistung verzögern können.
Verständnis der Skriptverzögerung
Wenn reCAPTCHA normal geladen wird, kann es andere Ressourcen vorübergehend am Laden hindern. Durch die Verzögerung des Skripts können Sie die kritischen Inhalte Ihrer Seite wie Text und Bilder zuerst laden. Dies schafft eine reibungslosere Erfahrung für Ihre Benutzer und behält gleichzeitig die Sicherheitsvorteile von reCAPTCHA bei.
Hinzufügen des Verzögerungscodes
Um das Laden von reCAPTCHA zu verzögern, fügen Sie diesen Code-Schnipsel zu Ihrer Website hinzu. Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem Code benötigen, lesen Sie bitte unser Tutorial zum Hinzufügen von Code-Schnipseln.
Dieser Code identifiziert das reCAPTCHA-Skript und fügt die Attribute defer und async hinzu. Diese Attribute weisen den Browser an:
- Das Skript asynchron zu laden, ohne andere Ressourcen zu blockieren
- Das Skript erst auszuführen, nachdem die Seite vollständig geladen wurde
Verwendung mit hCAPTCHA
Wenn Sie hCAPTCHA anstelle von reCAPTCHA verwenden, verwenden Sie diese alternative Version:
function wpf_hcaptcha_add_async_defer( $tag, $handle ) {
if ( strpos( $tag, 'hcaptcha.com/1/api.js?onload=wpformsRecaptchaLoad' ) !== false ) {
$tag = str_replace( ' src', ' defer async="async" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'wpf_hcaptcha_add_async_defer', 99, 2 );
Und das ist alles, was Sie brauchen, um das reCAPTCHA-JavaScript zu verzögern. Möchten Sie als Nächstes auch das Thema für reCAPTCHA ändern? Schauen Sie sich unser Tutorial zum Ändern des CAPTCHA-Themas für weitere Details an.