CloudFlare Email Gizleme Özelliğine Veda Edin

CloudFlare email gizleme nedir?

Cloudflare Email Address Obfuscation, sayfalarınızda görünen e-posta adreslerini e-posta toplayıcılarından ve diğer botlardan gizleyerek spam önlemeye yardımcı olan, aynı zamanda site ziyaretçileriniz tarafından görünür kalmaya devam eden bir hizmettir.

E-posta toplayıcıları ve diğer botlar, spam için alıcıları hedefleyen listelere eklemek üzere e-posta adresleri aramak için internette dolaşır. Bu eğilim, artan miktarda istenmeyen e-postaya neden olur.

Web yöneticileri, e-posta adreslerini yazarak (örneğin, help [at] cloudflare [dot] com) veya e-posta adresinin gömülü görsellerini kullanarak buna karşı korunmanın akıllıca yollarını bulmuşlardır. Ancak, otomatik olarak e-posta göndermek için e-posta adresine tıklama kolaylığını kaybedersiniz. Cloudflare Email Address Obfuscation'ı etkinleştirerek, web sayfanızdaki e-posta adresleri botlardan gizlenirken, insanlar tarafından görünür kalmaya devam eder. Aslında, ziyaretçiler için web sitenizde görünür bir değişiklik yoktur.

.

Hızlı bir hatırlatma: bir sayfayı hızlı yapan nedir?

Hızlı sayfalar neredeyse anında render edilir. İlk render döngülerinde yalnızca kritik kaynakların indirildiğinden emin olun. Render için kritik olmayan her şey, sayfa render edildikten sonraya ertelenmelidir.

CloudFlare email gizleme neden Core Web Vitals için kötüdür?

.

CloudFlare Email Address Obfuscation, bir e-posta adresini çözmek için küçük bir JavaScript enjekte eder. Bunun ne zararı olabilir diye düşünebilirsiniz. Burada 4 şeyi göz önünde bulundurun:

1. email-decode.min.js scripti, render sürecinde çok erken yüklenir. Diğer scriptlerden ve önemli görsellerden bile önce.
2. Gizlediğiniz e-posta muhtemelen görünür viewport'ta bile değildir.
3. E-posta çözümleme, sayfada gerçekleşecek en önemli şey değildir.

Bu, e-posta çözümlemeyi en düşük öncelikte ele alınması gereken bir görev haline getirir. Render sürecinde bu kadar erken bir çözümleme scripti enjekte etmek kesinlikle istemezsiniz.

E-postaları doğru şekilde nasıl çözümlersiniz!

Render sürecinde erken script çalıştırmayı gerektirmeyen çok daha iyi e-posta adresi gizleme yolları vardır. Çoğu zaman intersection observer'ı eklemek ve bir Email Address Obfuscation scriptini tam zamanında yüklemek daha iyidir

Gizlenmiş e-postayı oluşturun

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

Intersection observer'ı ekleyin, bu JavaScript parçasını sayfanın altına yerleştirin.

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

E-posta çözümleme scripti decode-email.js'yi yükleyin ve e-posta çözümleme fonksiyonunu kendi tercih ettiğiniz bir çözümleme kütüphanesiyle değiştirin.

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

Sonuçları kontrol edin

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

İşte bu kadar, mükemmel Core Web Vitals ve email gizleme!