trigger of loading recaptcha library only when user interacts but not getting the value in hidden input field

As we all know that page speed plays an important role in SEO and whenever you tried to implement google Recaptcha v3 it will slow your site a lot. that's why I decided to trigger the loading/execution/running of the reCaptcha library only when the user interacts with the input form(s). This is, actually, quite possible ..
here is my code and website igsavers...

    <form method="post" action="/video">
    {{ csrf_field() }}
    <div class="control is-loading">
        <input name="instauser" id="author" class="input is-rounded is-focused is-medium" type="text" placeholder="https://instagram.com/p/41SW_pmmq4/">
    </div>

    <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value="">
    <div class="control has-text-centered">
        <br>
        <button type="submit" class="button is-danger is-active is-medium">Download &nbsp
            <img src="{{ asset('svg/downloads.svg') }}" width="25px" alt="Instagram video download" />
        </button>
    </div>
</form>
    <script type="text/javascript">
    	// trigger loading api.js (recaptcha.js) script
    	var reCaptchaFocus = function() {
    	var head = document.getElementsByTagName('head')[0];
    	var script = document.createElement('script');
    	script.type = 'text/javascript';
    	script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy';
    	head.appendChild(script);
    
    	// remove focus to avoid js error:
    	// Uncaught Error: reCAPTCHA has already been rendered in this element at Object.kh
    	document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
    	};
    	// add initial event listener to our basic HTML form
    	document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
    </script>

this code is working well but the problem is that hidden input type g-recaptcha-response value will remain empty. here is my code of adding value in this field

<script>grecaptcha.ready(function() {
    grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
       document.getElementById('g-recaptcha-response').value=token;
    });
});</script>

help me to figure out what I change in the code to load the value in hidden input type.

You can't use the grecaptcha.ready event without fist loading the recaptcha script. You should remove

<script>grecaptcha.ready(function() {
    grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
       document.getElementById('g-recaptcha-response').value=token;
    });
});</script>

And place it after you loaded the script:

<script type="text/javascript">

var reCaptchaFocus = function() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy';
    head.appendChild(script);

    var recaptchaInterval = setInterval(function() {
        if( !window.grecaptcha || !window.grecaptcha.execute ) { return; }

        clearInterval( recaptchaInterval );

        grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value=token;
        });
    }, 100 );
	document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
};
document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
</script>