Dì addio all'offuscamento email di CloudFlare

Cos'è l'offuscamento email di CloudFlare?

Cloudflare Email Address Obfuscation è un servizio che aiuta nella prevenzione dello spam nascondendo gli indirizzi email presenti nelle tue pagine dai raccoglitori di email e altri bot, pur rimanendo visibili ai visitatori del tuo sito.

I raccoglitori di email e altri bot vagano per Internet alla ricerca di indirizzi email da aggiungere a liste che prendono di mira i destinatari con lo spam. Questa tendenza si traduce in una quantità crescente di email indesiderate.

Gli amministratori web hanno ideato modi ingegnosi per proteggersi da questo scrivendo gli indirizzi email per esteso (ad esempio, help [at] cloudflare [dot] com) o utilizzando immagini incorporate dell'indirizzo email. Tuttavia, si perde la comodità di cliccare sull'indirizzo email per inviare automaticamente un'email. Abilitando Cloudflare Email Address Obfuscation, gli indirizzi email sulla tua pagina web saranno offuscati (nascosti) dai bot, pur rimanendo visibili agli esseri umani. Di fatto, non ci sono modifiche visibili al tuo sito web per i visitatori.

.

Un breve promemoria: cosa rende una pagina veloce?

Le pagine veloci vengono renderizzate quasi immediatamente. Durante i primi cicli di rendering assicurati che vengano scaricate solo le risorse critiche. Tutto ciò che non è critico per il rendering dovrebbe essere differito fino a dopo che la pagina è stata renderizzata.

Perché l'offuscamento email di CloudFlare è dannoso per i Core Web Vitals?

.

CloudFlare Email Address Obfuscation inietta un piccolo JavaScript per decodificare un indirizzo email. Che male c'è, potresti pensare? Considera 4 cose:

1. Lo script email-decode.min.js viene caricato molto presto nel processo di rendering. Ancora prima di altri script e immagini importanti.
2. L'email che stai nascondendo molto probabilmente non si trova nemmeno nel viewport visibile.
3. La decodifica dell'email non è la cosa più importante che accadrà nella pagina.

Questo rende la decodifica dell'email un compito che dovrebbe essere gestito con la priorità più bassa. Sicuramente non vuoi iniettare uno script di decodifica così presto nel processo di rendering.

Come decodificare le email nel modo corretto!

Ci sono modi molto migliori per nascondere un indirizzo email che non comportano l'esecuzione di script nelle prime fasi del processo di rendering. Nella maggior parte dei casi è meglio collegare l'intersection observer e caricare uno script di Email Address Obfuscation just-in-time

Crea l'email offuscata

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

Collega l'intersection observer, posiziona questo pezzo di JavaScript in fondo alla 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>

Carica lo script email-decode decode-email.js e sostituisci la funzione di decodifica email con una libreria di decodifica a tua scelta.

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

Verifica i risultati

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

Ecco fatto, Core Web Vitals perfetti e offuscamento email!