این سند بهترین شیوه ها را برای بارگیری برچسب اسکریپت reCAPTCHA مورد بحث قرار می دهد. این اطلاعات برای هر دو نسخه reCAPTCHA نسخه 2 و 3 قابل اجرا است.
در حال بارگیری reCAPTCHA به صورت ناهمزمان
همه نسخه های reCAPTCHA را می توان به صورت ناهمزمان بارگیری کرد. بارگیری ناهمزمان reCAPTCHA بر توانایی آن در شناسایی ترافیک مشکوک تأثیری ندارد. با توجه به مزایای عملکرد اسکریپت های ناهمزمان، بارگیری reCAPTCHA به صورت ناهمزمان به طور کلی توصیه می شود.
<script async src="https://www.google.com/recaptcha/api.js">
هنگام بارگیری ناهمزمان reCAPTCHA، به خاطر داشته باشید که reCAPTCHA تا زمانی که بارگیری تمام نشده قابل استفاده نیست. به عنوان مثال، کد زیر احتمالاً خراب می شود:
<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>
در برخی شرایط، تنظیم ترتیب اسکریپت می تواند برای جلوگیری از شرایط مسابقه کافی باشد. از طرف دیگر، می‌توانید با قرار دادن قطعه کد زیر در صفحاتی که reCAPTCHA را بارگیری می‌کنند، از شرایط مسابقه جلوگیری کنید. اگر از grecaptcha.ready() برای بسته بندی تماس های API استفاده می کنید، قطعه کد زیر را اضافه کنید تا مطمئن شوید که reCAPTCHA می تواند در هر زمانی فراخوانی شود.
<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>
به عنوان یک جایگزین، سایت‌هایی که از API v2 استفاده می‌کنند ممکن است استفاده از پاسخ به تماس onload را مفید بدانند. زمانی که بارگذاری reCAPTCHA به پایان برسد، پاسخ به تماس onload اجرا می شود. قبل از بارگیری اسکریپت reCAPTCHA، پاسخ به تماس onload باید تعریف شود.
<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 به صورت ناهمزمان گزینه ای نیست، از جمله نکات منبع preconnect برای reCAPTCHA اکیداً توصیه می شود. این مقدار زمانی را که دانلود اسکریپت تجزیه کننده را مسدود می کند به حداقل می رساند.
استفاده از نکات منابع
گنجاندن نکات منابع زیر در <head> سند، مدت زمان تحویل منابع مورد استفاده توسط reCAPTCHA را کاهش می دهد. اشاره منبع preconnect به مرورگر دستور می دهد تا یک ارتباط اولیه با منبع شخص ثالث برقرار کند.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
بارگذاری تنبل
به طور کلی، هرچه زمینه reCAPTCHA در مورد یک صفحه بیشتر باشد، برای تعیین اینکه آیا اقدامات کاربر مشروع هستند یا خیر، آگاهی بهتری دارد. این به ویژه در هنگام استفاده از نسخه‌هایی از reCAPTCHA که به چالش‌های کاربر متکی نیستند، صادق است. بنابراین، انتظار برای بارگیری reCAPTCHA تا زمانی که یک عمل محدود شده خاص رخ دهد (به عنوان مثال، ارسال فرم) معمولاً توصیه نمی شود.