Lazy load external recaptcha assets

Created on 20 December 2021, almost 3 years ago
Updated 6 August 2024, 4 months ago

Problem/Motivation

Embedding the Google Recaptcha on the page leads to decreased page performance, due to:
- additional network transfer to fetch the recaptcha JS from Google (~140KB)
- additional JS execution of these assets, even if the user may not use the form.

This is an item that was flagged in a performance review of our site, using multiple tools (webpagetest.org, Google Pagespeed).
In our case, we had forms embedded on many pages that the users wouldn't interact with on every page load.

Steps to reproduce

Compare the performance of a page with/without recaptcha enabled.

Proposed resolution

Lazy load the recaptcha assets only when the user interacts with form elements on the page. See attached patch.

The recaptcha loading only triggers when the user interacts with one of: Text box, Text area or Checkbox. As long as a form contains one of these elements, then the recaptcha will be added to the form as the user fills it out.

I don't necessarily expect this to be merged, as this behaviour may not be desired by all users. However this was important in our case, and I wanted to share the patch we're using on our site, in case it is of use for others.

Remaining tasks

Review by maintainers and either close this as "Won't fix", or to consider if there is a way this should be included as part of the core recaptcha module.

Feature request
Status

Needs work

Version

3.0

Component

reCAPTCHA V2

Created by

🇿🇦South Africa Gomez_in_the_South

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024