¿Le gustaría acelerar los tiempos de carga de su página optimizando el momento en que se carga reCAPTCHA? Al aplazar el script reCAPTCHA hasta después de que se cargue el contenido de su página, puede mejorar la velocidad inicial de la página y la experiencia del usuario. Este enfoque garantiza que el contenido esencial aparezca rápidamente mientras las funciones de seguridad se cargan sin problemas en segundo plano.
Esta guía le mostrará cómo retrasar la carga de reCAPTCHA para un mejor rendimiento.
Entender el aplazamiento de guiones
Cuando reCAPTCHA se carga normalmente, puede detener temporalmente la carga de otros recursos. Al aplazar la secuencia de comandos, permite que el contenido esencial de la página, como el texto y las imágenes, se cargue primero. Esto crea una experiencia más fluida para los usuarios, al tiempo que mantiene las ventajas de seguridad de reCAPTCHA.
Añadir el código de aplazamiento
Para aplazar la carga de reCAPTCHA, añade este fragmento de código a tu sitio. Si necesitas ayuda para añadir código personalizado, consulta nuestro tutorial sobre cómo añadir fragmentos de código.
Este código funciona identificando el script reCAPTCHA y añadiendo ambos defer y async atributos. Estos atributos indican al navegador que:
- Cargar el script de forma asíncrona, sin bloquear otros recursos
- Ejecutar el script sólo después de que la página haya terminado de cargarse
Uso con hCAPTCHA
Si utiliza hCAPTCHA en lugar de reCAPTCHA, utilice esta versión alternativa:
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 );
Y eso es todo lo que necesitas para aplazar el JavaScript de reCAPTCHA. A continuación, ¿quieres cambiar también el tema de reCAPTCHA? Consulte nuestro tutorial sobre cómo cambiar el tema de CAPTCHA para obtener más detalles.