Gostaria de acelerar o tempo de carregamento da sua página optimizando o momento em que o reCAPTCHA é carregado? Ao adiar o script reCAPTCHA para depois do carregamento do conteúdo da página, pode melhorar a velocidade inicial da página e a experiência do utilizador. Esta abordagem garante que o seu conteúdo essencial aparece rapidamente enquanto as funcionalidades de segurança são carregadas sem problemas em segundo plano.
Este guia mostrará como atrasar o carregamento do reCAPTCHA para obter um melhor desempenho.
Compreender o diferimento do guião
Quando o reCAPTCHA carrega normalmente, pode interromper temporariamente o carregamento de outros recursos. Ao adiar o script, permite que o conteúdo crítico da sua página, como texto e imagens, seja carregado primeiro. Isto cria uma experiência mais suave para os seus utilizadores, mantendo as vantagens de segurança do reCAPTCHA.
Adicionar o código Deferir
Para adiar o carregamento do reCAPTCHA, adicione este trecho de código ao seu site. Se precisar de ajuda para adicionar código personalizado, consulte o nosso tutorial sobre como adicionar trechos de código.
Este código funciona identificando o script reCAPTCHA e adicionando ambos defer e async atributos. Estes atributos dizem ao browser para:
- Carregar o script de forma assíncrona, sem bloquear outros recursos
- Executar o script apenas depois de a página ter terminado de carregar
Utilizar com hCAPTCHA
Se estiver a utilizar o hCAPTCHA em vez do reCAPTCHA, utilize esta versão 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 );
E isso é tudo o que precisa para adiar o JavaScript do reCAPTCHA. Em seguida, gostaria de alterar também o tema do reCAPTCHA? Confira nosso tutorial sobre como alterar o tema do CAPTCHA para obter mais detalhes.