หน้านี้ได้รับการแปลโดย Cloud Translation API

กําลังโหลด reCAPTCHA

เอกสารนี้จะอธิบายแนวทางปฏิบัติแนะนําในการโหลดแท็กสคริปต์ 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() เพื่อรวมการเรียก 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>

อีกทางเลือกหนึ่งคือเว็บไซต์ที่ใช้ v2 API ซึ่งอาจมีประโยชน์สําหรับการใช้ onload โค้ดเรียกกลับ ส่วนการเรียก onload จะดําเนินการเมื่อ reCAPTCHA โหลดเสร็จ ควรกําหนดการเรียกกลับ onload ก่อนโหลดสคริปต์ reCAPTCHA

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

การโหลดแบบ Lazy Loading

โดยทั่วไปแล้ว ยิ่งถ้า reCAPTCHA มีบริบทเกี่ยวกับหน้าเว็บมากเท่าไร เนื้อหานั้นก็ยิ่งมีข้อมูลมากขึ้นในการพิจารณาว่าการดําเนินการของผู้ใช้ถูกต้องหรือไม่ โดยเฉพาะเมื่อใช้ reCAPTCHA ที่ไม่ได้อาศัยท้าทายของผู้ใช้ เราจึงไม่แนะนําให้โหลด reCAPTCHA จนกว่าจะมีการดําเนินการแบบจํากัด (เช่น การส่งแบบฟอร์ม)