Title: How can I load google recaptcha asyncly?
Tags: javascript;html;frontend;recaptcha
Question: After implementing googles no captcha, my website page loading is noticeably slow.
The problem comes from this, which is used in <head&gt;</head&gt;
<script src='https://www.google.com/recaptcha/api.js'&gt;</script&gt;
How can I load this aysncly with javascript maybe, and have the captcha display after the page loads?
I tried:
function loadCaptcha(){
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = "";
div.innerHTML += "<script src='https://www.google.com/recaptcha/api.js'&gt;</script&gt;";
div.innerHTML += "<form action='' method='post''&gt;<div align=\"center\" id='centercaptcha' class=\"g-recaptcha\" data-sitekey=\"***\"&gt;</div&gt;<br&gt;<button name='Claim faucet' value='Claim faucet' id='faucet-button'&gt;Claim faucet</button&gt;</form&gt;";
document.getElementById('center').appendChild(div);
//document.getElementById("loading").style.display = "none";
yet no cigar. Any ideas?


Here is another answer: Follow Google's instruction to use async defer in <script&gt;-block:
<script src="https://www.google.com/recaptcha/api.js" async defer&gt;</script&gt;

Here is another answer: You have two options:
Move your script tag to the bottom.
Use async.
Comment for this answer: By bottom, I mean the most bottom part of your HTML code where a `` tag doesn't break the HTML specs. A footer should work.
Comment for this answer: by bottom do you mean  tag? Please clarify

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:09/16/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><frontend><recaptcha>', 'Title': 'How can I load google recaptcha asyncly?', 'ViewCount': 2756, 'id': 46256691, 'user_AboutMe': None, 'user_AccountId': 11755852.0, 'user_DisplayName': '2523454', 'user_Reputation': 123.0, 'user_Views': 11.0, 'user_id': 8603575.0}}