Search code examples
invisible-recaptchaweb-performancelighthouse

Invisible recaptcha massively increasing first interactive time

Inclusion of Google's 'invisible recaptcha' seems to be massively increasing the 'First interactive' (and subsequently 'consistently interactive') times as measured by Lighthouse.

I set up two empty webpages using an HTML5 boilerplate template. These sites differ only by the inclusion of the recaptcha API script; namely, this line:

<script src='https://www.google.com/recaptcha/api.js'></script>

The first (non-recaptcha) site receives a first interactive time equivalent to the first meaningful paint time. non-recaptcha

The second (recaptcha) site gets a first interactive time of ~14 seconds, and an estimated input latency time of ~1.6 seconds:

recaptcha

I included the script at the bottom of the <head> section as indicated in Google's instructions, however I've also tried including the script at the bottom of the <body> (as well as with async and defer) with no noticeable improvements.

Is this a problem with the way Lighthouse is measuring first interactive (especially considering it's still marked as 'beta') or Recaptcha? If the latter case, is this something to be worried about, and if so are there ways to mitigate the impact?

Solution

  • This was bothering me for some time too and this is the best solution I come up with:

    1. Do not load api.js (render captcha) script initially. This is important, as combined with [2] creates relatively huge interactive time slowdown.
    2. Do not bind the captcha to any element initially, just "prepare" it in a function for later.
    3. Now, this is the most important (clever) part - when your user starts interacting with the form, inject the api.js (recaptha__..js) script into the header, browser will load it, and trigger the binding function to load the actual captcha.

    You can find more information and explanation with some code examples here: https://tehnoblog.org/google-invisible-recaptcha-how-to-boost-lighthouse-performance-score/