Zeg vaarwel tegen CloudFlare e-mail verduistering

Wat is CloudFlare e-mail verduistering?

Cloudflare Email Address Obfuscation is een dienst die helpt bij spampreventie door e-mailadressen die op je pagina's verschijnen te verbergen voor e-mail harvesters en andere bots, terwijl ze zichtbaar blijven voor je sitebezoekers.

E-mail harvesters en andere bots struinen het internet af op zoek naar e-mailadressen om toe te voegen aan lijsten die ontvangers targeten voor spam. Deze trend resulteert in een toenemende hoeveelheid ongewenste e-mail.

Webbeheerders hebben slimme manieren bedacht om zich hiertegen te beschermen door e-mailadressen uit te schrijven (bijv. help [at] cloudflare [dot] com) of door embedded afbeeldingen van het e-mailadres te gebruiken. Je verliest echter het gemak van het klikken op het e-mailadres om automatisch een e-mail te verzenden. Door Cloudflare Email Address Obfuscation in te schakelen, worden e-mailadressen op je webpagina verduisterd (verborgen) voor bots, terwijl ze zichtbaar blijven voor mensen. Er zijn zelfs geen zichtbare veranderingen aan je website voor bezoekers.

.

Een korte herinnering: wat maakt een pagina snel?

Snelle pagina's renderen bijna onmiddellijk. Zorg ervoor dat tijdens de eerste rendering cycli alleen kritieke resources worden gedownload. Alles wat niet kritiek is voor rendering moet worden uitgesteld tot nadat de pagina is gerenderd.

Waarom CloudFlare e-mail verduistering slecht is voor de Core Web Vitals?

.

CloudFlare Email Address Obfuscation zal een klein JavaScript injecteren om een e-mailadres te decoderen. Wat is daar verkeerd aan zou je denken? Overweeg hier 4 dingen:

1. Het script email-decode.min.js wordt heel vroeg in het renderingproces geladen. Zelfs voor andere scripts en belangrijke afbeeldingen.
2. De e-mail die je verbergt bevindt zich waarschijnlijk niet eens in de zichtbare viewport.
3. Het decoderen van e-mail is niet het belangrijkste dat op de pagina zal gebeuren.

Dit maakt e-mail decodering een taak die met de laagste prioriteit moet worden afgehandeld. Je wilt zeker geen decoderingsscript zo vroeg in het renderingproces injecteren.

Hoe e-mails op de juiste manier te decoderen!

Er zijn veel betere manieren om een e-mailadres te verbergen die niet inhouden dat scripts vroeg in het renderingproces worden uitgevoerd. Meestal is het beter om de intersection observer te koppelen en een Email Address Obfuscation script just-in-time te laden

Maak de verduisterde e-mail

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

Koppel de intersection observer, plaats dit stukje JavaScript onderaan de pagina.

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

Upload het email-decode script decode-email.js en vervang de e-mail decoderingsfunctie door een decoderingsbibliotheek naar keuze.

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

Controleer de resultaten

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

Daar heb je het, perfecte Core Web Vitals en e-mail verduistering!