Сайт перешел на функционал групп
Читаем новость, обсуждаем, делимся впечатлениями или может есть какие пожелания? Перейти
23 октября 2019 в 16:33
на сайт, и вы сможете вступить в группу.
Вы сможете подписаться на выход новых материалов группы.
Вы сможете подписаться на новые комментарии к выбранной записи группы.

Динамическая загрузка google reCAPTCHA. Грузим ВСЕ её ресурсы по требованию

Это будет не 100% готовое решение, а направление - в котором вы можете посмотреть.

Предыстория:

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

Стандартное подключение google reCAPTCHA не блещет изяществом:

У нас есть div-контейнер, к которому и будет привязываться гугл-рекапча:

<div id="kwpl_google_id" data-sitekey="some-sitekey"></div>

И сам скрипт рекапчи подключаете так: https://www.google.com/recaptcha/api.js

Для гостей всегда загружалось это:

Всё что было в рекапче - всё грузилось сразу
Всё что было в рекапче - всё грузилось сразу

- как видим, я отфильтровал и оставил в вкладке "сеть" только гугл рекапчи домены. Каждый раз, незалогиненный пользователь, загружал и 9-ть этих лишних ресурсов, весом 562 кб! Это дофига 😖


Какие есть варианты?

1. Гугл предлагает использовать вызов капчи по требованию. Загружать скрипт-лоадер капчи и потом, по требованию, из своего js вызывать и инициализировать рекапчу:

<script src='https://www.google.com/recaptcha/api.js?onload=kwplOnload&render=explicit' async></script>

- гугл говорит: что по готовности капчи сработает ваша функция kwplOnload() и вы с ней можете делать так как хотите (убрать в onclick и только по клику вызывать все остальные ресурсы для инициализации рекапчи)

Метод хороший - но мне он не понравился - т.к. я все равно гружу 2 лишних ресурса всегда:

2 сейчас мне ненужных запроса
2 сейчас мне ненужных запроса

- пользователь может быть и не будет регистрироваться. Зачем ему даже 2 сторонних ненужных ресурса на 90 килобайт?


2. Давайте попробуем мой вариант.

Я предлагаю поступить так:
Клик по ссылке у нас вызывает окно с формой входа и регистрации. Его класс мы знаем и форма вызывается только так.
По клику мы динамически создадим скрипт-лоадер рекапчи.
Скрипт имеет коллбек - при отработке этого скрипта эта функция у нас запустится. При запуске она инициализирует рекапчу согласно её api.

Вот код:

add_action( 'wp_footer', 'fwpl_dinamic_recaptcha', 100 );
function fwpl_dinamic_recaptcha() {
    if ( is_user_logged_in() )
        return;

    echo "<script>
    var key = 'some-sitekey';
    function loadScript() {
        var script = document.createElement('script');
        script.src = 'https://www.google.com/recaptcha/api.js?onload=kwplOnload&render=explicit';
        script.async = true;
        document.body.appendChild(script);
    }

    jQuery(function($){
        $('body').on('click', '.rcl-login,.rcl-register', function(){
            loadScript();
        });
    });
    if(rcl_url_params['action-rcl']){
        loadScript();
    }
    var kwplOnload = function() {
        grecaptcha.render('kwpl_google_id',{'sitekey': key});
    }
 </script>
";
}

на 7-й строке - наш api ключ.

на 8-й, функция создания тега script с гугловским скриптом-загрузчиком.

на 15-16 строке, по готовности страницы, и по клику на нужные нам классы - мы запускаем создание script (а в нём ссылка на api.js - он загрузится с гугла) с 8-й строки. А api.js, в свою очередь, по готовности коллбек функцией kwplOnload() (23 строка) запускает рендер рекапчи. И у нас загружаются все ресурсы по клику.

на 17- строке (это в моём случае - форма входа и регистрации от плагина WP-Recall) - по GET параметру я также инициализирую в форме рекапчу.

upd: 2019-11-02
В 12-й строке document.body.append(script); заменена на document.body.appendChild(script); это позволило работать и в 11 IE. Хоть его доля сейчас на рынке крайне мала (2% и падает).
И так как определение переменной let script в IE 11-м также частично. Поменял в 9-й строке на var script


Что я получил?

Гость загружает 0 ресурсов от рекапчи. Только вызвав всплывающую форму от WP-Recall ему будут загружаться все необходимые ресурсы для рекапчи. Результат вы можете увидеть на этом сайте.

Метрики сайта конечно же выросли. Мы еще раз ускорили свой сайт - просто по условию загружая нужные, в определенный момент, ресурсы.

Надеюсь этот вариант поможет вам решить схожую задачу. Всплывающих форм много разных - берите этот метод и интегрируйте в свой проект.

p.s. true story по кастомизации шрифтов и иконочного шрифта на этом сайте я вам предлагаю также прочитать. Эти 3 действия разогнали мой сайт.

Комментариев нет

Оставьте комментарий

Авторизация
*
*
Регистрация
*
*
*
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Генерация пароля
Закрыть