Loading Analytics and recaptcha optimization?

Hello,

I have a problem. I optimize the webpage for faster loading time - images, minify javascript, css, html. But after adding Re-Captcha and Google Analytics the page slows down. 2.5 seconds is not bad -but I would like to make it better.

GT metrix says: "448.5KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

Any ideas? Adding custom code to the header?

https://gtmetrix.com/reports/www.vinarstvibukovsky.cz/f6qkcJXF
https://gtmetrix.com/reports/vinarstvi-bukovsky.webflow.io/vgQawBm3

That test does not take into consideration that most clients have already cached these scripts so they are not downloaded unless not cached. You actually don’t want to defer GA. I would ignore it.

Would you mind elaborating a little on why you don’t wand to defer GA?

This is a little off topic, but I’m trying to understand when you would want to use defer and when async.
It would seem to me async doesn’t have any benefit over defer, in fact it blocks parsing when executing the script, which difer doesn’t.

People seem to say “you should use async when you don’t mind the the order or when the scripts ar executed”. So if you don’t care when they are executed, why not chose defer and spare the parse blocking time?

Because it is a tracking script and you typically want data starting when the page loads, which is also why Google recommends it is loaded first. You can alternatively use Google Tag Manager which loads all scripts asynchronously. Below is a good resource regarding the subject.

Thank you for answering.

What you say makes sense, but if you want the script to be the first thing to execute, wouldn’t it be better to not use either attribute?

I’m guessing using async in this case is to get “the best of both worlds”, in the sense that you start parsing your HTML straight away, and the script executes as soon as it’s available, so not waiting till HTML parsing is finished.

That resource you shared is actually the link that introduced me to the concept of async and defer scripts. What I didn’t really finish to understand is why you’d chose async over defer.

As a bottom line, is it correct to state the following?:

  • If the script must absolutely execute at a specific moment, don’t use either attribute.
  • If the script should run as soon as possible but nothing else depends on it to properly work, use async.
  • If you don’t care when the script is executed, and nothing else depends on it, always use defer.
  • If you have more than one script and don’t care when they are executed, but the execution order is important, always use defer.

So for cases like the ShareThis social media buttons script, which comes with the async attribute by default, would it make more sense to change it to defer?