Verabschieden Sie sich von CloudFlare E-Mail-Verschleierung

Was ist CloudFlare E-Mail-Verschleierung?

Cloudflare Email Address Obfuscation ist ein Dienst, der bei der Spam-Prävention hilft, indem er E-Mail-Adressen, die auf Ihren Seiten erscheinen, vor E-Mail-Harvestern und anderen Bots verbirgt, während sie für Ihre Seitenbesucher sichtbar bleiben.

E-Mail-Harvester und andere Bots durchstreifen das Internet auf der Suche nach E-Mail-Adressen, um sie zu Listen hinzuzufügen, die Empfänger für Spam anvisieren. Dieser Trend führt zu einer zunehmenden Menge an unerwünschten E-Mails.

Webadministratoren haben sich clevere Wege ausgedacht, um sich davor zu schützen, indem sie E-Mail-Adressen ausschreiben (z.B. help [at] cloudflare [dot] com) oder eingebettete Bilder der E-Mail-Adresse verwenden. Jedoch verlieren Sie den Komfort, auf die E-Mail-Adresse zu klicken, um automatisch eine E-Mail zu senden. Durch die Aktivierung von Cloudflare Email Address Obfuscation werden E-Mail-Adressen auf Ihrer Webseite verschleiert (verborgen) vor Bots, während sie für Menschen sichtbar bleiben. Tatsächlich gibt es für Besucher keine sichtbaren Änderungen an Ihrer Website.

.

Eine kurze Erinnerung: Was macht eine Seite schnell?

Schnelle Seiten rendern fast sofort. Stellen Sie sicher, dass während der ersten Rendering-Zyklen nur kritische Ressourcen heruntergeladen werden. Alles, was für das Rendering nicht kritisch ist, sollte verzögert werden, bis die Seite gerendert ist.

Warum CloudFlare E-Mail-Verschleierung schlecht für die Core Web Vitals ist?

.

CloudFlare Email Address Obfuscation injiziert ein kleines JavaScript, um eine E-Mail-Adresse zu decodieren. Was ist daran schlimm, könnten Sie denken? Betrachten Sie hier 4 Dinge:

1. Das Skript email-decode.min.js wird sehr früh im Rendering-Prozess geladen. Sogar vor anderen Skripten und wichtigen Bildern.
2. Die E-Mail, die Sie verbergen, befindet sich höchstwahrscheinlich nicht einmal im sichtbaren Viewport.
3. Die E-Mail-Decodierung ist nicht das Wichtigste, was auf der Seite passieren wird.

Dies macht die E-Mail-Decodierung zu einer Aufgabe, die mit der niedrigsten Priorität behandelt werden sollte. Sie möchten sicherlich kein Decodierungsskript so früh im Rendering-Prozess injizieren.

Wie man E-Mails richtig decodiert!

Es gibt viel bessere Wege, eine E-Mail-Adresse zu verbergen, die nicht beinhalten, Skripte früh im Rendering-Prozess auszuführen. Meistens ist es besser, den Intersection Observer anzuhängen und ein Email Address Obfuscation Skript Just-in-Time zu laden.

Erstellen Sie die verschleierte E-Mail

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

Hängen Sie den Intersection Observer an, platzieren Sie dieses Stück JavaScript am Ende der Seite.

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

Laden Sie das E-Mail-Decodierungsskript decode-email.js hoch und ersetzen Sie die E-Mail-Decodierungsfunktion durch eine Decodierungsbibliothek Ihrer Wahl.

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

Überprüfen Sie die Ergebnisse

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

Da haben Sie es, perfekte Core Web Vitals und E-Mail-Verschleierung!