Möchten Sie die Ladezeiten Ihrer Seite verkürzen, indem Sie den Ladezeitpunkt von reCAPTCHA optimieren? Indem Sie das reCAPTCHA-Skript aufschieben, bis Ihr Seiteninhalt geladen ist, können Sie die anfängliche Seitengeschwindigkeit und die Benutzerfreundlichkeit verbessern. Auf diese Weise wird sichergestellt, dass Ihre wesentlichen Inhalte schnell angezeigt werden, während die 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 des Skriptaufschubs
Wenn reCAPTCHA normal geladen wird, kann es das Laden anderer Ressourcen vorübergehend unterbrechen. Indem Sie das Skript zurückstellen, ermöglichen Sie, dass wichtige Inhalte Ihrer Seite wie Text und Bilder zuerst geladen werden. Dies sorgt für einen reibungsloseren Ablauf für Ihre Nutzer, während die Sicherheitsvorteile von reCAPTCHA erhalten bleiben.
Hinzufügen des Aufschubcodes
Um das Laden von reCAPTCHA zu verzögern, fügen Sie dieses Code-Snippet 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-Snippets.
Dieser Code funktioniert, indem er das reCAPTCHA-Skript identifiziert und beide defer und async Attribute. Diese Attribute teilen dem Browser mit, was er tun soll:
- Das Skript asynchron laden, ohne andere Ressourcen zu blockieren
- Führen Sie das Skript erst aus, wenn die Seite fertig geladen ist.
Verwendung mit hCAPTCHA
Wenn Sie hCAPTCHA anstelle von reCAPTCHA verwenden, benutzen 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 verschieben. Möchten Sie als nächstes auch das Thema für reCAPTCHA ändern? In unserem Tutorial zum Ändern des CAPTCHA-Themes finden Sie weitere Details.