Di adiós a la ofuscación de email de CloudFlare

¿Qué es la ofuscación de email de CloudFlare?

La ofuscación de direcciones de email de Cloudflare es un servicio que ayuda en la prevención de spam al ocultar las direcciones de email que aparecen en tus páginas de los recolectores de email y otros bots, mientras permanecen visibles para los visitantes de tu sitio.

Los recolectores de email y otros bots recorren Internet buscando direcciones de email para añadirlas a listas que envían spam a los destinatarios. Esta tendencia resulta en una cantidad creciente de correo no deseado.

Los administradores web han ideado formas ingeniosas de protegerse contra esto escribiendo las direcciones de email (por ejemplo, help [at] cloudflare [dot] com) o usando imágenes incrustadas de la dirección de email. Sin embargo, se pierde la conveniencia de hacer clic en la dirección de email para enviar un correo automáticamente. Al habilitar la ofuscación de direcciones de email de Cloudflare, las direcciones de email en tu página web serán ofuscadas (ocultas) de los bots, mientras se mantienen visibles para los humanos. De hecho, no hay cambios visibles en tu sitio web para los visitantes.

.

Un recordatorio rápido: ¿qué hace que una página sea rápida?

Las páginas rápidas se renderizan casi inmediatamente. Durante los primeros ciclos de renderizado, asegúrate de que solo se descarguen los recursos críticos. Todo lo que no sea crítico para el renderizado debe diferirse hasta después de que la página se haya renderizado.

¿Por qué la ofuscación de email de CloudFlare es mala para los Core Web Vitals?

.

La ofuscación de direcciones de email de CloudFlare inyectará un pequeño JavaScript para decodificar una dirección de email. ¿Cuál es el daño en eso, podrías pensar? Considera 4 cosas aquí:

1. El script email-decode.min.js se carga muy temprano en el proceso de renderizado. Incluso antes que otros scripts e imágenes importantes.
2. El email que estás ocultando probablemente ni siquiera está en el viewport visible.
3. La decodificación del email no es lo más importante que sucederá en la página.

Esto hace que la decodificación de email sea una tarea que debería manejarse con la prioridad más baja. Ciertamente no querrás inyectar un script de decodificación tan temprano en el proceso de renderizado.

¡Cómo decodificar emails de la manera correcta!

Hay formas mucho mejores de ocultar una dirección de email que no implican ejecutar scripts temprano en el proceso de renderizado. La mayoría de las veces es mejor adjuntar el intersection observer y cargar un script de ofuscación de direcciones de email justo a tiempo

Crea el email ofuscado

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

Adjunta el intersection observer, coloca este fragmento de JavaScript al final de la 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>

Sube el script de decodificación de email decode-email.js y reemplaza la función de decodificación de email con una biblioteca de decodificación de tu elección.

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

Verifica los resultados

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

¡Ahí lo tienes, Core Web Vitals perfectos y ofuscación de email!