Коротко. На странице было много форм AjaxForm, каждая тянула https://www.google.com/recaptcha/api.js и рендерила свой виджет reCAPTCHA v2. Это приводило к «лавине» сетевых запросов (anchor, frame, webworker.js, recaptcha__*.js), просадке производительности и багам при валидации. Мы оставили единый загрузчик скрипта и включили ленивую отрисовку виджетов: капча рисуется только когда блок попадает во вьюпорт или появляется в модалке. Результат — резкое сокращение фоновых загрузок без ломки верстки и MODX-чанков.

Проблема

Сценарий знакомый: на посадочной странице несколько форм, каждая добавляет контейнер <div class="g-recaptcha"> и тут же вставляет <script src="https://www.google.com/recaptcha/api.js?hl=ru">. В результате:

• скрипт api.js грузится многократно (иногда с разными параметрами);
• каждый виджет reCAPTCHA v2 (checkbox) создаёт отдельный набор iframe/воркеров (anchor, frame, webworker.js, recaptcha__*.js);
• в HAR заметно, что даже при одном api.js поднимается много «служебных» ресурсов — потому что виджетов много и они рендерятся одновременно;
• возникают гонки и ошибки валидации («Please select the checkbox…») при асинхронной перегрузке скриптов или конфликте со сторонними виджетами.

Почему так происходит

reCAPTCHA v2 устроена так, что каждый отдельный виджет — это не просто один DOM-элемент, а связка из нескольких ресурсов. Когда на странице 5–10 форм, умножаем эту связку на количество виджетов — вот и «шум» в сети. А если скрипт api.js подключен несколько раз, проблемы множатся: дубли инициализации, гонки, пустой g-recaptcha-response на бэкенде.

Альтернативы и что выбрать

• v2 Checkbox (как есть). Привычный «Я не робот» чекбокс. Плюсы: прозрачно для пользователя, минимум интеграционных рисков. Минусы: много служебных загрузок при множестве форм.
• v2 Invisible (рекомендуется для v2). Один невидимый виджет на страницу. Токен получаем в момент сабмита любой формы. Плюсы: меньше служебных запросов, чистый интерфейс. Минусы: нужны отдельные ключи «v2 Invisible»; требуется аккуратный JS.
• v3. Вообще без виджетов/iframes; токен берётся перед сабмитом. Плюсы: самая «легкая» сеть. Минусы: нужен серверный хук под v3 (проверка score/action), дизайн антибот-защиты изменится.

 

 

Нюансы, о которых легко забыть

• Один api.js на страницу. Скрипт должен подключаться ровно один раз — централизованно (лучше внизу). Любые повторные вставки из чанков форм нужно убрать.
• Сторонние виджеты. Чаты/CRM/виджеты форм иногда тоже подключают reCAPTCHA (даже v3). Нужен «умный» лоадер, который проверяет, не подгружен ли скрипт кем-то ещё.
• Модальные окна. Пока модалка скрыта (display:none), IntersectionObserver не увидит её содержимое. Виджет нужно рендерить при открытии модалки или после появления в DOM.
• Домены и тип ключа. Для v2 Invisible и v2 Checkbox нужны разные типы ключей. Соответствие доменов в консоли Google — обязательно.
• Кэш и порядок инициализации. После правок — очистка кэша MODX. В JS — защита от повторной инициализации (флаги/placeholderы).

Решение: ленивый рендер reCAPTCHA v2 в MODX

Я добился того, что скрипт грузится один раз, а сами виджеты рендерятся только тогда, когда они действительно нужны (в зоне видимости или при открытии модалки). Для этого достаточно двух компонентов:

1) Чанк reCAPTCHA

<div class="g-recaptcha" data-sitekey=""></div>

Важно: никакого <script src=".../api.js"> в этом чанке быть не должно.

2) Сниппет recaptchav2_lazy_loader

Сниппет подключает api.js один раз с render=explicit и бережно, а также включает ленивую отрисовку всех .g-recaptcha по мере видимости и появления. В шаблоне достаточно вставить:

Что делает сниппет

• Проверяет, не был ли api.js уже подключён (нами или сторонним кодом), и добавляет его только при необходимости.
• Ждёт, когда grecaptcha.render станет доступен, и навешивает IntersectionObserver на все .g-recaptcha.
• Рендерит виджет «по требованию»: попал блок во вьюпорт — отрисовали; появился динамически — отрисовали; остальное не трогаем.

Пошаговый чек-лист внедрения

1. В чанке reCAPTCHA оставить только <div class="g-recaptcha"> с корректным data-sitekey.
2. В шаблон добавить вызов (один раз на страницу).
3. Очистить кэш MODX, сделать «жёсткую» перезагрузку.
4. Проверить в DevTools - Network - фильтр recaptcha:

• один api.js (реально загруженный или из кэша);
• служебные ресурсы появляются только для видимых/открытых форм;
• при открытии модалки — виджет рисуется и работает;
• в форме появляется поле g-recaptcha-response при решении капчи.

Как быть, если нужна ещё меньшая нагрузка

• v2 Invisible, один виджет. Создайте ключи Invisible v2, подключите единый невидимый виджет и запрашивайте токен перед сабмитом любой формы. Сетевых запросов на старте будет ещё меньше.
• v3. Самое лёгкое решение: нет виджетов, токен берётся перед отправкой. Потребуется серверная проверка score/action.

FAQ

Почему в HAR всё равно видно несколько webworker.js и anchor?
Потому что для каждого реально отрисованного виджета reCAPTCHA v2 это норма. Мы убираем лишнюю одновременную инициализацию и дубли, но не меняем архитектуру v2 checkbox. Зато теперь виджеты рисуются только по мере нужды — и стартовая «лавина» исчезает.

Нужно ли вешать загрузку на события (клик/idle)?
Нет, если виджеты только ниже по странице и рендерятся через IntersectionObserver. Для скрытых модалок полезно добавить хук «по открытию» (рендерить внутри модалки в момент показа).

Что если другой виджет сам тянет reCAPTCHA?
«Умный» лоадер просто не подгрузит скрипт второй раз. Если сторонний код рендерит свои виджеты — они появятся только когда контейнер станет видимым (у нас это также покрыто наблюдателем DOM).

Итог

Я сохранил текущий стек (MODX + AjaxForm + reCAPTCHA v2) и убрал главную причину перегрузки: многократную инициализацию и ранний рендер всех виджетов сразу. Теперь reCAPTCHA подстраивается под реальное поведение пользователя: грузим один скрипт — рисуем только то, что нужно, тогда, когда нужно.