Bu belgede, reCAPTCHA komut dosyası etiketinin yüklenmesiyle ilgili en iyi uygulamalar açıklanmaktadır. Bu bilgiler hem reCAPTCHA v2 hem de v3 için geçerlidir.
reCAPTCHA eşzamansız olarak yükleniyor
reCAPTCHA'nın tüm sürümleri eşzamansız olarak yüklenebilir. reCAPTCHA'nın eşzamansız olarak yüklenmesi, şüpheli trafiği tanımlama özelliğini etkilemez. Eşzamansız komut dosyalarının performans avantajları nedeniyle, reCAPTCHA'yı eşzamansız olarak yüklemenizi öneririz.
<script async src="https://www.google.com/recaptcha/api.js">
reCAPTCHA'yı eşzamansız olarak yüklerken, yükleme işlemi bitene kadar reCAPTCHA'nın kullanılamayacağını unutmayın. Örneğin, aşağıdaki kod büyük olasılıkla bozulur:
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// If reCAPTCHA is still loading, grecaptcha will be undefined.
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
Bazı durumlarda, yarış koşullarını önlemek için komut dosyası sıralamasını ayarlamak yeterli olabilir. Alternatif olarak, reCAPTCHA'yı yükleyen sayfalara aşağıdaki kod snippet'ini ekleyerek yarış koşullarını önleyebilirsiniz. API çağrılarını sarmalamak için grecaptcha.ready() kullanıyorsanız reCAPTCHA'nın herhangi bir zamanda aranabilmesini sağlamak için aşağıdaki kod snippet'ini ekleyin.
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// How this code snippet works:
// This logic overwrites the default behavior of `grecaptcha.ready()` to
// ensure that it can be safely called at any time. When `grecaptcha.ready()`
// is called before reCAPTCHA is loaded, the callback function that is passed
// by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
// loaded.
if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
Alternatif olarak, v2 API'yi kullanan siteler onload geri çağırmasını kullanmayı faydalı bulabilir; onload geri çağırması reCAPTCHA'nın yüklenmesi tamamlandığında yürütülür. onload geri çağırması, reCAPTCHA komut dosyası yüklenmeden önce tanımlanmalıdır.
<script>
const onloadCallback = function() {
console.log("reCAPTCHA has loaded!");
grecaptcha.reset();
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>
reCAPTCHA'yı eşzamansız olarak yüklemek bir seçenek değilse reCAPTCHA için preconnectkaynak ipuçlarının eklenmesi kesinlikle önerilir. Bu, komut dosyası indirmenin ayrıştırıcıyı engelleme süresini en aza indirir.
Kaynak ipuçlarını kullanma
Dokümanın <head> bölümüne aşağıdaki kaynak ipuçları dahil edildiğinde, reCAPTCHA tarafından kullanılan kaynakların sağlanması daha kısa sürer. preconnect kaynak ipucu, tarayıcıya üçüncü taraf bir kaynakla erken bağlantı kurma talimatı verir.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Geç Yükleme
Genel olarak, reCAPTCHA'nın bir sayfa hakkında ne kadar fazla bağlamı olursa kullanıcı işlemlerinin meşru olup olmadığını o kadar iyi belirler. Bu durum özellikle, reCAPTCHA'nın kullanıcı sorunlarına dayalı olmayan sürümlerini kullanırken geçerlidir. Bu nedenle, belirli bir kısıtlanmış işlem (ör. form gönderme) tamamlanana kadar reCAPTCHA'nın yüklenmesi genellikle önerilmez.