Säg adjö till CloudFlare Email obfuscation

Vad är CloudFlare email obfuscation?

Cloudflare Email Address Obfuscation är en tjänst som hjälper till med spamförebyggande genom att dölja e-postadresser som visas på dina sidor från e-postskördare och andra botar, samtidigt som de förblir synliga för dina webbplatsbesökare.

E-postskördare och andra botar genomsöker Internet efter e-postadresser att lägga till i listor som riktar sig mot mottagare för spam. Denna trend resulterar i en ökande mängd oönskad e-post.

Webbadministratörer har hittat smarta sätt att skydda sig mot detta genom att skriva ut e-postadresser (dvs. help [at] cloudflare [dot] com) eller genom att använda inbäddade bilder av e-postadressen. Dock förlorar du bekvämligheten att klicka på e-postadressen för att automatiskt skicka ett e-postmeddelande. Genom att aktivera Cloudflare Email Address Obfuscation kommer e-postadresser på din webbsida att döljas från botar, samtidigt som de förblir synliga för människor. Det finns faktiskt inga synliga förändringar på din webbplats för besökare.

.

En snabb påminnelse: vad gör en sida snabb?

Snabba sidor renderas nästan omedelbart. Under de första renderingscyklerna ska du se till att bara kritiska resurser laddas ner. Allt som inte är kritiskt för rendering bör skjutas upp tills efter att sidan har renderats.

Varför är CloudFlare email obfuscation dåligt för Core Web Vitals?

.

CloudFlare Email Address Obfuscation injicerar ett litet JavaScript för att avkoda en e-postadress. Vad är skadan med det kanske du tänker? Överväg 4 saker här:

1. Skriptet email-decode.min.js laddas mycket tidigt i renderingsprocessen. Till och med före andra skript och viktiga bilder.
2. E-postadressen som du döljer finns troligtvis inte ens i det synliga viewporten.
3. E-postavkodningen är inte det viktigaste som kommer att hända på sidan.

Detta gör e-postavkodning till en uppgift som bör hanteras med lägst prioritet. Du vill definitivt inte injicera ett avkodningsskript så tidigt i renderingsprocessen.

Hur man avkodar e-postadresser på rätt sätt!

Det finns mycket bättre sätt att dölja en e-postadress som inte innebär att exekvera skript tidigt i renderingsprocessen. Oftast är det bättre att koppla på intersection observer och ladda ett Email Address Obfuscation-skript just-in-time

Skapa den dolda e-postadressen

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

Koppla på intersection observer, placera denna JavaScript-kod längst ner på sidan.

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

Ladda upp e-postavkodningsskriptet decode-email.js och ersätt e-postavkodningsfunktionen med ett avkodningsbibliotek efter eget val.

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

Kontrollera resultaten

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

Där har du det, perfekta Core Web Vitals och email obfuscation!