इस दस्तावेज़ में 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 को लोड करने वाले पेजों पर, नीचे दिए गए कोड स्निपेट को शामिल करके, रेस से जुड़ी शर्तों को रोक सकते हैं. अगर एपीआई कॉल को रैप करने के लिए, 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 एपीआई का इस्तेमाल करने वाली साइटें, 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 के साथ मिलकर काम करने के लिए, रिसॉर्स के सुझाव पाने की सलाह दी जाती है. इससे स्क्रिप्ट के डाउनलोड में
पार्सर ब्लॉक हो जाता है.
संसाधन से जुड़े संकेतों का इस्तेमाल करना
दस्तावेज़ के <head> में नीचे दिए गए संसाधन संकेतों को शामिल करने से, रीकैप्चा में इस्तेमाल किए गए संसाधनों को डिलीवर करने में लगने वाला समय कम हो जाएगा. preconnect रिसॉर्स संकेत, ब्राउज़र को तीसरे पक्ष के ऑरिजिन के साथ
शुरुआती कनेक्शन बनाने के निर्देश देता है.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
धीमी लोडिंग
आम तौर पर, किसी पेज के बारे में reCAPTCHA के पास जितनी ज़्यादा जानकारी होती है, उपयोगकर्ता के काम करने के तरीके को बेहतर तरीके से समझाना उतना ही आसान होता है. यह खास तौर पर reCAPTCHA के उन वर्शन के लिए सही होता है जो उपयोगकर्ता की चुनौतियों पर निर्भर नहीं होते हैं. इसलिए, हम सुझाव देते हैं कि जब तक कोई खास पाबंदी वाली कार्रवाई (उदाहरण के लिए, फ़ॉर्म सबमिट) न हो जाए, तब तक reCAPTCHA को लोड न करें.