Sig farvel til CloudFlare Email obfuscation

Hvad er CloudFlare email obfuscation?

Cloudflare Email Address Obfuscation er en tjeneste, der hjælper med at forhindre spam ved at skjule e-mailadresser, der vises på dine sider, for e-mail-høstere og andre bots, mens de forbliver synlige for dine besøgende.

E-mail-høstere og andre bots gennemsøger internettet på jagt efter e-mailadresser, der kan tilføjes til lister, som målretter modtagere til spam. Denne tendens resulterer i en stigende mængde uønsket e-mail.

Webadministratorer har fundet smarte måder at beskytte mod dette på ved at skrive e-mailadresser ud (f.eks. help [at] cloudflare [dot] com) eller ved at bruge indlejrede billeder af e-mailadressen. Men du mister bekvemmeligheden ved at klikke på e-mailadressen for automatisk at sende en e-mail. Ved at aktivere Cloudflare Email Address Obfuscation vil e-mailadresser på din webside blive sløret (skjult) for bots, mens de forbliver synlige for mennesker. Faktisk er der ingen synlige ændringer på dit websted for besøgende.

.

En hurtig påmindelse: hvad gør en side hurtig?

Hurtige sider renderer næsten øjeblikkeligt. Under de første renderingscyklusser skal du sikre dig, at kun kritiske ressourcer downloades. Alt, der ikke er kritisk for rendering, bør udskydes til efter siden er blevet renderet.

Hvorfor CloudFlare email obfuscation er dårligt for Core Web Vitals?

.

CloudFlare Email Address Obfuscation vil injicere et lille JavaScript for at afkode en e-mailadresse. Hvad er skaden i det, tænker du måske? Overvej 4 ting her:

1. Scriptet email-decode.min.js indlæses meget tidligt i renderingsprocessen. Endda før andre scripts og vigtige billeder.
2. E-mailen, du skjuler, er højst sandsynligt ikke engang i den synlige viewport.
3. E-mail-afkodningen er ikke den vigtigste ting, der vil ske på siden.

Dette gør e-mail-afkodning til en opgave, der bør håndteres med laveste prioritet. Du vil bestemt ikke injicere et afkodningsscript så tidligt i renderingsprocessen.

Sådan afkoder du e-mails på den rigtige måde!

Der er meget bedre måder at skjule en e-mailadresse på, der ikke medfører at udføre scripts tidligt i renderingsprocessen. Oftest er det bedre at tilknytte intersection observer og indlæse et Email Address Obfuscation-script just-in-time

Opret den slørede e-mail

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

Tilknyt intersection observer, placer dette stykke JavaScript nederst på siden.

<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 e-mail-afkodningsscriptet decode-email.js og erstat e-mail-afkodningsfunktionen med et afkodningsbibliotek efter eget valg.

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

Tjek resultaterne

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

Der har du det, perfekte core web vitals og email obfuscation!