Асинхронная загрузка Recaptcha

В одном из прежних сообщений я уже описывал, как добавить на сайт ReCAPTCHA для защиты от спама. Но скрипт ReCAPTCHA имеет увеличивает время загрузки сайта и ухудшает показатели в Google Page Insights. Если она нужна на одной странице (скажем, только регистрации пользователя), то это не страшно. Но вот если нужно защитить форму, которая есть на каждой странице сайта (например, форма обратной связи или записи на какое-нибудь мероприятие), загрузку приходится делать всё время.
Тем не менее, есть решение, которое позволяет обойти проблему. Будем загружать ReCAPTCHA не тогда, когда грузится страница целиком, а тогда, когда пользователь начинает что-то вводить в нужную форму. Первое, что приходит в голову — это повесить обработчик на событие click, который будет добавлять тег script. Однако нужно помнить, что продвинутые пользователи могут поставить курсор в форму не мышью, а клавишей Tab. Поэтому обработчик будем вешать на событие focus. Пропишем нужной форме (или даже формам) класс recaptcha и повесим на событие focus обработчик. Чтобы избежать двойной загрузки скрипта, используем переменную recaptcha_loaded:
let recaptcha_forms = document.querySelectorAll('.recaptcha'); let recaptcha_loaded = false; for (let i=0; i<recaptcha_forms.length;i++) {   recaptcha_forms[i].addEventListener('focus',function (e) {     if (!recaptcha_loaded) {       let recaptcha = document.createElement('script');       recaptcha.src="https://www.google.com/recaptcha/api.js";       recaptcha.onload = ()=>recaptcha_loaded=true;       document.head.appendChild(recaptcha);     }   },true); }
На всякий случай пример кода формы:
<form method="POST" action="" class="recaptcha"> <!-- Тут идут поля нашей формы --> <div class="g-recaptcha" data-sitekey="6L..."></div> </form>
Важно: добавлять обработчик нужно с параметром true, так как событие focus на прямом ходу обработки не является всплывающим. Альтернативный вариант — использовать событие focusin, которое всплывает и на прямом ходу.
Данный пример кода делался для ReCAPTCHA v2, но можно использовать его и с любой аналогичной системой защиты от спама.