Как правильно подключить внешнюю JS библиотеку чтобы она загружалась только после загрузки всей html страницы?

Question

[Александр]

У меня на сайте используется JS библиотека google recaptcha, заметил что из-за нее падает скорость загрузки страниц.

Как правильно подключить внешнюю JS google библиотеку так чтобы чтобы она загружалась только после загрузки всей html страницы и стилей, ускорить загрузку страницы, так чтобы загружался весь html и стили и только затем подключалась google библиотека?

Можно ли подключать внешнею JS библиотеку при событии onload?

Сейчас у меня ссылка на google библиотеку подключается таким образом:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

в ссылке прописал атрибуты async defer но все равно скорость загрузки страницы падает из-за этой библиотеки. Сама ссылка находится в нижней части страницы. Как я понял defer - указывает чтобы скачивать параллельно с остальным контентом и выполнять по порядку непосредственно перед событием DOMContentLoaded

Answer 1

[Tim]

window.onload = function() {
  const script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js';
  script.async = 1;
  script.defer = 1;
  document.body.append(script);
}

Answer 2

[Alex]

В самый низ страницы, пишете скрипт, который по событию window.onload вставляет в документ тег скрипта капчи.