Hyvästit CloudFlaren sähköpostin piilotukselle

Mikä on CloudFlaren sähköpostin piilotus?

Cloudflare Email Address Obfuscation on palvelu, joka auttaa roskapostin estämisessä piilottamalla sivuillasi näkyvät sähköpostiosoitteet sähköpostinkerääjiltä ja muilta boteilta, samalla kun ne pysyvät näkyvissä sivuston vierailijoille.

Sähköpostinkerääjät ja muut botit vaeltavat internetissä etsien sähköpostiosoitteita lisättäväksi listoille, joilla kohdistetaan roskapostia vastaanottajille. Tämä suuntaus johtaa jatkuvasti kasvavaan ei-toivotun sähköpostin määrään.

Verkkosivujen ylläpitäjät ovat keksineet fiksuja tapoja suojautua tältä kirjoittamalla sähköpostiosoitteet auki (esim. help [at] cloudflare [dot] com) tai käyttämällä upotettuja kuvia sähköpostiosoitteesta. Menetät kuitenkin mukavuuden klikata sähköpostiosoitetta lähettääksesi sähköpostin automaattisesti. Ottamalla käyttöön Cloudflare Email Address Obfuscation -palvelun, verkkosivusi sähköpostiosoitteet piilotetaan boteilta, mutta ne pysyvät näkyvissä ihmisille. Itse asiassa verkkosivustollasi ei ole näkyviä muutoksia vierailijoille.

.

Pikamuistutus: mikä tekee sivusta nopean?

Nopeat sivut renderöityvät lähes välittömästi. Ensimmäisten renderöintisyklien aikana varmista, että vain kriittiset resurssit ladataan. Kaikki, mikä ei ole kriittistä renderöinnille, tulisi lykätä sivun renderöinnin jälkeiseksi.

Miksi CloudFlaren sähköpostin piilotus on haitallista Core Web Vitalsille?

.

CloudFlare Email Address Obfuscation lisää pienen JavaScriptin sähköpostiosoitteen purkamiseen. Mikä siinä on haitallista, saatat ajatella? Harkitse näitä 4 asiaa:

1. Skripti email-decode.min.js ladataan hyvin varhaisessa vaiheessa renderöintiprosessia. Jopa ennen muita skriptejä ja tärkeitä kuvia.
2. Sähköposti, jonka piilotat, ei todennäköisesti ole edes näkyvässä näkymässä.
3. Sähköpostin purkaminen ei ole tärkein asia, joka sivulla tapahtuu.

Tämä tekee sähköpostin purkamisesta tehtävän, joka tulisi käsitellä alhaisimmalla prioriteetilla. Et todellakaan halua lisätä purkuskriptiä näin varhaisessa vaiheessa renderöintiprosessia.

Kuinka purkaa sähköpostit oikealla tavalla!

There are much better ways to hide an email address that don't invoice executing scripts early in the rendering process. Most of the times it is better to attach the the intersection observer and load an Email Address Obfuscation script just-in-time

Create the obfuscated email

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

Attach the intersection observer, place this piece of JavaScript at the bottom of the page.

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

Lataa palvelimelle email-decode-skripti decode-email.js ja korvaa sähköpostin purkufunktio valitsemallasi purkukirjastolla.

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

Tarkista tulokset

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

Siinä se on, täydelliset Core Web Vitals ja sähköpostin piilotus!