หน้านี้ได้รับการแปลโดย 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 = {
      ready: function(cb) {
        // 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);
      }
    };
  }

  // Usage
  grecaptcha.ready(function(){
    grecaptcha.render("container", {
      sitekey: "ABC-123"
    });
  });
</script>

สำหรับทางเลือกอื่น เว็บไซต์ที่ใช้ API v2 อาจพบว่ามีประโยชน์ในการใช้งาน Callback ของ onload ระบบจะเรียกใช้ Callback onload เมื่อ reCAPTCHA เสร็จสิ้น กำลังโหลด ควรกำหนด Callback 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 จนกว่าจะมีการดำเนินการที่ถูกจำกัดที่เจาะจง เกิดขึ้น (เช่น การส่งแบบฟอร์ม) โดยทั่วไปจะไม่แนะนำ