Dites adieu à l'offuscation d'e-mail de CloudFlare

Qu'est-ce que l'offuscation d'e-mail CloudFlare ?

L'offuscation d'adresse e-mail Cloudflare est un service qui aide à la prévention du spam en cachant les adresses e-mail apparaissant sur vos pages aux collecteurs d'e-mails et autres bots, tout en restant visibles pour les visiteurs de votre site.

Les collecteurs d'e-mails et autres bots parcourent Internet à la recherche d'adresses e-mail à ajouter à des listes ciblant les destinataires de spam. Cette tendance entraîne une quantité croissante d'e-mails indésirables.

Les administrateurs Web ont trouvé des moyens ingénieux pour se protéger contre cela en écrivant les adresses e-mail (c.-à-d. help [at] cloudflare [dot] com) ou en utilisant des images intégrées de l'adresse e-mail. Cependant, vous perdez la commodité de cliquer sur l'adresse e-mail pour envoyer automatiquement un e-mail. En activant l'offuscation d'adresse e-mail Cloudflare, les adresses e-mail sur votre page Web seront offusquées (cachées) aux bots, tout en restant visibles pour les humains. En fait, il n'y a aucun changement visible sur votre site Web pour les visiteurs.

.

Un rappel rapide : qu'est-ce qui rend une page rapide ?

Les pages rapides s'affichent presque immédiatement. Lors des premiers cycles de rendu, assurez-vous que seules les ressources critiques sont téléchargées. Tout ce qui n'est pas critique pour le rendu doit être différé jusqu'à ce que la page soit affichée.

Pourquoi l'offuscation d'e-mail CloudFlare est-elle mauvaise pour les Core Web Vitals ?

.

L'offuscation d'adresse e-mail CloudFlare injectera un petit JavaScript pour décoder une adresse e-mail. Quel est le mal à cela, pourriez-vous penser ? Considérez 4 choses ici :

1. Le script email-decode.min.js est chargé très tôt dans le processus de rendu. Même avant les autres scripts et les images importantes.
2. L'e-mail que vous cachez n'est probablement même pas dans la fenêtre d'affichage visible.
3. Le décodage de l'e-mail n'est pas la chose la plus importante qui se produira sur la page.

Cela fait du décodage d'e-mail une tâche qui doit être traitée avec la priorité la plus basse. Vous ne voulez certainement pas injecter un script de décodage aussi tôt dans le processus de rendu.

Comment décoder les e-mails de la bonne manière !

Il existe de bien meilleures façons de cacher une adresse e-mail qui n'impliquent pas l'exécution de scripts tôt dans le processus de rendu. La plupart du temps, il est préférable d'attacher l'intersection observer et de charger un script d'offuscation d'adresse e-mail juste à temps.

Créez l'e-mail offusqué

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

Attachez l'intersection observer, placez ce morceau de JavaScript au bas de la page.

<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>

Téléchargez le script email-decode decode-email.js et remplacez la fonction de décodage d'e-mail par une bibliothèque de décodage de votre choix.

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

Vérifiez les résultats

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

Voilà, des Core Web Vitals parfaits et une offuscation d'e-mail !