หน้านี้ได้รับการแปลโดย 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 จนกว่าจะมีการดำเนินการที่ถูกจำกัดที่เจาะจง เกิดขึ้น (เช่น การส่งแบบฟอร์ม) โดยทั่วไปจะไม่แนะนำ