[Performance] Load reCaptcha on focus to input to improve page load times

[Bashev]

Description

If reCaptcha is enabled, this few additional JS files are loaded automatically with the page loading. This reflects to the page speed of the site and of course, increase time to complete loading.

These files are external for the system and this also reflects to pagesspeed. They cannot be merged or bundled. This are 26 additional requests which comes with recaptcha loading.

Expected behavior

Load recaptcha related files (and entire library) to be loaded only if is required and have forms to which need to be applied.

Benefits

Reduce loading time, increase page speed of the site (Google Page Speed).

Additional information

No response

Release note

No response

[m2-assistant]

Hi @Bashev. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[Bashev]

@magento i am working on this

[Bashev]

Fixed in magento/security-package#334

[Bashev]

Before

After

[techtoni]

Re invisible reCaptcha v3 - the way this technology works is it tracks the user behaviour through the website to establish if it is real user or a bot. It is supposed to be included on all pages, not loaded after a form is interacted with, see documentation - https://developers.google.com/recaptcha/docs/v3