Resumo de IA
Gostaria de acelerar o tempo de carregamento da sua página otimizando quando o reCAPTCHA carrega? Ao adiar o script do reCAPTCHA até depois que o conteúdo da sua página carrega, você pode melhorar a velocidade inicial da página e a experiência do usuário. Essa abordagem garante que seu conteúdo essencial apareça rapidamente enquanto os recursos de segurança carregam perfeitamente em segundo plano.
Este guia mostrará como adiar o carregamento do reCAPTCHA para um melhor desempenho.
Entendendo o adiamento do script
Quando o reCAPTCHA carrega normalmente, ele pode pausar temporariamente outros recursos de carregamento. Ao adiar o script, você permite que o conteúdo crítico da sua página, como texto e imagens, carregue primeiro. Isso cria uma experiência mais suave para seus usuários, mantendo os benefícios de segurança do reCAPTCHA.
Adicionando o código de adiamento
Para adiar o carregamento do reCAPTCHA, adicione este trecho de código ao seu site. Se precisar de ajuda para adicionar código personalizado, revise nosso tutorial sobre como adicionar trechos de código.
Este código funciona identificando o script do reCAPTCHA e adicionando os atributos defer e async. Esses atributos dizem ao navegador para:
- Carregar o script de forma assíncrona, sem bloquear outros recursos
- Executar o script somente após o carregamento completo da página
Usando com hCAPTCHA
Se você estiver usando hCAPTCHA em vez de 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 é 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 mais detalhes.