Recaptcha slowing down page load

[Bo Kelly]

Hi there,

I'm a relatively inexperienced developer, so please mind my ignorance.

I'm assuming the gem handles loading of the JS dependency for recaptcha. However, it is adding ~500ms to loading the entire website (the recaptcha is located in a modal preloaded with the main page).

I assume the fix for the problem will be lazy loading the dependency when the modal is loaded, but is this easily achievable with this gem? I've of course searched the realms of the interwebs for a solution, but I only find solutions concerned with loading the library directly with JS and not this gem.

Before I dive into the rabbit hole of tinkering, I figured asking here. Is the solution simply to lazy load the content of the modal or is the gem forcing the JS to load regardless of when the captcha is actually shown?

Again, sorry for probably asking a stupid question, but regardless it'll help me understand.

[Michael Grosser]

try

:script_async | Set to false to load the external api.js resource synchronously. (default: true)
-- | --
:script_defer | Set to true to defer loading of external api.js until HTML documen has been parsed. (default: true)

if they don't do the trick plz reopen

[Pablo Gajardo]

Hi, I´ve been trying to set both options as true when calling recaptcha_v3 like this:

recaptcha_v3(action: 'work_modal', :script_async true, :script_defer true)

After setting both options, reCaptcha stops working. as it was told before, supposedly :script_async and :script_defer defaults are true, but when reading Helpers.rb

def self.recaptcha_v3(options = {})
  site_key = options[:site_key] ||= Recaptcha.configuration.site_key!
  action = options.delete(:action) || raise(Recaptcha::RecaptchaError, 'action is required')
  id = options.delete(:id) || "g-recaptcha-response-data-" + dasherize_action(action)
  name = options.delete(:name) || "g-recaptcha-response-data[#{action}]"
  turbolinks = options.delete(:turbolinks)
  options[:render] = site_key
  options[:script_async] ||= false
  options[:script_defer] ||= false
  element = options.delete(:element)`

it seems that options default is false, and also when trying to override the value it doesn´t work. How can enable lazy load or maybe I´m doing something wrong when trying to change the options :script_async and :script_deferdefault value?

[Michael Grosser]

options[:script_async] ||= false

will keep the true ... so maybe open the gem and raise options.inspect to see what is going on