Как использовать partytown для загрузки reCaptcha?

Как можно подружить интеграцию reCaptcha v3 с плагином Contact Form 7 на WordPress при использовании Partytown для загрузки метрик и повышения web-vitals в pagespeed?
  • 28 марта 2024 г. 14:39
Ответы на вопрос 2
Для использования reCaptcha с Partytown на вашем веб-сайте, вы можете следовать следующим шагам:

1. Установите и настройте reCaptcha v3 на вашем веб-сайте. Получите от Google reCaptcha site key и secret key.

2. Установите Partytown на вашем веб-сайте. Partytown - это JavaScript-библиотека, которая позволяет загружать сторонние скрипты асинхронно, чтобы улучшить производительность страницы.

3. Для интеграции reCaptcha v3 с плагином Contact Form 7 на WordPress, вам нужно будет добавить соответствующий код на страницу контактной формы. Обычно это может быть сделано через дополнительное поле в форме или плагине для загрузки reCaptcha.

4. Затем вы можете использовать Partytown для загрузки reCaptcha скрипта асинхронно на странице контактной формы. Это поможет улучшить web-vitals и общую производительность вашего сайта.

5. Проверьте, что реализация работает должным образом и пользователи могут успешно проходить проверку reCaptcha при отправке контактной формы.

Изменения, внесенные на вашем сайте при использовании Partytown для загрузки reCaptcha, должны быть перед началом внедрения тщательно протестированы, чтобы избежать некорректной работы функционала.
Данный плагин https://wordpress.org/plugins/la-sentinelle-antispam/ к сожалению не работал, если подключать jquery самостоятельно. 

Поискал другие варианты и нашел это https://ru.wordpress.org/plugins/honeypot/#description

Он тоже требует в себе jquery, но в данном случае, можно подгружать свой и плагин будет работать штатно. Вот, что сделал, чтобы убрать jquery из head ( вызывал TBT в pagespeed )

function custom_deregister_scripts()
{
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery-migrate');
}
add_action('wp_enqueue_scripts', 'custom_deregister_scripts', 100);

function remove_jquery_dependency_from_wpa_script()
{
	// Отменяем регистрацию исходного скрипта
	wp_dequeue_script('wpascript');
	wp_deregister_script('wpascript');

	// Регистрируем скрипт заново без зависимости от 'jquery'
	wp_register_script('wpascript', plugins_url('/honeypot/includes/js/wpa.js'), array(), $GLOBALS['wpa_version'], true);
	wp_enqueue_script('wpascript');

	// Если вам нужно добавить inline скрипт, как в исходном коде
	wp_add_inline_script('wpascript', 'wpa_field_info = ' . json_encode(wpa_field_info()));
}

// Добавляем нашу функцию в хук wp_enqueue_scripts с приоритетом, который гарантирует, что она выполнится после регистрации скриптов плагином
add_action('wp_enqueue_scripts', 'remove_jquery_dependency_from_wpa_script', 100);


А дальше в footer перед wp_footer добавляем свой jQuery и все.

От reCaptcha пришлось отказаться, в целях поднятия pagespeed баллов
Похожие вопросы