Gostaria de acelerar o tempo de carregamento de sua página otimizando quando o reCAPTCHA é carregado? Ao adiar o script do reCAPTCHA para depois do carregamento do conteúdo da página, você pode melhorar a velocidade inicial da página e a experiência do usuário. Essa abordagem garante que o conteúdo essencial seja exibido rapidamente, enquanto os recursos de segurança são carregados sem problemas em segundo plano.
Este guia mostrará a você como atrasar o carregamento do reCAPTCHA para melhorar o desempenho.
Entendendo o Script Deferral
Quando o reCAPTCHA é carregado normalmente, ele pode pausar temporariamente o carregamento de outros recursos. Ao adiar o script, você permite que o conteúdo essencial da sua página, como texto e imagens, seja carregado primeiro. Isso cria uma experiência mais tranquila para os usuários e, ao mesmo tempo, mantém os benefícios de segurança do reCAPTCHA.
Adição do código Defer
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 nosso tutorial sobre como adicionar trechos de código.
Esse código funciona identificando o script reCAPTCHA e adicionando ambos defer e async atributos. Esses atributos informam o navegador para:
- Carregar o script de forma assíncrona, sem bloquear outros recursos
- Executar o script somente após o término do carregamento da página
Usando com o hCAPTCHA
Se você estiver usando o hCAPTCHA em vez do reCAPTCHA, use 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 você precisa para adiar o JavaScript do reCAPTCHA. Em seguida, você gostaria de alterar também o tema do reCAPTCHA? Confira nosso tutorial sobre como alterar o tema do CAPTCHA para obter mais detalhes.