Невидимая reCaptcha с динамической AJAX погрузкой

Всем привет! С вами Джон Панч, и сегодня я поведаю Вам как мне удалось оптимизировать работу reCaptcha - самой популярной капчи от Google. Началось все с того, что я занимался оптимизацией скорости загрузки страниц интернет-магазина своего клиента, который создан на базе Pedanto CMS моей студии.

Выявление проблемы с reCaprcha

В качестве инструмента тестирования мною был выбран тестер Pingdom, задача которого показать сколько мегабайт весит страница, какое количество ресурсов она загружает и за какой промежуток времени это происходит. Для этих же целей можно использовать и gtmetrix, который дает еще больше данных.

Результат проверки показал, что размер загружаемой страницы превышал 2 мегабайта. И посмотрев лог запросов ниже, я увидал что больше 40% этого размера занимают скрипты.

Поскольку свои сайты я стараюсь разрабатывать с упором на оптимизацию, такой результат был неприемлемым. Но самое интересное что виной такому большому количеству скриптов была копия одного и того же скрипта, которому посвящена эта статья.

reCaprcha против оптимизации

Дальнейшее изучение результатов сканирования через Pingdom показало что скрипт recaptcha__ru.js загружается на странице столько раз, сколько на ней капч.

А поскольку на странице сайта есть форма авторизации, с вкладкой регистрации и вкладкой напоминания пароля. Да и еще в довесок форма подписки на рассылку в нижней части сайта, которая тоже использует капчу, то размер запросов получился не маленький.

И хотя эти скрипты загружаются в отложенном порядке и не влияют на скорость отображения контента на сайте. Но все таки влияют на скорость генерации страницы в целом, как и на количество мегабайт, которые в итоге получит посетитель сайта на свое устройство.

Если учесть что сейчас google активно ведет войну за мобильный трафик, то подобные утечки, необходимо исправлять.

 

Как добавить на страницу несколько форм с reCaptcha - неправильный способ

Довольно длительное время я пользовался решением, которое казалось мне самым логичным. Я создавал несколько форм с капчей и при загрузке скрипта, инициировал их. Разумеется первым делом я подключал сам скрипт reCaptcha с дополнительными параметрами, а именно onload и render

 

Далее в самой форме я добавлял класс по которому капча, определяла где ей нужно встаиваться

 

<script src="https://www.google.com/recaptcha/api.js?hl=ru&onload=CaptchaCallback&render=explicit" async="" defer=""></script>

 

И наконец вызывал jquery функцию, которая находила все классы с капчей и подключала к форме с ними reCaptcha

Тут код

Естественно этот метод работает, но также создает проблему о которой я написал выше.