Diga Adeus à ofuscação de e-mail da CloudFlare

O que é a ofuscação de e-mail da CloudFlare?

Cloudflare Email Address Obfuscation é um serviço que ajuda na prevenção de spam ocultando endereços de e-mail que aparecem em suas páginas de coletores de e-mail e outros bots, enquanto permanecem visíveis para os visitantes do seu site.

Coletores de e-mail e outros bots percorrem a Internet procurando endereços de e-mail para adicionar a listas que visam destinatários de spam. Essa tendência resulta em uma quantidade crescente de e-mails indesejados.

Os administradores da web criaram maneiras inteligentes de se proteger contra isso, escrevendo os endereços de e-mail (ou seja, help [at] cloudflare [dot] com) ou usando imagens incorporadas do endereço de e-mail. No entanto, você perde a conveniência de clicar no endereço de e-mail para enviar um e-mail automaticamente. Ao ativar o Cloudflare Email Address Obfuscation, os endereços de e-mail em sua página da web serão ofuscados (ocultos) dos bots, mantendo-os visíveis para os humanos. Na verdade, não há mudanças visíveis em seu site para os visitantes.

.

Um rápido lembrete: o que torna uma página rápida?

Páginas rápidas são renderizadas quase imediatamente. Durante os primeiros ciclos de renderização, certifique-se de que apenas os recursos críticos sejam baixados. Qualquer coisa que não seja crítica para renderização deve ser adiada até que a página seja renderizada.

Por que a ofuscação de e-mail da CloudFlare é ruim para os Core Web Vitals?

.

A ofuscação de endereço de e-mail da CloudFlare injetará um pequeno JavaScript para decodificar um endereço de e-mail. Qual o problema nisso, você pode pensar? Considere 4 coisas aqui:

1. O script email-decode.min.js é carregado muito cedo no processo de renderização. Mesmo antes de outros scripts e imagens importantes.
2. O e-mail que você está ocultando provavelmente nem está na viewport visível.
3. A decodificação de e-mail não é a coisa mais importante que acontecerá na página.

Isso torna a decodificação de e-mail uma tarefa que deve ser tratada com a menor prioridade. Você certamente não deseja injetar um script de decodificação tão cedo no processo de renderização.

Como decodificar e-mails da maneira correta!

Existem maneiras muito melhores de ocultar um endereço de e-mail que não envolvem a execução de scripts no início do processo de renderização. Na maioria das vezes, é melhor anexar o Intersection Observer e carregar um script de ofuscação de endereço de e-mail just-in-time

Crie o e-mail ofuscado

<a 
 class="email-hidden" 
 href="#" 
 data-email="aW5mb0BleGFtcGxlLmNvbQ==">
 [email-hidden]
<a>

Anexe o Intersection Observer, coloque este pedaço de JavaScript na parte inferior da página.

<script>
const emailtag = document.querySelector('.email-hidden');
let observer = new IntersectionObserver((entries) => {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      let script = document.createElement('script');
      script.onload = function () {
        emaildecode(entry.target)
      };
      script.src = 'decode-email.js';
      document.head.appendChild(script);
    }
  });
}).observe(emailtag);
</script>

Faça o upload do script email-decode decode-email.js e substitua a função de decodificação de e-mail por uma biblioteca de decodificação de sua própria escolha.

const emaildecode = (e) => {
	let email = atob(e.dataset.email);
	e.href = 'mailto:'+email;
	e.innerHTML = email;
}

Verifique os resultados

<a href="mailto:info@example.com">info@example.com</a>

Aí está, Core Web Vitals perfeitos e ofuscação de e-mail!