title: How to completely defer loading Google reCaptcha until after the page fully loads
body: <p>I have Google reCaptcha v2 (checkbox type) installed on the website. But it's slowing down the page loading significantly on mobile even with the 'defer' attribute (based on pagespeed test). So, I want to defer its loading completely until after the page is fully loaded.</p>
  
  <p>This is what the form code (where the reCaptcha is installed) looks like:</p>
  
  <pre class="lang-py prettyprint-override"><code>    &lt;form id="sib-form" method="POST" action="https://.........." data-type="subscription"&gt;
         &lt;input class="input" type="text" id="FIRSTNAME" name="FIRSTNAME" data-required="true"&gt;
         &lt;input class="input" type="text" id="LASTNAME" name="LASTNAME" data-required="true"&gt;
  
         &lt;script&gt;function handleCaptchaResponse() { 
         var event = new Event('captchaChange'); document.getElementById('sib-captcha').dispatchEvent(event); 
         } &lt;/script&gt;  
  
         &lt;div class="g-recaptcha sib-visible-recaptcha" id="sib-captcha" data-sitekey="xxxxxxxxxxxxx" 
         data-callback="handleCaptchaResponse"&gt;&lt;/div&gt;
  
         &lt;button form="sib-form" type="submit"&gt;Subscribe&lt;/button&gt;      
         &lt;input type="text" name="email_address_check" value="" class="input--hidden"&gt;        
         &lt;input type="hidden" name="locale" value="en"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And this reCaptcha js file is added in the head section:</p>
  
  <pre class="lang-py prettyprint-override"><code>    &lt;script defer src="https://www.google.com/recaptcha/api.js?hl=en"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Even though the 'defer' attribute is used on this js file, other related files are loaded regardless. And they're the reason for the lower page speed.</p>
  
  <p>How to defer the loading of this reCaptcha completely until after everything else is fully loaded?</p>