এই ডকুমেন্টটি reCAPTCHA স্ক্রিপ্ট ট্যাগ লোড করার জন্য সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে। এই তথ্য reCAPTCHA v2 এবং v3 উভয় ক্ষেত্রেই প্রযোজ্য।
অ্যাসিঙ্ক্রোনাসভাবে 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 লোড হওয়া পৃষ্ঠাগুলিতে নিম্নলিখিত কোড স্নিপেটগুলি অন্তর্ভুক্ত করে রেসের অবস্থা প্রতিরোধ করতে পারেন৷ আপনি API কলগুলি মোড়ানোর জন্য grecaptcha.ready() ব্যবহার করলে, 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>
একটি বিকল্প হিসাবে, যে সাইটগুলি v2 API ব্যবহার করে তাদের 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 লোড করার জন্য অপেক্ষা করা (উদাহরণস্বরূপ, ফর্ম জমা দেওয়া) সাধারণত সুপারিশ করা হয় না।