Defer reCaptcha js files

Hi!

We use wp_enqueue_script to enqueue those assets so they should be handled by WP Rocket.

Do you have other plugins using reCaptcha maybe?

Thanks!

Hi @everpress,
Thank you for getting back to me ??

I don’t have another reCaptcha plugin loading on the homepage, but do have one loading on the contact form /checkout page / login area.
However the other reCaptcha plugin only loads code on the pages is it being used on.

For testing purposes I deactivated the other plugin and ran the GTMetix test again, here are the reCaptcha specific lines in the ‘Defer parsing JavaScript’:
https://www.gstatic.com/recaptcha/releases/RDiPdrU_gv1XhhWy6nqfMf9O/recaptcha__en.js (217.1KiB)
https://www.google.com/recaptcha/api.js (413B)
https://www.google.com/recaptcha/api2/ (45B of inline JavaScript)

I guess it’s really only the first one from https://www.gstatic.com that would benefit from being deferred as the other two are tiny.

As they’re all external I’m wondering if it’s possible to defer them? I’m not really sure how it works.
I’m assuming as reCaptcha is a security measure the codes can’t be hosted locally and then deferred?

*EDIT*
I just checked the head of my site and am seeing:
<script type=”text/javascript” async=”” src=”https://www.gstatic.com/recaptcha/releases/RDiPdrU_gv1XhhWy6nqfMf9O/recaptcha__en.js&#8221; ></script>

So I guess this has async applied rather than defer?

The reCaptcha plugin also throws up the following other suggestions in GTMetrix:

Optimize the order of styles and scripts
The following inline script blocks were found in https://www.google.com/recaptcha/api2/anchor between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.
Inline script block #1

Leverage browser caching
Leverage browser caching for the following cacheable resources:
https://www.google.com/recaptcha/api.js (5 minutes)
https://www.google.com/recaptcha/api2/webworker.js (5 minutes)

Specify a cache validator
The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources:
https://www.google.com/recaptcha/api.js
https://www.google.com/recaptcha/api2/webworker.js

Any thoughts would be very welcome!

Kind regards,
JP

• This reply was modified 5 years, 1 month ago by JapeNZ.
• This reply was modified 5 years, 1 month ago by JapeNZ.
• This reply was modified 5 years, 1 month ago by JapeNZ.

Hi JP,

Did you manage to fix the reCaptcha issue?

I am having a similar problem, a 288.8 KiB JavaScript file is parsed during initial page load: https://www.gstatic.com/recaptcha/releases/…/recaptcha__en.js

I am using ReCaptcha v3 so “I do not use an extra reCaptcha on the contact-form-7”

I don’t have other plugins using reCaptcha either.

Did you defer parsing your files? and did you reduce blocking on page rendering?

Thanks for your help!

CD