Recaptcha issue and lighthouse report

[JSeckinger]

Hello, I have been trying to optimize performance on my site using Lighthouse analytics, and it seems that the recaptcha has been slowing my site down to some degree (see below).

When I remove the recaptcha and redeploy, lighthouse analytics fails to get a performance score

But when I add the recaptcha back it seems to record the performance score just fine.

I’m not sure what the issue is here, do you have any idea what could be the cause? The only piece of code I am changing is the recapatcha div in the form

This is the piece of code I remove, and nothing else:

								<div class="field">
									<div data-netlify-recaptcha="true"></div>
								</div>

I’m stumped, and maybe I’m just overlooking something blatantly obvious. Any ideas?

btw I have more screenshots, I am only able to embed a single item as I’m a new user to the forum.

[JSeckinger]

Here is the blank performance screenshot

[JSeckinger]

and here is the performance when the recaptcha is present–with a lower main-thread blocking time (it seems to vary)

[hrishikesh]

Since the ReCaptcha script is out of your control, I think there’s nothing much you can really do about it. It essentially boils down to speed/feature tradeoff. If you need ReCaptcha, you’d have to live with the performance penalty it might cost or remove it altogether.

I’m assuming you’re using Netlify’s ReCaptcha integration and it’s supposed to be automatic, thus again removing your layer of control of positioning the JavaScript file on the page.

However, I’m unsure why the test fails with ReCaptcha removed, maybe a Lighthouse bug? But to sum it up, I think, there’s nothing you can do. If you need ReCaptcha, try removing other libraries and assets, or keep them and remove ReCaptcha, or keep all and lose performance score. It’s one of these 3.

Note: This need not be a factual answer, I’ve stated my thinking and opinions.

[JSeckinger]

Gotcha, yeah I dont need the recaptcha, but I would like to be able to get lighthouse metrics and I was curious if there was a known issue or if netlify has a solution to why removing the recaptcha would trigger a lighthouse issue, as before I had the recaptcha added, I had no problem getting performance reports.

[jen]

Hey @JSeckinger,
The only thing I can think of is that the Netlify provided reCaptcha is added in two places: Spam filters | Netlify Docs You mentioned removing the div in the body of the form, but not data-netlify-recaptcha="true" from the opening form tag.

[JSeckinger]

@jen that was it! completely overlooked the first tag. THANK YOU!!